學習和使用wex5有一段時間了,發現有些代碼,雖然沒有自動提功能,但是幾乎每個頁面或功能都要用到,索性做成了代碼模板,當需要的時候直接拷過來用,簡化過程,減少開發時間,改改就行。
一 事件監聽模型
//頁面加載后,在需要監聽的頁面上設置監聽事件
Model.prototype.modelLoad = function(event) {
justep.Shell.on("onUserChanged", this.onUserChanged, this);
}
//卸載用戶變更事件
Model.prototype.modelUnLoad = function(event) {
justep.Shell.off("onUserChanged", this.onUserChanged);
};
//具體事件
Model.prototype.onUserChanged = function(event) {
this.comp("userData").refreshData();
};
二 過濾模型
數據過濾分幾種情況
1. 定值過濾
this.comp("userData").setFilter("userFilter", "p_ID = '123'");
this.comp("userData").refreshData();
2.變量過濾
this.comp("userData").setFilter("userFilter", "p_ID = '" + this.userUUID + "'");
this.comp("userData").refreshData();
3.復雜字段模糊查詢
在多個關鍵字模糊查詢中,非空判斷與過濾器清空,非常重要
var key = this.getElementByXid("keyInput").value; // 取出輸入關鍵字的值
if (key !== null && key !== "") { // 非空判斷,避免sql報錯
goodsData.setFilter("keyFilter", "market_goodsstore.p_name like '%" + key + "%' or market_goodsstore.p_title like '%" + key + "%' or market_goodsstore.p_brand like '%" + key
+ "%' or market_goodsstore.p_postAddress like '%" + key + "%' or market_goodsstore.p_summary like '%" + key + "%' "); // sql模糊查詢拼接
// product_product 是數據庫表別名.p_name是字段名
} else {
goodsData.filters.clear(); // 空值清除過濾器
}
(注)filter的過濾條件對應sql中的where的內容,注意字符串拼接方法與換行
三 頁面跳轉傳參模型
1 無參跳轉
justep.Shell.showPage("goodsEdit");
2有參跳轉
justep.Shell.showPage("goodsEdit", {
goodsId : goodsId,
});
3 帶來源頁面有參跳轉
justep.Shell.showPage("goodsEdit", {
goodsId : goodsId,
from : "goodsManager"
});
from為自定義鍵,在多頁面共用子頁面的跳轉中,告訴子頁面,父頁面是誰,子頁面完成功能后跳轉回到父頁面。
四 頁面接參模型
1 簡單接參
Model.prototype.modelParamsReceive = function(event) {
if (event.params !== undefined) {
this.orderId = this.params.orderId;
}
};
只要參數非空,即接參並存儲
2 復雜來源頁面接參
Model.prototype.modelParamsReceive = function(event) {
if (this.params !== undefined) {
if (this.params.from === "register") {
if (this.userUUID != this.params.userUUID) {
this.userUUID = this.params.userUUID;
this.comp("userData").setFilter("userFilter", "p_ID = '" + this.userUUID + "'");
this.comp("userData").refreshData();
this.phoneInput = this.comp("userData").val("p_phone");
this.passwordInput = this.comp("userData").val("p_password");
this.comp("phoneInput").val(this.phoneInput);
this.comp("passwordInput").val(this.passwordInput); // 將注冊頁的信息傳回來接收,為了信息安全,傳參為userUUID,然后過濾出相應的用戶信息
this.from = "mine";
}
} else if (this.params.from === "mine") {
this.from = this.params.from;
} else if (this.params.from === "home") {
this.from = this.params.from;
}
}
};
目是只有一個,根據不同的來源頁面,執行不同的數據刷新或其它操作
五 data套裝模型
1 newdata 新增,代碼提示里有,這里不說了
2 保存
this.comp("goodsData").saveData( {
"ansyc" : false,
"onSuccess" : function(event) {
event.source.saveData({
"onSuccess" : function(event) {
event.source.refreshData();
}
});
}
});
3 刪除
Model.prototype.delBtnClick = function(event) {
var rows = this.comp("goodsData").find([ "p_choose" ], [ "1" ]);
this.comp("goodsData").deleteData(rows, {
"confirm" : false,
"onSuccess" : function(event) {
event.source.saveData({
"onSuccess" : function(event) {
event.source.refreshData();
}
});
}
});
};
data相關動作,套接在onsuccess回調函數里,大家不用去每次調用data的事件來觸發,拷貝使用,直接改下data組件id,復用性強。
六 點擊當前行模型
var row = event.bindingContext.$object;
這里要注意,this.comp("data").getCurrentRow,會重復得到當行前數據,點擊第二次才能切換到其它行
七 list 嵌套模型
分為兩情情況
1 list外嵌套,list各不相干,只是關聯過濾
如圖,左側是城市list,右側是景點list,景點根據城市過濾,重點在filter寫法
$row.val("t_city") 左側是景點當前行的城市字段
$model.cityData.val("t_shi") 右側是城市data中的城市字段
兩者做==對比判斷,為true時過濾執行
這個相對簡單,在過濾時有提示。
2 list內嵌套,一個list內再內嵌一個list
商鋪是list,商鋪里的商品也是list
過濾沒有提示,用的是行別名。具體如下:
商鋪行別名:
官方視頻里講過,今天重新拿來,對比一下。
商品過濾條件寫法:
$row.val('fShopID') 左側,還是當前行的商鋪字段
shopRow.val('id') 右側,是商鋪行別名的id值。注意,是行別名的字段值。很多人沒仔細研究官方視頻,到這里用提示的寫法,出來是 $model.shopData.val("id"),
不用行別名,就不是商鋪的當前行,是整個商鋪data,所以不能過濾成功。
八 回車監聽
回車,執行,不用去特意點擊,好多頁面都要用
$(document).keyup(function(event) {
if (event.keyCode == 13) {
$("#searchBtn").trigger("click");
}
});
一看,也真是夠簡單的。
九 選擇模型
1 單選
簡單,不作說明
2 全選 模型
根據全選按鈕的值,遍歷data里的值。真是經常用的東西
cartData.each(function(obj) {
if (choose) {
cartData.setValue("p_choose", "1", obj.row);
} else {
cartData.setValue("p_choose", "", obj.row);
}
});
3 返選模型
在全選基礎上,返選。其實本質是先把已選或未選的值先歸0后重新賦值。
Model.prototype.invertChooseChange = function(event) {
var chineseData = this.comp("chineseData");
if (this.comp("invertChoose").val() == 1) {
chineseData.each(function(obj) {
if (chineseData.getValue("choose", obj.row) == 0) {
chineseData.setValue("choose", "1", obj.row);
} else {
chineseData.setValue("choose", "0", obj.row);
}
});
} else {
chineseData.each(function(obj) {
if (chineseData.getValue("choose", obj.row) == 0) {
chineseData.setValue("choose", "1", obj.row);
} else {
chineseData.setValue("choose", "0", obj.row);
}
});
}
chineseData.saveData();
chineseData.refreshData();
};
今天選總結到這里,以后會繼續更新,分享給大家。
相關視頻制作完成,上傳優酷。教學app制作中。我是邯鄲戲曲開發,tel:15175073123,qq:1017945251
掃描二維碼,看高清教學視頻。