1.从后台服务器获取数据,然后存在JS,通过数据绑定显示在页面
后台获取数据:
getUser: function () {
var that = this; //function 里面已经不是this所以使用this.setData不起作用 wx.request({ url: 'User/findUserById', data: { id: 1 }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (data) { that.setData({ user: data }); } }) }
wxml页面:
<view>
用户名:{{user.name}}
用户密码:{{user.password}}
</view>
2.页面输入的数据,存到JS然后发送给后台服务器
wxml:
<view> 姓名:<input placeholder="输入姓名" type='text' value='{{name}}' bindinput="bindName"></input> 密码:<input placeholder="输入密码" type='password' value='{{password}}' bindinput="bindPassWord"></input> </view>
<button bindtap='saveUser'>添加用户</button>
JS:
bindName: function(e){ this.setData({ name: e.detail.value }); }
bindPassWord: function(e){ this.setData({ password: e.detail.value }); }
saveUser: function () { wx.request({ url: 'User/addUser', data: { name: this.name, password: this.password }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (data) { //服务器返回信息 } }) }
3.页面到页面
wxml:
<view data-id="{{user.id}}" bindtap="goUserDetail"></view>
JS:
/** * 跳转到用户详情 */ goUserDetail: function (e) { wx.navigateTo({ url: '../User/Detail?id=' + e.currentTarget.dataset.id }) }
在另外一个页面用户详情JS获取id:
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ id: options.id }); }