1. 程式人生 > >weex-toolkit 與 weexpack 建立專案的不同

weex-toolkit 與 weexpack 建立專案的不同

weex-toolkit 初始化的專案是針對開發單個 Weex 頁面而設計的,

也就是說這樣的專案只包括單個頁面開發需要的東西,

比如前端頁面原始檔、webpack 配置、npm 指令碼等。

專案產生的輸出就是一個 JS Bundle 檔案,可以自由的進行部署。

 

weex-pack 是初始化一個完整的 App 工程,

包括 Android 和 iOS 的整個 App 起步,前端頁面只是其中的一部分。

這樣的專案最終產出是一個 Android App 和一個 iOS App。

weex-pack 的進度稍慢

兩者其實是有區別的。

weex-toolkit 建立一個專案

?

1

$ weex init awesome-project

weex 官網說 :
weex-toolkit 對 weexpack 的水平擴充套件
weexpack 是基於 Weex 快速搭建應用原型的利器。它能夠幫助開發者通過命令列建立 Weex 工程,新增相應平臺的 Weex app 模版,並基於模版從本地,GitHub 或者 Weex 應用市場安裝外掛,快速打包 Weex 應用並安裝到手機執行,對於具有分享精神的開發者而言還能夠建立 Weex 外掛模版併發布外掛到 Weex 應用市場。

現在使用 weex-toolkit 同樣支援對 weexpack 的命令呼叫,如果你當前的專案與 weexpack 生成的專案目錄一致,那麼你可以直接實現對於 platform 的操作,從而構建具體的 

Android/IOS app

$ weex platform add ios

然而實際上測試 發現這兩個工具是無法平行使用的,使用weex-toolkit 建立的專案無法使用weexpack 的命令來新增 android 或者ios 平臺,而且我的兩個包都已經升級到了最新版本

很多朋友就卡在了這一步上,不得前進,其實這一步只是剛剛開始可以執行一個demo,實際上我們並沒有必要去新增刪除一個 平臺程式碼,首先我們知道
$ weex platform add ios
這個命令它做了哪些工作,我們手動做一下就完成了

實際上
weex init awesome-project 這個命令完成以後 ,我們就建立了一個基於node 的一個weex 的前端的專案,這個專案的目的是把那些 vue 檔案編譯成js,可以參考前面文章,將裡面的程式碼編譯一下之後(npm run dev) 發現在 dist 檔案裡面就生成了兩個對應的js,一個 index.web.js 一個index.weex.js 這兩個js 一個是給網頁端使用的,一個是給app使用的

那麼到這裡,也可以使用 playground 來掃碼獲取那個js看到效果了,具體參考weex的第二篇部落格,那麼很多朋友說希望能看到真正的專案裡面來展示這個 js,而不是在playground 裡面

那麼此處你需要分別搭建一下你的開發環境,開發環境搭建好之後配置weex 包,其實做過原生開發的朋友來說,很簡單,但是沒有做過的朋友會很迷茫,但是這個是都需要花一些時間去了解學習的

這兩個整合好之後,我們去使用這個 js,放到我們的專案中去執行,就ok了,這時候就能看到了效果