成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Weex系列(1) ——Hello World項目

xiaowugui666 / 3509人閱讀

摘要：由于最開始沒有一點點原生開發(fā)的經(jīng)驗，所以我就直接用的腳手架初始化項目。那下面我們就從最最原始的項目開始吧，序篇太枯燥，自由發(fā)揮時間開始啦。執(zhí)行如下代碼，最后會得到如圖的項目結(jié)構(gòu)。入口文件等簡析進行了初始化。

目錄

Weex系列(序) —— 總要知道原生的一點東東(iOS)

Weex系列(序) —— 總要知道原生的一點東東(Android)

Weex系列(1) —— Hello World項目

Weex系列(2) —— 頁面跳轉(zhuǎn)和通信

Weex系列(3) —— 單頁面還是多頁面

[Weex系列(4) —— 老生常談的三端統(tǒng)一]

[Weex系列(5) —— 封裝原生組件和模塊]

[Weex系列(6) —— css相關(guān)小結(jié)]

[Weex系列(7) —— web組件和webview]

[Weex系列(8) —— 是時候簡析一下流程原理了]

[Weex系列(9) —— 踩坑填坑的集錦]

[Weex系列(10) —— 先這么多吧想到再寫。。。]

由于最開始沒有一點點原生開發(fā)的經(jīng)驗，所以我就直接用的腳手架初始化項目。那下面我們就從最最原始的Hello World項目開始吧，序篇太枯燥，自由發(fā)揮時間開始啦。

weex-toolkit

執(zhí)行如下代碼，最后會得到如圖的項目結(jié)構(gòu)。

有的同學會繼續(xù)用官網(wǎng)的weex run ios或者android開始運行項目，大多數(shù)人應(yīng)該都運行不起來，我就是這大多數(shù)人，我是直接用原生工具運行對應(yīng)App的，如iOS，直接用xcode打開WeexDemo.xcworkspace這個文件。(這里還有一個點，如下代碼最后需要pod install下，安裝weex sdk等包)

接下來就可以愉快的開發(fā)代碼了，調(diào)試就該登場了，那就下一個點吧。

npm install -g weex-toolkit
weex create helloworld
cd helloworld
weex platform add ios
weex platform add android

cd platforms/ios
pod install

Weex Playground

接上面最后一個點，輸入如下代碼，就會看到瀏覽器自動打開一個網(wǎng)址，然后下載標題上的這個App掃描二維碼就可以進行調(diào)試了

weex debug src/index.vue

bundlejs

第一個命令就是把src目錄下我們寫的代碼打包到dist目錄下，會對應(yīng)生成xxx.js和xxx.web.js，xxx.js是原生所要用到的js，xxx.web.js是給web端用的，這就是三端統(tǒng)一的第一步。

后面兩個命令其實就是打包同時把打包后的代碼放到截圖對應(yīng)的原生目錄下，這兩個命令比較慢，我通常都是用終端的復制文件夾的功能直接復制代碼到對應(yīng)目錄下。

weex build web
weex build ios
weex build android

bundlejs的路徑問題

還是把這個多帶帶拿出來講一下吧，網(wǎng)上有好多版本的一統(tǒng)三端的js路徑等，其實總結(jié)起來就是：
iOS：能拿到weex.config.bundleUrl(我這邊是file:///var/containers/Bundle/Application/4D5A8D6F-2824-4603-936B-B77418600858/WeexDemo.app/bundlejs/index.js)能取到上面截圖bundlejs目錄地址，再做相對處理即可。
Android：weex.config.bundleUrl拿到的地址形式不統(tǒng)一，最后就是寫死的file://assets/dist
web：weex run web的時候瀏覽器會自動打開一個地址，可以研究這個地址再做一下調(diào)整。
后續(xù)章節(jié)可以把這個方法提供給大家參考。

iOS入口文件等簡析

AppDelegate.m執(zhí)行了初始化weex環(huán)境的方法，這個方法里面還可以注冊我們封裝的模塊和組件，weex腳手架初始化的項目還提供了啟動頁的方法，我們可以稍作修改換成我們自己的動畫。

WeexSDKManager就是官網(wǎng)上的初始化weex環(huán)境的步驟。

WXDemoViewController加載了我們上面提到的打包后的js。

[WXSDKEngine registerModule:@"xxx" withClass:[xxx class]];
[WXSDKEngine registerComponent:@"xxx" withClass:[xxx class]];

Android入口文件等簡析

WXApplication進行了初始化。

AbsWeexActivity封裝了渲染加載js的方法，在WXPageActivity可以看到有調(diào)用createWeexInstance和renderPageByURL得方法。

Hello World就先講這么多吧，第一次寫系列文章，終于把開頭三章搞定了，如果大家對我的專欄有一點點興趣，就請點個贊哦，歡迎收藏繼續(xù)關(guān)注，謝謝。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99074.html

相關(guān)文章

  • WEEX系列 環(huán)境搭建

    摘要：系列文章之環(huán)境搭建和一步一起從前端視角聊一聊如果你只想試試的語法寫個啥的，在線編輯器上玩玩就夠了。如果你想更深入的學習，顯然是需要搭建本地開發(fā)環(huán)境的。腳手架讓我們更專注于業(yè)務(wù)代碼，節(jié)約開發(fā)環(huán)境構(gòu)建成本，提供一定的靈活。 WEEX系列文章之環(huán)境搭建 和一步一起從前端視角聊一聊WEEX 如果你只想試試 weex 的語法寫個 hello world 啥的， 在dotWe線編輯器上玩玩就夠了。...

    teren 評論0 收藏0

  • Weex系列(4) —— 老生常談的三端統(tǒng)一

    摘要：剛看到這仨頁面的時候，我就想著可以用路由，做成三端統(tǒng)一。樣式這部分真的三端基本是高度統(tǒng)一的，部分微調(diào)一下就可以了，也正是這樣，我們后續(xù)才能迅速解決和。終于不是談?wù)勅私y(tǒng)一了，也是真的體驗了一次，雖然最后有點出入，但是下次基本是沒問題了。 目錄 Weex系列(序) —— 總要知道原生的一點東東(iOS) Weex系列(序) —— 總要知道原生的一點東東(Android) Weex系列(...

    wzyplus 評論0 收藏0

  • Weex系列(7) ——踩坑填坑的總總

    摘要：的方法在安卓底下會崩潰，結(jié)果竟然是要在里面設(shè)置正確的，因為我是用官網(wǎng)的腳手架搭起來的項目，不知道大家會不會遇到，改一下就可以解決問題了。 目錄 Weex系列(序) —— 總要知道原生的一點東東(iOS) Weex系列(序) —— 總要知道原生的一點東東(Android) Weex系列(1) —— Hello World項目 Weex系列(2) —— 頁面跳轉(zhuǎn)和通信 Weex系列(3)...

    toddmark 評論0 收藏0

  • Weex系列(7) ——踩坑填坑的總總

    摘要：的方法在安卓底下會崩潰，結(jié)果竟然是要在里面設(shè)置正確的，因為我是用官網(wǎng)的腳手架搭起來的項目，不知道大家會不會遇到，改一下就可以解決問題了。 目錄 Weex系列(序) —— 總要知道原生的一點東東(iOS) Weex系列(序) —— 總要知道原生的一點東東(Android) Weex系列(1) —— Hello World項目 Weex系列(2) —— 頁面跳轉(zhuǎn)和通信 Weex系列(3)...

    phpmatt 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<