摘要:系列文章之環(huán)境搭建和一步一起從前端視角聊一聊如果你只想試試的語法寫個啥的,在線編輯器上玩玩就夠了。如果你想更深入的學(xué)習(xí),顯然是需要搭建本地開發(fā)環(huán)境的。腳手架讓我們更專注于業(yè)務(wù)代碼,節(jié)約開發(fā)環(huán)境構(gòu)建成本,提供一定的靈活。
WEEX系列文章之環(huán)境搭建
和一步一起從前端視角聊一聊WEEX
如果你只想試試 weex 的語法寫個 hello world 啥的, 在dotWe線編輯器上玩玩就夠了。如果你想更深入的學(xué)習(xí), 顯然是需要搭建本地開發(fā)環(huán)境的。
本小結(jié)內(nèi)容:安裝官方腳手架weex-toolkit、下載Weex Playground、解決瀏覽器跨域問題。
腳手架讓我們更專注于業(yè)務(wù)代碼,節(jié)約開發(fā)環(huán)境構(gòu)建成本,提供一定的靈活。同時呢,在能力沒達(dá)到一定的水平時候,不建議去亂搞這些東西。但,像webpack這種工具還是需要學(xué)習(xí)和掌握的。 weex-toolkit對于weex,就相當(dāng)于create-react-app對react,vue-cli對于vue的地位。
安裝 weex-toolkit 的前置條件是安裝node > 6。執(zhí)行npm install -g weex-toolkit有好多網(wǎng)友不推薦大家使用 cnpm 安裝說是有坑,大家視情況而定
順利的話,使用weex -v檢測安裝是否成功。
創(chuàng)建一個 weex 項目weex create weex-demo
npm install
一切順利的話,再執(zhí)行 npm start 看看效果。
如果你已經(jīng)看到了 hello world,那么恭喜你,你已經(jīng)掌握了weex 50%的知識。
Weex Playground既然學(xué)習(xí)的是原生開發(fā),我們怎能甘心只在瀏覽器上看效果,但是身為一個 FE 又不太會搞 Android Studio 和 Xcode這些原生的東西,weex 工程師足夠給力為我們提供了Playground下載應(yīng)用然后掃一掃屏幕上的二維碼,就是真的原生應(yīng)用了。這個 playground的原理,可以回顧一下上篇文章中weex原理圖。只不過是咱們個人開發(fā)機(jī)在充當(dāng) Server 的角色而已。
使用playground條件 手機(jī)和開發(fā)機(jī)處于同一網(wǎng)段?
一個完整的項目怎能少了網(wǎng)絡(luò)請求。在瀏覽器上調(diào)試的時候,很可能會遇到跨域的問題,前端可以通過 webpack-dev-server轉(zhuǎn)發(fā)一下請求,后端服務(wù)是不會出現(xiàn)跨域屏蔽的,跨域只是瀏覽器的一種保護(hù)機(jī)制,但是感覺還是有些麻煩,既然是瀏覽器限制,只要打破限制就可以了。在這里推薦大家使用chrome插件Allow-Control-Allow-Origin: *
準(zhǔn)備好上述三個環(huán)境后,我們就可以正式進(jìn)入 weex 的學(xué)習(xí)之旅了。
我的第一個weex demo
歡迎大家指正批評、或留言。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/89869.html
摘要:通過使用有限的類標(biāo)簽閹割的及基于語法來快速構(gòu)建原生應(yīng)用。高性能本身對加載時間和資源占用進(jìn)行了優(yōu)化。站在巨人的肩膀上,我們也很容易開發(fā)出高性能的。我們可以把部署到服務(wù)器上實現(xiàn)熱更新。引擎運行這些實現(xiàn)與線程通信,達(dá)到和原生應(yīng)用相同的體驗效果。 和一步一起從前端視角聊一聊WEEX WEEX是一套構(gòu)建高性能、可擴(kuò)展的原生應(yīng)用跨平臺解決方案。就一個字吊。 通過使用有限的類HTML標(biāo)簽、閹割的CS...
摘要:有興趣的兄臺可以了解一下來正題,什么是這里有簡介阿里巴巴開發(fā)團(tuán)隊在的成功案例上,重新設(shè)計出的一套開發(fā)模式,站在了巨人肩膀上并有淘寶團(tuán)隊項目做養(yǎng)料,廣受關(guān)注,年月正式開源,并在版本官方支持,與分庭抗禮。首先安裝好的開發(fā)環(huán)境。 搞了幾個月的Vuejs,也是時候開始搞搞基于Vuejs語法的Weex App了。 這里做個廣告,最近用vuejs開發(fā)了一個小系統(tǒng)(前后端分離),架構(gòu)有參考Oracl...
摘要:要想用好必須對基礎(chǔ),體系,打包工具有較深的了解對,有了解。官方提供的腳手架不能指定入口文件,如果我們想要在項目中使用,沒有入口文件將會變得比較復(fù)雜。那么,我們應(yīng)該如何使得當(dāng)前項目具有入口文件呢答案是只能修改文件。 寫在前面的話: 注意!該文檔是2017年年底的文章,那個時候weex還有很多問題,現(xiàn)在weex已經(jīng)全面更新,文檔也比較全。下面的講解可能不太適應(yīng)新的weex框架,后面我會再立...
閱讀 2031·2021-08-21 14:09
閱讀 496·2019-08-30 15:44
閱讀 2122·2019-08-29 16:32
閱讀 1383·2019-08-29 15:36
閱讀 3451·2019-08-29 12:43
閱讀 2789·2019-08-29 11:14
閱讀 440·2019-08-28 18:26
閱讀 2261·2019-08-26 13:57