圈子金融的weex領悟 weex start

2021-07-26 15:26:35 字數 1785 閱讀 1794

說說weex吧,是個好東西,但上手難,如此沒有原生基礎,建議還是別玩,因為很它只提供了頁面渲染和擴充套件的能力,大部分模組還是要用原生擴充套件來實現,比如硬體互動。

好,開始吧!

首先是node.js,我也是初次使用,以前前端還是jquery為王,一直不明白要node.js幹嘛,現在終於有領悟。沒基礎的自己去補充。

node.js裝完後自帶有管理包npm,我們裝其它元件就通過npm install命令,無奈這些軟體倉庫是在國外,安裝起來非常慢,這裡建議使用**映象,完後使用cnpm來替代npm。

接下來就是安裝webpack和weex-loader,webpack是比較出名的打包工具了,能裝依賴的東西打包在乙個檔案,weex-loader是weex用webpack的打包外掛程式(可以這麼理解)

cnpm install -g webpack weex-loader安裝到全域性

接然後再安裝個weex的工具箱weex-toolkit,這裡面包括執行環境,除錯等命令,最好裝全域性。

cnpm install -g weex-toolkit

完成上面,整個weex環境算是搭建起來了,接下來我們需要建立個工程,執行

cnpm init -y

按提示,一路確定下去,好了之後會生成package.json

建立打包配置檔案:webpack.config.js,複製如下內容

var path = require('path');

var fs = require('fs');

var entry = {};

function

walk

(dir) else

if (stat.isdirectory() && file !== 'dist' && file !== 'include')

});}walk();

module.exports=,

module: ]

}}

以上的意思就是將weex_qqzi_src下面的we檔案,生成到weex_dist,當然也可以修改為其它名字,比如src目錄生成到dist

建立個we檔案測試一下,比如hello.we

hellotext>

div>

template>執行npm run dev,如果有錯誤看下是哪個元件沒裝,安裝一下就好,比如weex-components。執行後在weex_dist目錄下面會生成hello.js,如果還是有一堆紅的,比如babel-***的,試試再裝weex-toolkit裝本地(這裡我也沒弄明白,為什麼全域性的會不行)

cnpm install weex-toolkit weex-loader

用瀏覽器看下效果

npm run serve

如果報錯,需要安裝一下serve和weex-html5

cnpm install -g serve

copy node_modules/weex-html5/index.html到工作目錄下,修改裡面的weex.js引用路徑和page的值(入口檔案,預設是』demo/build/index.js』,修改為weex_dist/hello.js)

這時候會在8080埠監聽,需要手動開啟瀏覽器檢視

也可以直接修改位址列的xx.js為其它we生成的js檔案。

Weex開發實踐(一)嵌入Weex到你的iOS工程

假設你已經搭建好了weex開發環境,安裝了weex tools。在terminal執行 weex create awesome project執行完命令後,在 awesome project 目錄中就建立了乙個使用 weex 和 vue 的模板專案。然後執行 weex platform add io...

weex的使用初體驗

首先是weex的環境搭建,weex的環境搭建網上資料很多,但是還有乙個weexpack系統打包工具,可以直接將we檔案,生成apk來跑在手機上 這裡推薦用weex編譯單獨的檔案,可以在瀏覽器中,實現一次跑起來,便能修改一下we檔案,就能直接在瀏覽器中看到效果 在android機器上跑程式則可以直接使...

weex初始的坎坷之路

年前,老大就交代年後要把某個頁面weex實現,當時不了解weex,連名字都叫不出來,問了度娘,才知道跟react native類似的三端開發,春節回來就開始學,入門很坎坷,因為他是以vue為模板引擎,我沒學過vue,當時會react,之前也用過handlebars,兩個差不多,大概花了乙個上午看了下...