Weexpack 使用教程

簡介

---

 

　　weexpack 是 weex 新一代的工程開發套件，是基於weex快速搭建應用原型的利器。它能夠幫助開發者通過命令行創建weex工程，添加相應平台的weex app模版，並基於模版從本地、GitHub 或者 weex 應用市場安裝插件，快速打包 weex 應用並安裝到手機運行，對於具有分享精神的開發者而言還能夠創建weex插件模版並發布插件到weex應用市場。

　　weexpack 所提供的命令大致可分為三組，分別是：

• 打包命令

• weexpack create — 創建 weex 工程項目。

• weexpack platform add/remove — 安裝／移除 weex 應用模版，默認模版支持 weex bundle 調試和插件機制。

• weexpack platform list — 查看已安裝的平台模版及版本。

• weexpack platform run - 打包應用並安裝到設備運行。

• 插件使用者命令

• weexpack plugin add/remove — 安裝／移除 weex 插件，支持從本地、GitHub 或者 weex 應用市場安裝插件。

• weexpack plugin list — 查看已安裝的插件及版本。

• 插件開發者命令

• weexpack plugin create - 生成weex插件模版，主要是配置文件和必需的目錄。

• weexpack plugin publish - 發布插件到weex插件市場。

安裝

---

　　環境要求:

• 目前支持 Mac、windows、linux平台(windows下僅能打包android)。
• 配置 Node.js 環境，並且安裝 npm 包管理器。(需要node6.0+) 參考:http://www.cnblogs.com/winsoncheung/p/6547923.html
• 如果要支持 iOS 平台則需要配置 iOS 開發環境：
  • 安裝 Xcode IDE ，啟動一次 Xcode ，使 Xcode 自動安裝開發者工具和確認使用協議。
  • 安裝 cocoaPods。 參考:http://www.cnblogs.com/winsoncheung/p/6547923.html
    
• 如果要支持 Android 平台則需要配置 Android 開發環境：
  • 安裝 Android Studio（推薦）或者 Android SDK。打開 AVD Manager ，新建 Android 模擬器並啟動 。（如果有安裝 Docker ，請關閉 Docker Server 。）
  • 保證Android build-tool的版本為23.0.2。目前必須為23.0.2, 否無將無法編譯。　

　　安裝命令

　　首先，全局安裝 weex-pack 命令：

$ npm install -g weexpack@0.3.12-beta

　   或者 在 clone 的 weexpack 根目錄下執行:

$ npm install

 注: 目前最新的weexpack版本是0.3.12的測試版, 正式版是0.3.11, 但正式版在MacOS上無法添加platform, 會出現 "Error:Unexpected token <<" 的錯誤.

　　解決辦法就是重新安裝0.3.12-beta版本, 在terminal執行一次:

$ npm install -g weexpack@0.3.12-beta　　

　　相信阿里會很快解決這個問題. ^_^

 

打包及插件使用

---

　　打包主要過程如下圖所示，其中插件操作是打包過程的可選項，不是必須的。

    　

　　

詳細步驟

　　1. 創建工程

　　在terminal中進入你需要放置工程目錄的文件夾中, 例如放在桌面上, 執行如下命令:

$ cd Desktop

$ weexpack create appName

　　此時 在桌面上就已經建好了項目工程文件夾, 目錄如下:

　　         

　　platforms: 平台模板目錄

　　plugins: 插件下載目錄

　　src: 業務代碼目錄

 

　　通過 create 命令創建的工程默認不包含 ios 和 android 工程模版，創建完成之后就可以切換到appName目錄下並安裝依賴。　　

$ cd appName && npm install

　　等一段時間, 當完成后 目錄中或多一個node_modules的文件夾, 這個文件夾中的內容就是要添加的依賴。

　　

　　2. 添加工程模板

　　添加應用模版，官方提供的模版默認支持 weex bundle 調試和插件機制，注意模版名稱均為小寫，模版被安裝到platforms目錄下。

　　添加模板時terminal仍處於項目工程的根目錄下。

　　>>添加android模版:

$ weexpack platform add android

　　添加完成后Android模板目錄如下:

　　

　　

　　>> 添加iOS模板:

$ weexpack platform add ios

　　添加完成后iOS模板目錄如下:

　　

 

　　對於已安裝的模版可以使用weexpack platform list命令查看:

　　

　 如果想要刪除某個不需要的平台可以使用 weexpack platform remove移除，比如window平台用戶是不需要ios模版的，可用如下命令移除。

$ weexpack platform remove android

 

　　3. 安裝 weex 插件（可選項）

     添加想要使用的插件，支持從本地或者 weex 應用市場安裝插件。

　　>>添加想要使用的插件，支持從本地或者 weex 應用市場安裝插件。

$ weexpack plugin add path/to/plugin

 

　　>> 從插件市場添加插件，例如 weex-chart。

$ weexpack plugin add weex-chart

　　

 　　模版的weexplugin是插件安裝的目標工程。以安卓為例，其目錄如下:

weexplugin
  ├── build.gradle  //  插件編譯腳本，工具自動維護
  ├── libs
  ├── proguard-rules.pro
  ├── src
  │   └── main
  │       ├── AndroidManifest.xml // 插件android manifest配置文件
  │       ├── java
  │       │   ├── // 插件src安裝目錄
  │       │   └── com
  │       │       └── alibaba
  │       │           └── weex
  │       │               └── plugin
  │       │                   ├── ConfigXmlParser.java // 配置文件解析器
  │       │                   ├── PluginConfig.java    // 外部接口
  │       │                   ├── PluginEntry.java     // 插件描述
  │       │                   └── PluginManager.java   // 插件管理器
  │       └── res // 插件資源安裝目錄
  │           ├── drawable
  │           ├── values
  │           │   └── strings.xml
  │           └── xml
  │               └── config.xml // 插件配置文件，PluginManager解析配置文件加載插件

　　

　　對於已安裝的插件可以使用 weexpack plugin list 命令查看。

• 查看已安裝插件

   $ weexpack plugin list

   

　　如果想要刪除某個不需要的插件可以使用 weexpack plugin remove 移除，比如weex-chart

• 移除插件，例如weex-chart

  $ weexpack plugin remove weex-chart

　　

　　4. 打包應用並安裝運行

　　完成以上步驟並we代碼放在src目錄下，就可以打包運行了，打包過程中可能要下載依賴和編譯工具，這會是個較為耗時的過程，安裝運行需要打開模擬器或者連接設備。

　　打包運行android應用　　　　

$ weexpack run android

• 你可以更改項目目錄下的android.config.json

  • AppName: 應用名
  • AppId: application_id 包名
  • SplashText: 歡迎頁上面的文字
  • WeexBundle: 指定的weex bundle文件（支持文件名和url的形式）

  文件名則以本地文件的方式加載bundle,url則以遠程的方式加載bundle 如果以本地方式指定bundle .we文件請放到src目錄。

• 打包運行ios應用

  • 模擬器運行

    $ weexpack run ios

     

  • 構建ipa包

    $ weexpack 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文件路徑

• 打包html5平台：

  $ weexpack build web

   

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

• 在 html5 平台運行：

  $ weexpack run web

   

　本博客插件部分摘自:https://www.npmjs.com/package/weexpack 

 

　南心芭比: 熱愛分享, 收獲快樂~