您當前位置：首頁 > php開源 > 綜合技術 > [置頂] Weex開發筆記

[置頂] Weex開發筆記

來源：程序員人生發布時間：2016-07-04 08:25:26 閱讀次數：2825次

關于weex的環境安裝，前面已介紹了，并且順利運行android版官方demo，亮點10足，繼續關注。本文介紹weex for ios的相干內容，和遇到的坑。
weex倉庫：https://github.com/alibaba/weex。
這里寫圖片描述

1，運行IOS playground

阿里巴巴官方說明：

Prerequisites
Install Node.js 4.0+
Under project root
npm install, install project
./start
Install iOS Environment
Install CocoaPods
Run playground
cd ios/playground
pod install
Open WeexDemo.xcworkspace in Xcode
Click (Run button) or use default hot key cmd + r in xcode
If you want to run demo on your device. In DemoDefine.h(you can search this file by Xcode default hot key cmd+space+o), modify CURRENT_IP to your local IP

但是依照這個步驟來，編譯報錯。多是路徑不對，總是報各種路徑找不到的毛病。然后我就這樣改：
將weex項目中ios目錄下的sdk放入playground根目錄，然后Podfile改成以下：

source 'https://github.com/CocoaPods/Specs.git'
target 'WeexDemo' do
    platform :ios, '7.0' 
    pod 'SDWebImage', '3.7.5'
    pod 'SocketRocket', '0.4.2'
    pod 'ATSDK-Weex', '0.0.1'
    pod 'WeexSDK', :path=>'./sdk/'   
end

點開WeexDemo.xcworkspace，編譯的時候又提示缺少兩張圖片，我加了同名的png圖片，然后可以順利編譯通過。
看看多好看，還帶了性能，調試工具
UI不錯噢。使用起來各種流暢哇。

2，各種命令行操作，shell腳本

weex根目錄下面有個打包的腳本文件：package.json，終端使用者和開發者，可以通過命令行使用腳本。
for end-user

1,清算examples/build and test/build 文件夾 *.js ：

npm run clean

2,創建.we file文件

//run npm run create -- -h for help
npm run create -- [name] -o [directory]

3,編譯.we文件為js

transform *.we in examples and test folders

npm run transform

4,運行npm run clean && npm run transform

npm run dev

5,開啟服務：run a file server at 12580 port

這個方便在PC閱讀器里面打開頁面看效果。也能夠自定義端口。

npm run serve

6,監測.we文件改動，自動更新

run a watcher for *.we changed ，1旦文件變動，就回自動渲染。

npm run watch

For SDK Developer

1,we文件渲染轉換 js-framework and h5-render

npm run build

2,使用 js-framework and h5-render 運行test目錄

npm run ci

3,拷貝編譯后的js文件到playgroud工程

（assets文件夾，方便調用）

npm run copy

3，weex相干技能

weex項目根目錄下面的index.html，在pc閱讀器渲染不出來。也改成weed-loader-demo的渲染方式就能夠。

<!-- jsframework -->
<script src="./src/js-framework/dist/index.js"></script>
<!-- h5render 
<script src="http://www.jyygyx.com/upload/caiji/20160629/./src/h5-render/dist/index.js"></script>  此處注釋掉，改成下面的代碼，然后 npm run serve,就能夠pc閱讀器訪問samples里面的頁面了。-->
 <script src="./node_modules/weex-html5/dist/weex.js"></script>

閱讀器訪問的頁面地址：http://192.168.100.47:12580/index.html?page=./examples/build/index.js，192.168.100.47替換成自己本機ip便可。weex for h5如圖：

4，可安裝淘寶的NPM鏡像

如果安裝node，weex工具包使用npm比較慢的話。可以用淘寶的鏡像。這是1個完全 npmjs.org 鏡像，你可以用此代替官方版本，同步頻率目前為 10分鐘 1次以保證盡可能與官方服務同步。
當前 registry.npm.taobao.org 是從 r.cnpmjs.org 進行全量同步的.
當前 npm.taobao.org 運行版本是: cnpmjs.org@
本系統運行在 Node.js@ 上.
開源鏡像: http://npm.taobao.org/mirrors
Node.js 鏡像: http://npm.taobao.org/mirrors/node
alinode 鏡像: http://npm.taobao.org/mirrors/alinode
phantomjs 鏡像: http://npm.taobao.org/mirrors/phantomjs
ChromeDriver 鏡像: http://npm.taobao.org/mirrors/chromedriver
OperaDriver 鏡像: http://npm.taobao.org/mirrors/operadriver
Selenium 鏡像: http://npm.taobao.org/mirrors/selenium
Node.js 文檔鏡像: http://npm.taobao.org/mirrors/node/latest/docs/api/index.html
NPM 鏡像: https://npm.taobao.org/mirrors/npm/
electron 鏡像: https://npm.taobao.org/mirrors/electron/
node-inspector 鏡像: https://npm.taobao.org/mirrors/node-inspector/

install e.g 舉例參考：

cd /Users/duqian/AndroidStudioProjects/Weex/weex-loader-demo 
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm init -y
cnpm install --save-dev webpack weex-loader
cnpm install --save-dev weex-scripter@^0.1.4 weex-styler@^0.0.17 weex-templater@^0.2.1
cnpm install --save-dev webpack weex-loader
cnpm install --save-dev serve weex-html5

5，weex demo

weex-loader-demo，weex團隊大神阿里－鬼道錄制了視頻，這個demo簡單，拿來學習還是可以的，自行github。可以了解1些安裝，打包的進程，和weex如何加載第3方庫，比如彈toast。
weex-loader-demo視頻
另外，還有weexOne，百度大神dodola兩天寫出來的作品，主要是TabBar和網絡要求操作，親測，有bug，不是很完善。
后期我也寫1個weex demo，順便參加workshop大賽。