簡介
阿里新出的weex，我一個做android的也過來湊個熱鬧，自己做了一個簡單的demo恬涧，是一個知乎新聞+日記的APP，功能比較簡單碴巾，代碼也是最基本的寫法和用法溯捆，初學weex的童鞋們可以參考使用學習一下。
一些童鞋在學習餐抢、調(diào)試weex的時候非常頭疼现使，每次修改完代碼之后低匙，要么掃一下二維碼旷痕，要么手動刷新一下，很耽誤時間顽冶。這個demo實現(xiàn)了hot reload欺抗，即修改代碼，保存后强重，app端可以直接看到效果绞呈。
大概原理，需要啟動hot reload端口间景，即weex xxx.we命令佃声，這個服務啟動以后，java添加websocket監(jiān)聽命令倘要，就可以監(jiān)聽到we文件的改變圾亏。文件改變的時候，重新render你已經(jīng)開啟的12580端口服務封拧，就是你js打包上傳到的服務志鹃，這樣，就可以實現(xiàn)實時刷新的功能泽西。
使用方法
1曹铃、項目地址
2、配置環(huán)境
這個大家可以從weex官網(wǎng)去看捧杉。weex官網(wǎng)
3陕见、運行項目
首先需要：
npm install
裝好node_modules之后秘血，第一次命令如下：
npm run build
然后用studio打開playground代碼，把MainActivity.java中的代碼
@Override
protected String getHost() {
return "10.12.65.114";
}
中的return的string修改成你pc的ip就可以了评甜。
把MainActivity.java中的代碼
@Override
protected String setHotRefreshUrl() {
return "main";
}
中return的string修改成你要調(diào)試的we文件的名字就可以了直撤。
啟動watch服務以及debug服務命令如下：
npm run dev
最新增加hot reload功能，修改完代碼后蜕着，可以在android上直接看到效果谋竖。
打開命令行，進入目錄src下承匣，執(zhí)行（weex后面增加的是你要調(diào)試的文件名蓖乘，如果你修改了文件名，只要把下面對應的文件名修改一下就可以了）
weex main.js --qr
- 使用android studio打開playground韧骗，運行app嘉抒，修改代碼，就可以直接看到效果了袍暴。
- 如果更改代碼沒有效果些侍，點一下app右上角的刷新按鈕，也可以立即看到效果政模。
遇到的坑
下面這些問題就是我在做weextwo的時候遇到的問題岗宣。
1、運行調(diào)試
我這里使用的方法其實就是講生成的js文件放到android中運行的淋样，當然weex是支持類似RN那樣耗式，pc作為服務器將生成的bundle分發(fā)到真機上，只要修改代碼趁猴，真機就可以立即看到結(jié)果刊咳。
不過weex文檔有點亂，所以相關東西還沒開始寫儡司，大家可以去探究探究娱挨。
2、網(wǎng)絡請求
網(wǎng)絡請求返回的數(shù)據(jù)格式問題捕犬，這個主要是要會weex debug跷坝，對js加斷點，調(diào)試或听，還要主要method和created探孝、ready是兩個范圍的函數(shù)（切忌不要把created方法寫到method中），method是你自己要定義的方法誉裆，created和ready是weex自帶的聲明周期方法顿颅。
因為weex還沒有很好的開發(fā)工具，所以我暫時用的webstorm足丢，但是webstorm無法自動化we的格式粱腻，所以我當時在寫第一個界面的時候就卡住了庇配，一直沒有進行我created中的方法，后面才發(fā)現(xiàn)绍些，原來自己把created寫到method中去了捞慌，大家一定要注意了。
3柬批、list的坑
list的每個item點擊傳入一個id的時候啸澡，通過var itemid = e.target.attr.newsid來獲取組件中newsid參數(shù)值，這種方式遇到一個非常非常奇葩的坑氮帐。就是如果這個組件是你自己定義的話嗅虏，沒法獲取到，必須是要原生的組件才能獲取的到上沐，具體原因還未查明皮服。
4、文檔錯誤
1）webview和imageview的時候参咙，src前面還有一個:龄广，怪不得我開始一直檢查不到問題，還有目前webview好像還不支持顯示html的功能蕴侧。
2）textarea和input中需要監(jiān)控change和input的時候择同，input的寫法是
oninput=“onTextAreaChange”，并不是文檔中那種寫法戈盈，試過奠衔，不行。
5塘娶、this的作用范圍
this的范圍不包括回調(diào)函數(shù)，所以如果要在回調(diào)函數(shù)中改變data中的數(shù)據(jù)痊夭，我們需要在函數(shù)中聲明一個局部變量刁岸，使self=this，這個self的作用范圍就在回調(diào)函數(shù)中她我。
6虹曙、storage問題
因為你存儲或者獲取的時候都是在回調(diào)函數(shù)中獲取的，這是一個異步的過程番舆，所以你不能在執(zhí)行完一個函數(shù)之后酝碳，直接在下面的過程中，使用回調(diào)得到的結(jié)果恨狈，這個時候回調(diào)的結(jié)果可能還沒拿到疏哗，所以下面的過程都要放到回調(diào)函數(shù)中去。這個地方坑了我老半天禾怠。
需要解決的問題
- 日記保存后并沒有立馬生效返奉，需要點擊退出之后重新進app才能生效贝搁，因為weex的生命周期沒有像android onresume生命周期，所以我暫時還沒修改芽偏。
- 長按刪除雷逆，也是沒有立馬生效，同上原因污尉。
- 界面沒有適配（weex沒有dp單位）膀哲，不同分辨率 界面看起來也不同。
效果
好了被碗，最后我們看一下等太，我們app的運行效果吧！
新聞列表
新聞詳情
日記列表
寫日記
還有上拉和下拉刷新蛮放，我沒有截圖下來缩抡，大家可以去試試。
