1、文件解析
.�js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
在 data 方法里面 设置变量初始数据,
在 onLoad 方法里面 加载数据。
.wxss 对应 .css
.wxml 对应 .html
2、页面传值
1) .wxml 与 .js间传值
——靠变量传值
.wxml 变量名写在 {{ }} 中,且变量名使用驼峰法 或 下划线连接,不可出现其他符号
<view> {{number}} </view>
.js
var app = getApp()
Page({
data: {
number: '',
userInfo:''
},
onLoad: function () {
var that = this
that.setData({// 赋值,即刻更新数据
number: 100
})
//调用应用实例的方法获取全局数据
app.getUserInfo(function (userInfo) {
//更新数据
that.setData({
userInfo: userInfo
})
})
// 加载数据
this.loadData()
}
})
——用 data-x 传值
注意变量名的对应
<view wx:for="{{array}}" wx:for-item="mitem" wx:key="id">
<view class="brand-info" data-simg="{{mitem.simg}}" data-itemid="{{mitem.itemId}}" bindtap="clickView"></view>
</view>
.js
clickView: function (e) {
console.log('itemid:', e.currentTarget.dataset.itemid)
console.log('simg:', e.currentTarget.dataset.simg)
}
2)页面间跳转赋值
wx.navigateTo({
url: '../�test/test?number=200'
})
后一个页面的.js中
// blacksuccess.js
Page({
/**
* 页面的初始数据
*/
data: {
vip_number:'',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.setData({
// 前一个页面的变量存在 options 中,将其赋给本页面的变量
vip_number: options.number
})
},
... ...
})
.wxml,使用将变量放在 {{}} 中,显示出来
<view> {{�vip_number}} </view>