weex 與 weexpack 環境搭建

weex 與 weexpack

weex init 會生成一個 weex 項目， 裏面有weex, vue 模板。若是要開發 Android，須要建一個 Android 項目。

weexpack, 能夠幫助搭建 Android 和 iOS 項目

 

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

1、安裝依賴

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

 1 $ brew install nvm 
 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

2、初始化

1 $ weex init project-name

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

包含以下目錄

README.md config  public
build  package.json src

3、開發

以後咱們進入項目所在路徑，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、安裝

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 android@6.2.1
2 // 或
3 $ weex platform add android@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目錄。

 

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

　　模擬器運行

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。