基於weex的app開發腳手架weexplus學習筆記

認識weexplus

weexplus是基於weex官方的二次開發版本，weex和react native一樣同屬第2代跨平臺技術，解決了第一代性能低下，體驗不好的問題，同時保留了第一代 多平臺一套代碼，基於web技術棧，支持動態發版 等所有優點。--weexplus腳手架作者

開發

• 運行開發環境(預設已經安裝好node環境)

$ npm install  weex-toolkit -g
$ npm install weexplus -g
$ git clone XXX //下載項目到本地
$ cd XXX // 進入項目根目錄
$ npm install
$ npm run dev
$ npm run weexplus

• 怎麼請求數據？前端已經封裝好net模塊，使用方法https://weexplus.github.io/doc/mo-kuai/netwang-luo-fang-95ee29.html

• 頁面怎麼傳參數？運用navigator導航控制器模塊實現傳參（具體參考文檔https://weexplus.github.io/doc/mo-kuai/notify.html）

• 怎麼獲取參數？
  通過weexglobalEvent模塊的addEventListener監聽onPageInit模塊的事件（具體參考文檔http://weex.apache.org/cn/references/modules/globalevent.html）

那些坑

• 報文件未找到錯誤(如下圖)，解決方案：按照報錯指定路徑新建文件config.json

• 網速慢，安裝淘寶鏡像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

• 返回的bug（保存數據多層返回）

//在列表頁註冊頁面
var notify=weex.requireModule('notify');
notify.regist('twoPlusListTab',(p)=>{
    this.status=p.index;
})
navigator.setPageId('twoPlusList');//唯一，最好根據當前頁面的文件名來命名

//最後的操作頁面返回到首頁
var notify=weex.requireModule('notify');
notify.send('twoPlusListTab', {index:0});//傳參
nav.backTo('twoPlusList');//返回到列表 

//需要返回刷新
//在列表頁註冊頁面
var notify=weex.requireModule('notify');
notify.regist('twoPlusListTab',(p)=>{
    this.status=p.index;
})
//需要在全局事件監聽里設置setPageId
globalEvent.addEventListener("onPageInit", () => {
    navigator.setPageId('twoPlusList');//唯一
})

//在需要刷新的頁面
var that = this;
var notify=weex.requireModule('notify');
notify.regist('threeUnlinkList',(p)=>{
    that.refresh();//頁面需要有刷新方法
})

//最後的操作頁面返回到列表頁 twoPlusList，需要寫到數據請求的回調函數里
net.post("sinochem/tripartiteContract/add", query, res => {
    modal.toast({ message: "保存成功！" });
    var notify=weex.requireModule('notify');
    notify.send('twoPlusListTab', {index:0});//傳參到列表頁
    notify.send('threeUnlinkList', {})//跟需要刷新的頁面通信
    navigator.backTo('twoPlusList');//返回到列表頁
});

常用代碼塊

• alert彈窗（weex debug有點坑安卓的基本不能用，有時候需要用這個來做人工斷點）

var modal = weex.requireModule('modal');

modal.alert({
    message: 'This is a alert',
    duration: 0.3
}, function (value) {
    console.log('alert callback', value)
})

//不需要回調函數簡寫
modal.alert({message:'This is a alert');

• confirm確認框彈窗

//確認框
modal.confirm({
    message: 'Do you confirm ?',
    duration: 0.3
}, function (value) {
    console.log('confirm callback', value)
})

//  有回調函數的確認框
modal.confirm(
    {
        message:"this is message",
        okTitle: "確認",
        cancelTitle: "取消"
    },
    function(obj) {
        if (obj == "確認") {
            modal.alert({message:'確認'});
        } else {
            modal.alert({message:'取消'});
        }
    }
);

• 正則匹配

//只能輸數字 不能輸負數（金額、面積）
if(!(/^[-]?[0-9]*\.?[0-9]+(eE?[0-9]+)?$/).test(this.area)||this.area<=0){ 
    modal.toast({message:'請輸入正確的合同面積'})
    return false;
}

// 校驗身份證號
if(!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/).test(p.identityCode)){
    modal.toast({ message: "請輸入正確的身份證號" });
    return;
}

文檔

• weexplus https://weexplus.github.io/doc/
• weex官方文檔 http://weex.apache.org/cn/guide/
• weex踩坑攻略 https://juejin.im/entry/59577001f265da6c2211848b
• vue官方文檔 https://cn.vuejs.org/
• weex使用過程中的那些坑 http://tech.dianwoda.com/2017/12/25/weexshi-yong-guo-cheng-zhong-de-na-xie-keng/

其他

• 推薦用vscode作為編輯器：下載地址