weex 與 weexpack 環境搭建
weex 與 weexpack
weex init 會生成一個 weex 項目， 裏面有weex, vue 模板。如果要開發 Android，需要建一個 Android 項目。
weexpack, 可以幫助搭建 Android 和 iOS 項目
---------------------- weex ------------------------------------------------------------
一、安裝依賴
1. 安裝Nodejs, 可以使用nvm 或 n 等版本管理工具來搭建不同版本的Nodejs, 或直接使用 Homebrew 安裝
1 $ brew installnvm 3 $ nvm install v8.5.0 5 $ node -v 7 $ npm -v 9 $ npm install -g weex-toolkit
2. 安裝 weex-toolkit
1 $ yarn global add weex-toolkit 2 $ weex -v
也可以使用 weex 驗證是否安裝成功
1 $ weex
二、初始化
1 $ weex init project-name
創建了一個使用 Weex 和 Vue 的模板項目。
包含如下目錄
README.md config public
build package.json src
三、開發
之後我們進入項目所在路徑，weex-toolkit 已經為我們生成了標準項目結構。
在 package.json 中，已經配置好了幾個常用的 npm script，分別是：
build: 源碼打包，生成 JS Bundledev: webpack watch 模式，方便開發serve: 開啟靜態服務器debug: 調試模式
我們先通過 npm install 安裝項目依賴。之後運行 npm run dev 和 npm run serve 開啟watch 模式和靜態服務器。
然後我們打開瀏覽器，進入 http://localhost:8080/index.html 即可看到 weex h5 頁面。
初始化時已經為我們創建了基本的示例，我們可以在 src/foo.vue 中查看。
---------------------- weexpack ------------------------------------------------------------
一、安裝
1. 確保Nodejs 版本大於6.0
1 $ node -v 2 $ npm -v
2. 可以通過 weex create 命令提示安裝，也可以手動安裝
1 $ yarn global add weexpack
3. 生成 weexpack 項目
1 $ weex create project-name 2 // 或 3 $ weexpack create project-name
// 生成如下目錄
README.md package.json start.bat
android.config.json platforms tools
config.xml plugins web
hooks src webpack.config.js
ios.config.json start webpack.dev.js
- 註意， 項目裏沒有 android 和 ios 模板， 需要手動添加插件
4. 安裝項目的依賴
1 $ yarn install 2 // 或 3 $yarn
5. 安裝應用模板， 生成 Android 和 iOS 工程
1 $ weexpack platform add/remove android 2 $ weexpack platform add/remove ios 3 // 或 4 $ weex platform add/remove android 5 $ weex platform add/remove ios
執行成功後在 platforms 目錄生成 android, ios 目錄
安裝指定版本，weexpack android 版本從6.0.0開始
1 $ weexpack platform add [email protected]6.2.1 2 // 或 3 $ weex platform add [email protected]6.2.1
6. 打包 apk
- android
1 $ weexpack run android 2 // 或 3 $ weex run android註意:
android.config.json 或者 ios.config.json中的信息
AppName: 生成的apk安裝後的應用名
AppId:application_id 包名
SplashText: 打開後歡迎頁上面的展示文字
WeexBundle:指定的weex bundle文件（支持文件名和url的形式）
文件名則以本地文件的方式加載bundle,url則以遠程的方式加載bundle 如果以本地方式指定bundle .we文件請放到src目錄。
- ios
1 $ weexpack run ios 2 // 或 3 $weex run ios
構建 ipa
1 $ weexpack build ios 2 // 或 3 $ weex build ios構建包的過程中，將會提示讓您輸入CodeSign（證書）
，Profile(provisioning profile),AppId，只有輸入真實的這些信息才能成功打包。 其余如AppName,和入口weex bundle文件可以編輯項目目錄下的ios.config.json配置。 打完包成功之後，可以在/playground/build/ipa_build/目錄下獲取ipa文件
註：證書需要預先安裝到keychain中，在keychain中點擊右鍵獲取證書id（證書名稱），provisioning profile文件（*mobileprovision）需要獲取UUID，進入目錄 可以看到mobileprovision_UUID.sh文件，此文件可以獲取到UUID
mobileprovision_UUID.sh用法如下： $ ./mobileprovision_UUID.sh *mobileprovision
參數（*mobileprovision）為provisioning profile文件路徑
7. html5 打包
1 $ weexpack build web 2 // 或 3 $ weex build web
這樣你可以把打包後的資源上傳到cdn服務器，然後上線你的web項目。
在html5平臺上運行
1 $ weexpack run web 2 // 或 3 $ weex run web
8. 查看已安裝的平臺模版及版本
1 $ weexpack platform list
9. 打包應用並安裝到設備運行
1 $ weexpack platform run
10. 插件使用者命令, 安裝、移除插件
1 $ weexpack plugin add/remove
11. 插件開發者命令
市場賬號登錄、登出
1 $ weexpack plugin login/logout
生成插件模板
1 $ weexpack plugin create
同步插件市場（不會做發布npm，針對npm已發布的包）[--ali] 可選參數
1 $ weexpack plugin sync
環境要求
- 目前支持 Mac、windows、linux平臺(windows下僅能打包android)。
- 配置 Node.js 環境，並且安裝 npm 包管理器。(
需要node6.0+) - 如果要支持 iOS 平臺則需要配置 iOS 開發環境：
- 安裝 Xcode IDE ，啟動一次 Xcode ，使 Xcode 自動安裝開發者工具和確認使用協議。
- 安裝 cocoaPods。
- 如果要支持 Android 平臺則需要配置 Android 開發環境：
- 安裝 Android Studio（推薦）或者 Android SDK。打開 AVD Manager ，新建 Android 模擬器並啟動 。（如果有安裝 Docker ，請關閉 Docker Server 。）
- 保證Android build-tool的版本為23.0.2。
weex 與 weexpack 環境搭建