专业编程基础技术教程

网站首页 > 基础教程 正文

《微信小程序开发从入门到实战》学习八

ccvgpt 2024-07-19 13:03:33 基础教程 6 ℃

2.4 JS文件--小程序的逻辑

2.4.3 App注册

《微信小程序开发从入门到实战》学习八

在app.js文件实现小程序的注册

App({

})

调用App函数,并传入一个对象作为参数

实际开发中,可以对这个参数对象添加一些属性,如生命周期回调函数、错误监听函数、全局变量等。

// app.js

App({

onLaunch() { //生命周期函数,小程序打开时执行一次

// 展示本地存储能力

const logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)


// 登录

wx.login({

success: res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId

}

})



},

onShow(options){ //生命周期函数,小程序打开时和每次小程序切换到前台都会执行一次


},

onHide(){ //生命周期函数,每次小程序切换到后台都会执行一次


},

onError(msg){ //错误监听函数,每次小程序JS代码报错都会调用一次


},

globalData: { //全局变量

userInfo: null

}

})

在JavaScript中,函数本质也是一种对象,可以在Object中写成key-value的形式

// 通用格式

{

key: function 函数名(参数){

}

}

// 样例

{

onLaunch: function onLaunchFunc(options) {

}

}


//简化 函数名称简化

{

key: function(参数) {

}

}

// 样例

{

onLaunch: function(options) {

}

}


//再简化 function关键词去掉

{

key(参数) {

}

}

// 样例

{

onLaunch(options) {

}

}

小程序的执行环境变化时,小程序就会自动调用定义好的函数去执行对应的语句,实现一些功能。

在App中,除了生命周期函数和错误监听函数以外,开发者还可以自定义一些全局变量或其他自定义函数,用this关键词可以访问这些自定义的函数和变量。

App({

tets: null, //自定义的全局变量test

muFunc(){

this.tests = 123 //通过this关键词可以访问到App中的变量

},

onLaunch() { //生命周期函数,小程序打开时执行一次

this.muFunc() //通过this关键词可以调用App的函数

})

2.4.4 Page注册

在App.js文件是小程序App的注册,在其他每个页面的JS文件是Page注册

Page({


/**

* 页面的初始数据

*/

data: {

text: 'This is page data.'//设置页面初始拥有一个变量text,其值为string类型

},


/**

* 生命周期函数--监听页面加载

*/

onLoad(options) {


},


/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady() {


},


/**

* 生命周期函数--监听页面显示

*/

onShow() {


},


/**

* 生命周期函数--监听页面隐藏

*/

onHide() {


},


/**

* 生命周期函数--监听页面卸载

*/

onUnload() {


},


/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh() {

},


/**

* 页面上拉触底事件的处理函数

*/

onReachBottom() {


},


/**

* 用户点击右上角分享

*/

onShareAppMessage() {


},

/**

* 页面滚动事件的处理函数

*/

onPageScroll(){},

/**

* 屏幕旋转事件的处理函数

*/

onResize(){},

onTabItemTap(item){ //如果在JSON中开启了tab页,单击页面中的tab会触发本函数

console.log(item.index) //在调试器Console中打印函数对象中的indexa属性

console.log(item.pagePath)

console.log(item.text)

}

})

page注册中有一个data属性。这个属性不是用户自定义的属性,而是小程序规定的属性,它是页面中初始数据,在page注册的函数中可以通过this.data.text访问到访问到data中的变量text。

Tags:

最近发表
标签列表