详细的微信小程序学习笔记(从入门到项目)(2)

前台后台的概念

查看文档可以发现,小程序与web 的概念,有些出入, 小程序中打开微信就进入了小程序前台, 后台则是 用户点击右上角关闭, 或者按了设备Home键离开微信, 此时的小程序并不是直接销毁了,而是进入了后台.

注意: 小程序的运行机制

小程序是没有重启的概念的,当小程序进入后台,
客户端会维持一段时间的运行状态, 超过一定的时间 ( 5分钟) 会被微信直接主动销毁

生命周期

了解了小程序的运行机制之后,我们了解下小程序中的生命周期,与 vue 中的生命周期十分相似. 小程序有自己的生命周期,并且是分为两种的

程序的生命周期

文档地址

在程序的入口 app.js 中调用App(),而且必须调用并且只能调用一次, 然后在App()的 参数中可以声明生命周期的函数

常用的生命周期：

属性      	描述      	触发时机                  
onLaunch	监听小程序初始化	小程序初始化完成时（全局只触发一次）执行  
onShow  	监听小程序显示 	小程序启动，或从后台进入前台显示时 (执行)
onHide  	监听小程序隐藏 	小程序从前台进入后台时执行         

页面的生命周期

文档地址

页面需要通过Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

常用的生命周期：

| 属性 | 描述 |

| onLoad | 监听页面加载 |

| onShow | 监听页面显示 |

| onReady | 监听页面初次渲染完成 |

| onHide | 监听页面隐藏 |               

总结：

• 程序的生命周期: app.js中onLaunch在小程序初始化中触发
• 页面的生命周期: onLoad 只在页面加载的时候执行一次, onShow每次访问页面都会执行, 通常onLoad在onShow之前执行

wxml 数据绑定

与vue中的数据渲染差不太多, WXML 中的动态数据来自对应的 page 的data 使用方法则是 {{ }} 将变量包起来

在组件属性中绑定数据

在组件的属性中绑定数据需要在双引号中使用大括号

// js
Page({
  data: {
    id: "index"
  }
})

// wxml
<view id="{{id}}"></view>

在组件属性中绑定布尔值

布尔值关键字,需要在双引号中使用大括号

<checkbox checked="{{false}}"> </checkbox>

注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

在大括号内运算

// 数字相加
<view>{{1 + 2}}</view>

// 字符串相加
<view>{{"hello" + name}}</view>

列表渲染( vue 中的 v-for)
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

基本使用

// wxml
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

// js
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

wx:key的使用

如不提供 wx:key，会报一个 warning，循环数组可以把key设置为下标

// wxml
<view wx:for="{{array}}" wx:key="{{index}}">
  {{index}}: {{item.message}}
</view>

for循环嵌套

当for循环嵌套时候，会造成index和item冲突，这时候需要用到以下两个属性：

• 使用 wx:for-item 可以指定数组当前元素的变量名，
• 使用 wx:for-index 可以指定数组当前下标的变量名

例子：

<view wx:for="{{array}}" wx:for-index="subIndex" wx:for-item="subItem">
  {{subIndex}}: {{subItem.message}}
</view>

条件渲染

基本概念

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

<view wx:if="{{condition}}"> True </view>

wx:elif和wx:else

可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

总结

1. WXML 中的动态数据 均来自对应 Page 的 data
2. WXML 大括号内可以进行运算
3. wx:for下标变量名默认为 index，数组当前项的默认为 item
4. wx:for需要加上wx:key， 否则报警告
5. 无论是数据绑定、循环渲染和条件渲染，都必须使用大括号

事件绑定

• 点击事件 bindtap
• 表单input监听输入事件 bindinput

点击事件 bindtap

bindtap类似于html的onClick事件

<view bindtap="tabClick"> Click me! </view>

事件对象event

Page({
  tabClick: function(event) {
    console.log(event)
  }
})

获取事件参数

通过data-*给组件绑定需要的参数，然后再绑定的事件中通过事件对象event.currentTarget.dataset 可以读取参数

参考例子:

// wxml
<view bindtap="tabClick" data-name="myName"> Click me! </view>

// js
Page({
  tabClick: function(event) {
  	const data = event.currentTarget.dataset;
	console.log(data)
    console.log(data.name)
  }
})

input监听输入事件 bindinput, bindinput类似于html的oninput事件 . bindinput的event事件对象键盘输入时触发，可以通过访问event.detail.value获取input的value

// wxml
<input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>

// js
Page({
  bindKeyInput: function(event) {
    console.log(event.detail);
    console.log(event.detail.value);
  },
})

注意： 小程序所有的事件获取参数都是上例的bindtap中的一样，通过 data-* 来绑定

总结

• bindtap类似于html的onClick事件， 普通的点击事件
• bindinput类似于html的oninput事件， 可以通过event.detail.value获取input的值

修改page中data的值

使用this.setData修改data的值

基本使用

// wxml
<view>{{text}}</view>
<button bindtap="changeText"> 
	修改 
</button>

// js
Page({
  data: {
    text: '默认的文字',
  },

  changeText: function() {
  	// 错误使用： this.data.text = '修改后的文字'
    this.setData({
      text: '修改后的文字'
    })
  },
}

this指向问题

注意在某个闭包中使用时候导致this没有指向当前的page，需要先声明this的变量，供闭包内部使用

Page({
	data: {
		text: "默认的文字"
	},
	changeText: function(){
		const that = this;
		setTimeout(function(){
			that.setData({
				text: "修改后的文字"
			})
		},2000)
	}
})

注意：

• 切记不要使用this.data.* = ""的方式修改data的值，一定要是this.setData
• 请不要把 data 中属性的值设为 undefined

小程序页面事件

监听用户下拉刷新事件

Page中设置onPullDownRefresh函数

Page({
	onPullDownRefresh: function(){
		console.log("下拉刷新")
	}
})


注意：需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

监听用户上拉触底事件

Page中设置onReachBottom函数

// wxml 需要高度可以滚动
Page({
	onReachBottom: function(){
		console.log("上拉触底事件")
	}
})


注意：在触发距离内滑动期间，本事件只会被触发一次

页面分享事件

Page中设置onShareAppMessage函数,

转发事件由设置了 open-type="share" 的按钮来触发

此事件需要 return 一个 Object，用于自定义转发内容，返回内容如下：

 字段      	说明     	默认值                      
 title   	标题     	当前小程序名称                  
 path    	转发路径   	当前页面 path ，必须是以 / 开头的完整路径
 imageUrl	自定义图片路径	使用默认截图                   
	
Page({
  onShareAppMessage: function (res) {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})


注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

总结：

• 实现类似微信朋友圈的刷新朋友圈使用onPullDownRefresh
• 无限滚动加载使用 onReachBottom
• 右上角菜单才会显示“转发”按钮需要定义onShareAppMessage

判断场景值

场景值文档

在 App 的 onLaunch 和 onShow 中获取上述场景值

tab页面的路由管理

程序路由的 Tab 切换，Tab 切换页面全部出栈，只留下新的 Tab 页面