專案啟動之初我們公司邀請了weex方面的專家來給我們培訓weex相關技術,我們大概跟著邊學邊做了乙個多星期就基本能自己開發weex的介面了,不過後面遇到一些問題(主要是涉及的原生功能或者原生擴充套件的)還需要大神幫忙解決。當時雖然我是有android原生開發的基礎的,但是畢竟經驗不足,當時是請的專業的android和ios的原生開發人員為我們提供原生方面的支援。
我們之前使用weex開發的專案都是使用的weexplus,weexplus是乙個由weex開發大神封裝的weex二次開發的腳手架,作者已經在github上開源出來,在weex的基礎上新增了很多的module和component,很大程度上提高了開發效率。還提供了介面預載入的能力,優化了weex介面載入會有乙個短暫白屏的問題。在使用weexplus的過程中通過閱讀其原始碼和理解其設計思路,對weex框架有了一定程度的理解,在這裡表示感謝=。=。
前言有點多了,接下來進入正題,首先我們按照weex官方教程搭建weex開發的環境。
安裝完成後在終端輸入如下命令驗證:
$ node -v
v6.11.3
$ npm -v
3.10.10
安裝weex官方提供的weex-toolkit腳手架,執行如下命令進行安裝:
$ npm install -g weex-toolkit
$ weex -v //檢視當前weex版本
接下來使用weex-toolkit建立weex專案
$ weex create weex-project
執行此命令後我們實際上也安裝了weexpack工具
執行weexpack platform add android/ios 新增android和ios的模板專案
在package.json
中,已經配置好了幾個常用的 npm script,分別是:
build
: 原始碼打包,生成 js bundle
dev
: webpack watch 模式,方便開發
serve
: 開啟hotreload伺服器,**改動的將會實時同步到網頁中
在執行npm run dev和npm run serve之前需要先執行npm install安裝weex開發所需的依賴。
之後執行根目錄下的npm run dev & npm run serve
開啟 watch 模式和靜態伺服器。
然後我們開啟瀏覽器,進入http://localhost:8080/index.html
即可看到 weex h5 頁面。
也可以使用打包的android專案掃碼檢視原生介面效果。
我的開源weex專案 ,更加方便易用。
WEEX開發環境搭建
本文的主要目的是介紹weex開發環境的搭建。環境基於windows.如果是mac或linux方法有一些不同,本文不在介紹。具體參考weex快速上手.1.安裝node.js環境.weex專案的部署需要用到node.js的npm node.js的包管理工具package manager 檢視是否安裝成功...
Weex專案環境搭建
官方指導 node.js需要4.0 4.改變原有的環境變數,1 我們要先配置npm的全域性模組的存放路徑以及cache的路徑,例如我希望將以上兩個資料夾放在nodejs的主目錄下,便在nodejs下建立 node global 及 node cache 兩個資料夾,輸入以下命令改變npm配置 1.n...
weex安裝環境 WEEX環境搭建與入門詳解
weex簡介 環境搭建 開發weex程式之前,需要先搭建好相關的開發環境,為了同時開發android和ios跨平台應用,你需要一台mac電腦,然後安裝一些必要的軟體。homebrew homebrew是mac系統的包管理器,用於安裝nodejs和一些其他必需的工具軟體。安裝命令如下 usr bin ...