详细的微信小程序学习笔记(从入门到项目)(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

在组件属性中绑定布尔值

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

 

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

在大括号内运算

// 数字相加
{{1 + 2}}

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

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

基本使用

// wxml

  {{index}}: {{item.message}}


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

wx:key的使用

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

// wxml

  {{index}}: {{item.message}}

for循环嵌套

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

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

例子:


  {{subIndex}}: {{subItem.message}}

条件渲染

基本概念

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

 True 

wx:elif和wx:else

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

 1 
 2 
 3 

总结

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

事件绑定

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

点击事件 bindtap

bindtap类似于html的onClick事件

 Click me! 

事件对象event

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

获取事件参数

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

参考例子:

// wxml
 Click me! 

// 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


// 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
{{text}}


// 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 页面

你可能感兴趣的:(微信小程序,js)