weex 與 weexpack 環境搭建

weex 與 weexpack

weex init 會生成一個 weex 項目， 里面有weex, vue 模板。如果要開發 Android，需要建一個 Android 項目。

weexpack, 可以幫助搭建 Android 和 iOS 項目

 

---------------------- weex ------------------------------------------------------------

一、安裝依賴

1. 安裝Nodejs, 可以使用nvm 或 n 等版本管理工具來搭建不同版本的Nodejs, 或直接使用 Homebrew 安裝

$ brew install nvm 
$ nvm install v8.5.0
$ node -v
$ npm -v
$ npm install -g weex-toolkit

2. 安裝 weex-toolkit

$ yarn global add weex-toolkit
$ weex -v

也可以使用 weex 驗證是否安裝成功

$ weex

二、初始化

$ weex init project-name

創建了一個使用 Weex 和 Vue 的模板項目。

包含如下目錄

README.md config  public
build  package.json src

三、開發

之后我們進入項目所在路徑，weex-toolkit 已經為我們生成了標准項目結構。

在 package.json 中，已經配置好了幾個常用的 npm script，分別是：

• build: 源碼打包，生成 JS Bundle
• dev: 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

$ node -v
$ npm -v

2. 可以通過 weex create 命令提示安裝，也可以手動安裝

$ yarn global add weexpack

3. 生成 weexpack 項目

$ weex create project-name
// 或
$ 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. 安裝項目的依賴

$ yarn install
// 或
$yarn 

5. 安裝應用模板， 生成 Android 和 iOS 工程

$ weexpack platform add/remove android
$ weexpack platform add/remove ios
// 或
$ weex platform add/remove android
$ weex platform add/remove ios

執行成功后在 platforms 目錄生成 android, ios 目錄

安裝指定版本，weexpack android 版本從6.0.0開始

$ weexpack platform add android@6.2.1
// 或
$ weex platform add android@6.2.1

6. 打包 apk

• android

$ weexpack run android
// 或
$ 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目錄。

 

MAC下設置 ANDROID_HOME, PATH

　　a. 如果是從網上下載的Android-SDK，並雙擊安裝后，把應用拖到Application 里， 那么路徑應該是

　　

/Applications/ADT/sdk

　　b. 如果是通過 brew install android-sdk 命令安裝的

/usr/local/Cellar/android-sdk/

　　c. 如果是 Android Studio 帶的

/Users/michael/Library/Android/sdk/

設置ANDROID_HOME, PATH, 保存到.bash_profile 或 .zshrc 文件里

$ export ANDROID_HOME=/Users/michael/Library/Android/sdk/
$ export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

• ios

　　模擬器運行

$ weexpack run ios
// 或
$weex run ios

　　構建 ipa

$ weexpack build ios
// 或
$ 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 打包

$ weexpack build web
// 或
$ weex build web

這樣你可以把打包后的資源上傳到cdn服務器，然后上線你的web項目。

在html5平台上運行

$ weexpack run web
// 或
$ weex run web

8. 查看已安裝的平台模版及版本

$ weexpack platform list

9. 打包應用並安裝到設備運行

$ weexpack platform run

10. 插件使用者命令, 安裝、移除插件

$ weexpack plugin add/remove

11. 插件開發者命令

市場賬號登錄、登出

$ weexpack plugin login/logout

生成插件模板

$ weexpack plugin create

同步插件市場（不會做發布npm，針對npm已發布的包）[--ali] 可選參數

$ 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。