iOS 混合開發 —— weex

官網介紹文檔：http://weex.apache.org/cn/guide/integrate-to-your-app.html

官網cocoapods/手動 集成文檔：https://open.taobao.com/doc2/detail?spm=a219a.7629140.0.0.tFddsV&&docType=1&articleId=104829

注：有任何不同，請依照官網為准，在此深深感謝阿里程序員大牛不辭辛苦， 做好開源工作，致敬。。

   （吐槽下，weex的學習文檔真是不太友好，作為iOS開發者，感覺weex文檔很多地方介紹流程不夠好，唉...）

 

前言：

　　自從Weex出生的那一天起，就無法擺脫和React Native相互比較的命運。React Native宣稱“Learn once, write anywhere”，而Weex宣稱“Write Once, Run Everywhere”。Weex從出生那天起，就被給予了一統三端的厚望。React Native可以支持iOS、Android，而Weex可以支持iOS、Android、HTML5。

　　在Native端，兩者的最大的區別可能就是在對JSBundle是否分包。React Native官方只允許將React Native基礎JS庫和業務JS一起打成一個JS bundle，沒有提供分包的功能，所以如果想節約流量就必須制作分包打包工具。而Weex默認打的JS bundle只包含業務JS代碼，體積小很多，基礎JS庫包含在Weex SDK中，這一點Weex與Facebook的React Native和微軟的Cordova相比，Weex更加輕量，體積小巧。在JS端，Weex又被人稱為Vue Native，所以 React Native 和 Weex 的區別就在 React 和 Vue 兩者上了。

 

我是做iOS開發的，在學習weex的時候更多的使用工具 sublime Text 來編寫 .we 。 下載和配置參考這個博客 (http://www.cnblogs.com/saytome/p/7274724.html)。

 

 

介紹：

官方腳手架全家桶： weex-toolkit 、 weexpack 、 playground 、 code snippets 、 weex-devtool 。

• weex-toolkit： 是用來初始化項目，編譯，運行，debug所有工具。
• weexpack是用來打包JSBundle的，實際也是對Webpack的封裝。
• playground是一個上架的App，這個可以用來通過掃碼實時在手機上顯示出實際的頁面。
• code snippets這個是一個在線的playground。
• weex-devtool 開發調試神器

 

一、【踩坑】搭建開發環境 初始化一個Demo

官方文檔:  http://weex.apache.org/cn/guide/set-up-env.html

該篇中官方告訴我們環境搭建好了，在終端輸入命令：   weex init awesome-project     就建好工程了。 然而我創建好了以后，看不到任何iOS的工程，一臉懵逼啊....

 

 

 

 

二、【踩坑】集成weex 到已有的應用

官方文檔:  http://weex.apache.org/cn/guide/integrate-to-your-app.html

官方說的很詳細，我把自己寫到 .we 轉成 js 放入工程然后，編譯運行沒問題了，但是我在開發的時候總不能，不停的把新開發的模塊 轉成 js 再去加載吧。還是不對啊... 

 

 

 

三、【踩坑】weex-toolkit 對 weexpack 的水平擴展中 添加iOS應用

官方文檔:  http://weex.apache.org/cn/guide/tools/toolkit.html  在最下面

官方說終端輸入命令：  weex platform add ios  就會添加iOS平台的一個工程， 照做以后 platform 文件里面真的有了，但是工程里面，已經寫了很多亂糟糟的東西，像是添加過來了一個官方大的demo，WTF !!!

 

 

 

四、正確的開發流程其實是這樣滴

入門流程： https://yq.aliyun.com/articles/57554#2

遠程調試js:  http://www.jianshu.com/p/4dc17d8f7c83

 

#、 學習weex的學習資源了

 

【官方的】：

 

教程文檔    http://weex-project.io/cn/guide/

 

 

手冊文檔    http://weex-project.io/cn/references/

weex社區： http://weex.help

 

weex官網：  http://alibaba.github.io/weex/download.html

 

weex的中文文檔： http://www.shouce.ren/api/view/a/11586

weex學習的網址： https://github.com/alibaba/weex

 

weex調試工具 weex-devtool：  https://github.com/weexteam/weex-devtool

weex命令行工具 weex-toolkit ： https://github.com/weexteam/weex-toolkit

 

weex SDK集成到工程(Integrate to Android) ：   https://github.com/weexteam/article/issues/25

weex創建項目--工程構建--官方示例文件解析： https://github.com/vczero/weex-learning

 

【非官方的】：

有圖的：https://vczero.github.io/weex-learning/android/003_HelloWorldBuildInWeex.html

入坑記:  https://zhuanlan.zhihu.com/ElemeFE?topic=Weex

理解和介紹：http://www.cocoachina.com/ios/20170601/19404.html