接口來自知乎日報 API 分析
一、 構建工具
weexpack 命令介紹
weexpack 所提供的命令大致可分為三組,分別是:
- 打包命令
weexpack create — 創建 weex 工程項目。
weexpack platform add/remove — 安裝/移除 weex 應用模版,默認模版支持 weex bundle 調試和插件機制。
weexpack platform list — 查看已安裝的平臺模版及版本。
weexpack platform run - 打包應用并安裝到設備運行。- 插件使用者命令
weexpack plugin add/remove — 安裝/移除 weex 插件。- 插件開發者命令
weexpack plugin create - 生成weex插件模版,主要是配置文件和必需的目錄。
weexpack plugin publish - 發布插件到weex插件市場。
??使用weexpack構建的項目要注意一點:
在Android 機器上不支持 ES6語法,雖然項目構建的時候已經集成了 bable 的 NPM包來將ES6轉換成ES5的語法。但是還需要在項目的根目錄手動添加.babelrc
文件,文件里的具體代碼如下:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
?為什么沒有用weex-toolkit
weex-toolkit 初始化的項目是針對開發單個 Weex 頁面而設計的,也就是說這樣的項目只包括單個頁面開發需要的東西,比如前端頁面源文件、webpack 配置、npm 腳本等。項目產生的輸出就是一個 JS Bundle 文件,可以自由的進行部署。
weex-pack 是初始化一個完整的 App 工程,包括 Android 和 iOS 的整個 App 起步,前端頁面只是其中的一部分。這樣的項目最終產出是一個 Android App 和一個 iOS App。
如果你不用weexpack來打包的話,weex-toolkit可以替代weexpack來構建應用。weex-toolkit集成對weexpack的命令調用支持,你可以使用weex-toolkit命令來實現weexpack具備的功能。
二、項目效果
只寫了一個雛形,本來準備把詳情頁面也寫一下的,發現詳情接口的網頁數據是 json 格式返回的 HTML 源碼,而 weex 封裝的 web 組件并沒有暴露Native的loadHTML
API,就沒寫了。
源碼:https://github.com/yuan-gao/zhihuDaily-Weex
//安裝依賴
npm installl
//運行 iOS
weex run ios
//運行 Android
weex run android
Web 端因為 js 跨域問題,run
的時候應該看不到效果。
三、結語
要完全使用weex 來完成一個項目(Android+iOS+Web),write once run everywhere幾乎不可能,除非項目的邏輯和交互都非常簡單。因為使用weex的功能有限,稍微復雜一點的需求就需要和 Native 端交互,雖說weex團隊提供了Module 擴展,但是使用Module 擴展的前提是開發人員至少具備開發完整 Native 端應用的能力。
?對大廠來說,可以不在乎開發人員的成本,追求產品快速迭代,將整個項目的 jsBundle 部署在服務器。
?對初創公司來說,請一個即能開發 Android和 iOS 端 Native 應用的開發人員來開發 Weex 應用,所花的成本估計也并不比養兩個開發 Android 和 iOS 的人員低,而且這種人也難找。
?對開發人員來說,可以不用學習Native端知識就能開發一個跨平臺的 APP,非常棒。
?從產品的角度來說,既想頻繁變更需求,又想要原生的體驗,部分頁面使用 Weex 是個不錯的選擇。
最后安利一個非常棒的 weex插件庫:Nat.js