1 list頁開發(fā)
創(chuàng)建list目錄，在目錄下創(chuàng)建page
編輯wxml，其中root為container的view標簽，在列表中，循環(huán)list，
<block wx:for="{{list}}"> 循環(huán)的數(shù)據(jù)可以在行中通過item對象獲得
<view class="container">
<view class="widget">
<text class="column">ID</text>
<text class="column">區(qū)域名</text>
<text class="column">優(yōu)先級</text>
<text class="link-column">操作</text>
</view>
<scroll-view scroll-y="true">
<view>
<block wx:for="{{list}}">
<view class="widget">
<view>
<text class="column">{{item.areaId}}</text>
<text class="column">{{item.areaName}}</text>
<text class="column">{{item.priority}}</text>
<view class="link-column">
<navigator class="link" url="../operation/operation?areaId={{item.areaId}}">編輯</navigator>|
<text class="link" bindtap="deleteArea" data-areaid="{{item.areaId}}" data-areaname="{{item.areaName}}" data-index="{{index}}">刪除</text>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
<button type="primary" bindtap="addArea">添加區(qū)域信息</button>
修改list.js文件，初始數(shù)據(jù)設置list對象為空
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
list: []
},
在onshow方法中，首先將頁面當前對象this保存為that，通過wx.request請求數(shù)據(jù)，前面我們將數(shù)據(jù)放到modelMap.put("areaList", list); areaList中，此時可以通過res.data.areaList獲取數(shù)據(jù)，將其賦值到當前頁面對象that的list中
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
var that = this;
wx.request({
url: "http://127.0.0.1:8080/superadmin/listarea",
data: {},
method: 'GET',
success: function (res) {
var list = res.data.areaList;
if (list == null) {
var toastText = '獲取數(shù)據(jù)失敗' + res.data.errMsg;
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
} else {
that.setData({
list: list
});
}
}
})
},
添加addArea與deleteArea方法，addArea指向opreation頁面，deleteArea調用后臺請求，刪除成功則通過that.data.list.splice(e.target.dataset.index, 1)將當前頁面上的行刪除，重新設置list數(shù)據(jù)。點擊編輯通過url="../operation/operation?areaId={{item.areaId}}將數(shù)據(jù)帶到opreation頁面
addArea: function () {
wx.navigateTo({
url: '../operation/operation',
})
},
deleteArea: function (e) {
var that = this;
wx.showModal({
title: '提示',
content: '確定要刪除[' + e.target.dataset.areaname + ']嗎？',
success: function (sm) {
if (sm.confirm) {
// 用戶點擊了確定 可以調用刪除方法了
wx.request({
url: "http://127.0.0.1:8080/demo/superadmin/removearea",
data: { "areaId": e.target.dataset.areaid },
method: 'GET',
success: function (res) {
var result = res.data.success
var toastText = "刪除成功！";
if (result != true) {
toastText = "刪除失敗" + res.data.errMsg;
} else {
that.data.list.splice(e.target.dataset.index, 1)
//渲染數(shù)據(jù)
that.setData({
list: that.data.list
});
}
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
}
})
}
}
})
}
2 Operation頁開發(fā)
創(chuàng)建operation page，編輯wxml文件，建立form表單
<view class="container">
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="row">
<text>區(qū)域名：</text>
<input type="text" name="areaName" placeholder="請輸入?yún)^(qū)域名" value="{{areaName}}" />
</view>
<view class="row">
<text>優(yōu)先級：</text>
<input type="number" name="priority" placeholder="數(shù)值越大越靠前" value="{{priority}}" />
</view>
<view class="row">
<button type="primary" form-type="submit">提交</button>
<button type="primary" form-type="reset">清空</button>
</view>
</form>
</view>
在opreation js文件中，制定初始數(shù)據(jù)
data: {
areaId: undefined,
areaName: '',
priority: '',
addUrl: "http://127.0.0.1:8080/superadmin/addarea",
modifyUrl: "http://127.0.0.1:8080/superadmin/modifyarea"
},
load頁面時，根據(jù)傳過來的參數(shù)從服務器請求數(shù)據(jù)
onLoad: function (options) {
var that = this;
// 頁面初始化 options為頁面跳轉所帶來的參數(shù)
this.setData({
areaId: options.areaId
});
if (options.areaId == undefined) {
return;
}
wx.request({
url: "http://127.0.0.1:8080/superadmin/getareabyid",
data: { "areaId": options.areaId },
method: 'GET',
success: function (res) {
var area = res.data.area;
if (area == undefined) {
var toastText = '獲取數(shù)據(jù)失敗' + res.data.errMsg;
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
} else {
that.setData({
areaName: area.areaName,
priority: area.priority
});
}
}
})
},
提交時,通過e.detail.value獲取form表單數(shù)據(jù)，根據(jù)areaId判斷是修改還是新增，調用后臺請求
formSubmit: function (e) {
var that = this;
var formData = e.detail.value;
var url = that.data.addUrl;
if (that.data.areaId != undefined) {
formData.areaId = that.data.areaId;
url = that.data.modifyUrl;
}
wx.request({
url: url,
data: JSON.stringify(formData),
method: 'POST',
header: {
'Content-Type': 'application/json'
},
success: function (res) {
var result = res.data.success
var toastText = "操作成功！";
if (result != true) {
toastText = "操作失敗" + res.data.errMsg;
}
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
if (that.data.areaId == undefined) {
wx.redirectTo({
url: '../list/list',
})
}
}
})
}
3 測試小程序
在index頁面中，將其指定到list頁面的路徑
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../list/list'
})
},
查看模擬器
