1 list页开发
创建list目录，在目录下创建page
编辑wxml，其中root为container的view标签，在列表中，循环list，
<block wx:for="{{list}}"> 循环的数据可以在行中通过item对象获得
<view class="container">
<view class="widget">
<text class="column">ID</text>
<text class="column">区域名</text>
<text class="column">优先级</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">添加区域信息</button>
修改list.js文件，初始数据设置list对象为空
/**
* 页面的初始数据
*/
data: {
list: []
},
在onshow方法中，首先将页面当前对象this保存为that，通过wx.request请求数据，前面我们将数据放到modelMap.put("areaList", list); areaList中，此时可以通过res.data.areaList获取数据，将其赋值到当前页面对象that的list中
/**
* 生命周期函数--监听页面显示
*/
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 = '获取数据失败' + 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数据。点击编辑通过url="../operation/operation?areaId={{item.areaId}}将数据带到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)
//渲染数据
that.setData({
list: that.data.list
});
}
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
}
})
}
}
})
}
2 Operation页开发
创建operation page，编辑wxml文件，建立form表单
<view class="container">
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="row">
<text>区域名：</text>
<input type="text" name="areaName" placeholder="请输入区域名" value="{{areaName}}" />
</view>
<view class="row">
<text>优先级：</text>
<input type="number" name="priority" placeholder="数值越大越靠前" 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文件中，制定初始数据
data: {
areaId: undefined,
areaName: '',
priority: '',
addUrl: "http://127.0.0.1:8080/superadmin/addarea",
modifyUrl: "http://127.0.0.1:8080/superadmin/modifyarea"
},
load页面时，根据传过来的参数从服务器请求数据
onLoad: function (options) {
var that = this;
// 页面初始化 options为页面跳转所带来的参数
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 = '获取数据失败' + res.data.errMsg;
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
} else {
that.setData({
areaName: area.areaName,
priority: area.priority
});
}
}
})
},
提交时,通过e.detail.value获取form表单数据，根据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页面的路径
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../list/list'
})
},
查看模拟器
