⼩程序⼊门：js⽂件详解
前⾔:
上⼀篇⽂章我们介绍了.wxml和.wxss⽂件，这篇⽂章对js⽂件进⾏详细的讲解，⾸先贴上⼀个简单的js⽂件：⽰例代码：
//index.js
Page({
data: {
text:"This is page data."
},
onLoad:function(options){
// Do some initialize when page load.
},
onReady:function(){
// Do something when page ready.
},
onShow:function(){
// Do something when page show.
},
onHide:function(){
// Do something when page hide.
},
onUnload:function(){
// Do something when page close.
},
onPullDownRefresh:function(){
// Do something when pull down.
},
onReachBottom:function(){
// Do something when page reach bottom.
},
onShareAppMessage:function(){
// return custom share data when user share.
},
// Event handler.
viewTap:function(){
this.setData({
text:'Set some data for updating view.'
})
},
customData: {
hi:'MINA'
}
})
在之前解析的app.js⽂件中，⾥⾯⼜⼀个App()函数 ⽽在每个界⾯的js⽂件中有⼀个Page()函数。
Page
Page()函数⽤来注册⼀个页⾯。接受⼀个 object 参数，其指定页⾯的初始数据、⽣命周期函数、事件处理函数等。object 参数说明：
属性类型描述
onLoadFunction⽣命周期函数--监听页⾯加载
onReadyFunction⽣命周期函数--监听页⾯初次渲染完成
onShowFunction⽣命周期函数--监听页⾯显⽰
onHideFunction⽣命周期函数--监听页⾯隐藏
onUnloadFunction⽣命周期函数--监听页⾯卸载
onPullDownRefreshFunction页⾯相关事件处理函数--监听⽤户下拉动作
onReachBottomFunction页⾯上拉触底事件的处理函数
onShareAppMessageFunction⽤户点击右上⾓分享
其他Any开发者可以添加任意的函数或数据到 object 参数中，在页⾯的函数中⽤this可以访问
初始化数据 data
初始化数据将作为页⾯的第⼀次渲染。data 将会以 JSON 的形式由逻辑层传⾄渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。
⽰例代码： 使⽤双⼤括号包裹起来
{{text}}{{array[0].msg}}
Page({
data: {
//data⾥⾯的数据类型只有这5中 最后⼀种object最常⽤ ⼀般的json格式就是这样的。 所以在获取服务器数据的时候直接赋值给 object（但是记得定义哦。）
text:'init data', //字符串
array: [{msg:'1'}, {msg:'2'}],//数组
age：18,  //数字
hidden: false,  //布尔
object: {
name: 'yuanxiao',
names: [
{ id: 1, age: 2 },
{ id: 2, age: 12 }]
//对象 注意这⾥⾯包含 其他任何的类型使⽤的时候只需要使⽤ {{ object.names }}
}
})
⽣命周期函数
onLoad: 页⾯加载
⼀个页⾯只会调⽤⼀次。
接收页⾯参数可以获取wx.navigateTo和wx.redirectTo及中的 query。
onShow: 页⾯显⽰
每次打开页⾯都会调⽤⼀次。
onReady: 页⾯初次渲染完成
⼀个页⾯只会调⽤⼀次，代表页⾯已经准备妥当，可以和视图层进⾏交互。
onHide: 页⾯隐藏
当navigateTo或底部tab切换时调⽤。
onUnload: 页⾯卸载
当redirectTo或navigateBack的时候调⽤。
页⾯相关事件处理函数
onPullDownRefresh: 下拉刷新
监听⽤户下拉刷新事件。
onShareAppMessage: ⽤户分享
只有定义了此事件处理函数，右上⾓菜单才会显⽰“分享”按钮⽤户点击分享按钮的时候会调⽤
此事件需要 return ⼀个 Object，⽤于⾃定义分享内容
⾃定义分享字段
字段说明默认值
title分享标题当前⼩程序名称
path分享路径当前页⾯ path ，必须是以 / 开头的完整路径
⽰例代码
Page({
onShareAppMessage:function(){
return{
title:'⾃定义分享标题',
path:'/page/user?id=123'
}
}
})
事件处理函数
⽰例代码：
click me
Page({
viewTap:function(){
console.log('view tap')
}
js获取json的key和value})
Page.prototype.setData()
setData函数⽤于将数据从逻辑层发送到视图层，同时改变对应的this.data的值。
注意：
直接修改 this.data ⽆效，⽆法改变页⾯的状态，还会造成数据不⼀致。
单次设置的数据不能超过1024kB，请尽量避免⼀次设置过多的数据。
单次设置的数据不能超过1024kB，请尽量避免⼀次设置过多的数据
setData() 参数格式
接受⼀个对象，以 key，value 的形式表⽰将 this.data 中的 key 对应的值改变成 value。
其中 key 可以⾮常灵活，以数据路径的形式给出，如array[2].message，d，并且不需要在 this.data 中预先定义。
⽰例代码：
{{text}}Change normal data{{array[0].text}}Change Array data{{}}Change Object data{{}}Add new data //index.js
Page({
data: {
text:'init data',
array: [{text:'init data'}],
object: {
text:'init data'
}
},
changeText:function(){
// = 'changed data'  // bad, it can not work
this.setData({
text:'changed data'
})
},
changeItemInArray:function(){
// you can use this way to modify a danamic data path
this.setData({

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。