微信小程序开发学习笔记[1]
目录
一、小程序App生命周期函数简介
1.1、新建页面
1.2、app.js分析
app.js里有一个App()函数，函数接收参数为json对象类型，App({})。App()函数用来注册一个小程序，接收的json对象，指定小程序的生命周期函数。
| onLaunch | 当小程序初始化完成时onLaunch函数被触发且全局只触发一次 |
|---|---|
| onShow | 当小程序启动或从后台进入前台显示时触发onShow函数 |
| onHide | 当小程序从前台进入后台时触发onHide函数 |
| onError | 当小程序发生错误时，或API调用失败时会触发onError |
App({
//json对象格式 键:值
//当小程序初次进入时被调用
onLaunch: function () {
console.log("onLaunch is called...");
},
//当小程序初次进入时被调用
onShow: function () {
console.log("onShow is called...");
}
})1.3、取值介绍
每个页面都会是4个同名的文件例如firstpage[*.js;*.wxml;*.wxss;*.json]，在*.js文件中会自动生成页面的初始数据区域。
Page({
/**
* 页面的初始数据
*/
data: {
"userName":"annjeff"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
}
})
在*.wxml页面可以使用 {{username}}来取同一页面下js文件中定义的数值。
如何取得全局的变量的值呢？
//获取小程序App实例
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
"userName":app.g_userName
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
}
})
二、小程序选项卡页面制作
微信底部通常会有2-3个选项，可以来回切换，此即是选项卡页面。
如何制作选项卡页面呢？
- 在app.json中添加tabBar按下Tab键会自动补全。
- 选项卡页面至少需要两个选项，因此可以先填写一个tabBar再进行复制，修改部分参数即可
{
"pages": [
"pages/firstpage/firstpage",
"pages/secondpage/secondpage"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "微信小程序",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/firstpage/firstpage",
"text": "paryt",
"iconPath": "images/party.png",
"selectedIconPath": "images/party_NS.png"
},
{
"pagePath": "pages/secondpage/secondpage",
"text": "partyInf",
"iconPath": "images/partyInf.png",
"selectedIconPath": "images/partyInf_NS.png"
}
]
}
}三、小程序页面的生命周期函数
与程序的声明周期函数类似，页面也有自己的声明周期函数。
| onLoad | 监听页面加载 |
| onReady | 监听页面初次渲染完成 |
| onShow |
监听页面显示 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载[redirectTo;navigateBack时调用] |
两种类型的页面调转
<!--页面调转-->
<!--销毁当前页面,在当前页面打开目标页面-->
<!--此时，会触发unload-->
<navigator open-type='redirect' url="../log/log">点我调转</navigator>
<!--隐藏当前页面，打开新目标页面,屏幕左上角会有返回选项-->
<navigator open-type='navigate' url='../log/log'>点我跳转2</navigator>四、小程序页面的事件处理
4.1、onPullDownRefresh 下拉刷新
监听用户下拉刷新事件，需要在app.json的window选项中或页面配置中开启enablePullDownRefresh
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
当需要给用户提示正在加载中时，可以使用wx.showLoading({title:'loading'})，此时再进行下拉时，会出现提示正在加载中。当数据加载完成或者定时到时间可以停止正在加载图标，如下面代码所示。
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "微信小程序",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true
},
//firstpage.js
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//微信提供的函数，在下拉时会显示正在加载
wx.showLoading({
title: 'loading',
})
//1s后关闭正在加载图表
setTimeout(function(){
wx.hideLoading();
},1000)
},4.2、onReachBottom 上拉触底
监听用户上拉触底事件，可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance默认50.在触发距离内滑动相间本事件只会被触发一次。
4.3、onPageScroll
页面滚动时会触发本函数
4.4、onShareAppMessage
用户转发只有定义了此事件处理函数，右上角菜单才会显示“转发"按钮，用户点击转发按钮的时候会调用
此事件需要 return一个 Object（应包含两个参数，一个是title,一个是path），用于自定义转发内容。
onShareAppMessage: function () {
return {
'title':"转发会带来好运",
'path':"pages/log/log"
}
}
