寫(xiě)在前面
雖然標(biāo)題叫做從零開(kāi)始逞带,不過(guò)顯然weex不是一門可以從零開(kāi)始的技術(shù),本文旨在記錄個(gè)人在學(xué)習(xí)weex過(guò)程中的一些經(jīng)歷惨远。
作為一個(gè)移動(dòng)端開(kāi)發(fā)者躯枢,native開(kāi)發(fā)進(jìn)行到一定階段的時(shí)候,你或多或少都會(huì)關(guān)注到web app的相關(guān)技術(shù)司忱,然后感受著Learn once, write anywhere or Write Once Run Everywhere的感召(威脅皇忿?)去這個(gè)未知的神秘世界一探究竟。
WEEX 是阿里推送的一款基于Node.js,輕量級(jí)的移動(dòng)端跨平臺(tái)動(dòng)態(tài)性技術(shù)解決方案,用于構(gòu)建原生的跨平臺(tái)APP.
weex環(huán)境搭建
需要的環(huán)境包括:
1.node.js(建議4.0以上)
2.npm
npm 是一個(gè) JavaScript 包管理工具坦仍,它可以讓開(kāi)發(fā)者輕松共享和重用代碼鳍烁。Weex 很多依賴來(lái)自社區(qū),同樣繁扎,Weex 也將很多工具發(fā)布到社區(qū)方便開(kāi)發(fā)者使用幔荒。
3.weex-toolkit(WEEX工具包)
node.js安裝
首先下載安裝Node.js
全程下一步就可以了
安裝完成,cmd輸入
node -v
v 版本號(hào)
npm -v
v 版本號(hào)
成功,下一步
weex-toolkit安裝
用npm來(lái)下載安裝weex-toolkit,cmd輸入
npm install -g weex-toolkit
默認(rèn)的npm默認(rèn)的是https://registry.npmjs.org/這個(gè)源梳玫,下載的非常慢建議直接
npm config set registry https://registry.npm.taobao.org
npm install -g weex-toolkit
安裝完畢后
weex -v
v 版本號(hào)
ok爹梁,至此weex的基本開(kāi)發(fā)環(huán)境已經(jīng)配置完成。下面我們就開(kāi)始我們的第一個(gè)程序提澎。
第一個(gè)weex
先在本地目錄下新建一個(gè)app目錄卫键,F(xiàn):\weextest,然后cmd進(jìn)入這個(gè)路徑后
項(xiàng)目初始化
weex init
依賴安裝
npm install
安裝完成后就會(huì)看到整個(gè)目錄下的文件結(jié)構(gòu)如下:
file structure
src/: all source code
build/: some build scripts
dist/: where places generated code
dist/assets/: some assets for Web preview
dist/index.html: a page with Web preview and qrcode of Weex js bundle
dist/preview.html: Web render
.babelrc: babel config (preset-env by default)
.eslintrc: eslint config (standard by default)
在根目錄下的package.json 中可以看到
"scripts": {
"start": "node build/dev-server.js",
"build": "node build/build.js",
"serve": "npm run build && serve -p 8080",
"debug": "weex-devtool"
}
build: 源碼打包虱朵,生成 JS Bundle
serve: 開(kāi)啟靜態(tài)服務(wù)器
debug: 調(diào)試模式
接下來(lái)我們?cè)囈幌聅erve模式
npm run serve
運(yùn)行完成之后,在瀏覽器輸入
http://localhost:8080/
大功告成莉炉!
參考
http://m.blog.csdn.net/ufocode/article/details/75171290
http://blog.csdn.net/hytfly/article/details/65680295