学习微信小程序day02

学习微信小程序day02

Scroll Down
  1. 理解渲染层和逻辑层工作原理
  • 这里wxss和wxml属于渲染层,js属于逻辑层。
  • 从微信官方文档上了解到,小程序执行的时候可以将wxml转成js对象,然后再渲染出真正的DOM树,这里我在wxml文件中使用view标签绑定一个数据,在逻辑层将这个数据渲染出来。 image.png image.png
  • 小程序会将wxml转换js对象,大致过程如图: image.png
  • 如果需要重新渲染这个数据,首先小程序会渲染出原始的数据,逻辑层传递新的数据到小程序,这时小程序会对比新数据和原始数据之间的差别,然后重新渲染界面。
  1. 理解小程序的构造,我们可以将整个微信小程序看成一个对象,在app.js中创建了这个对象的实例,在这个实例中有小程序运行的时候需要执行的函数,详解一下这几个函数分别在小程序在客户端运行时的作用。 image.png
  • 首先是onLaunch函数,它主要在小程序初始化完成之后会执行一次。
  • onShow函数,它是在小程序已经初始化完成,客户从其他程序进入到小程序会调用这个函数。
  • onHide函数,它是在小程序已经初始化完成,客户从当前小程序进入到其他的程序时,会调用该函数。
  • onError函数,它是在小程序脚本错误,或者是API调用发生错误的时候会执行这个函数,并且会带上错误信息。
  • 最后一个它可以使任意的函数或者变量,比如说我们之前使用过的全局变量,假设我们在app.js定义了一个globalData全局变量,我们可以在其他的页面使用getApp()方法拿到这个全局变量。
  1. 小程序的生命周期和执行过程
  • 首先是初次进入小程序,微信客户端初始好宿主环境,从网络下载(这里也就是扫描二维码,或者小程序搜索)或者本地缓存中(这里本地缓存也就是之前使用过该微信小程序)拿到小程序的代码包,并且注入到宿主环境中,开始完成初始化,初始化完成之后就会调用onLaunch方法。
  • 这个时候也就是用户进入到了该微信小程序,这个时候用户可以点击右上角的关闭退出微信小程序,或者按手机的home健,注意此时的小程序并没有被销毁,这种情况称小程序进入到后台运行,这是就会调用onHide方法。
  • 当用户回到该微信小程序,微信客户端则会将后台运行的小程序唤醒,这种情况称为小程序进入前台,这个时候onShow方法就会被调用。
  • App的生命周期其实是由用户自己的操作来触发的,所以尽量不要在其他的页面调用App的生命周期函数。
  • 由于用户打开微信的方法有很多种,所以App的生命周期函数onShow方法和onLaunch方法都会携带参数来表明当前打开微信小程序的方式。 image.png
  1. 小程序的页面,任何一个页面都是由界面,配置和逻辑三部分组成,界面也就是wxss和wxml,配置是json,逻辑是js文件来描述,一个页面的文件必须放在同一个目录下,其中wxml和js是必须得,json和wxss是可选的。
  • 在前面有说到,如果需要一个新的页面,只需要在app.json的pages中声明,如果一个页面没有在这里面声明而是由用户手动创建的那么该页面就不会注入到宿主环境中。并且在app.json中声明的页面中第一条为默认打开小程序的页面首页。
  • 当在app.json中声明一个页面之后会自动生成一些文件,在生成的js文件中,定义了Page()构造器 image.png
  • 其中的data主要是定义一些页面初始数据用来完成动态绑定
  • onLoad函数,生命周期函数,触发时机最早,监听页面的加载
  • onReady函数,生命周期函数,监听页面初次渲染完成
  • onShow函数,生命周期函数,监听页面显示,触发时机早于onReady函数
  • onHide函数,生命周期函数,监听页面隐藏
  • onUnload函数,生命周期函数,监听页面卸载
  • 其他的一些非生命周期函数,主要是处理用户的一些行为,如onPullDownRefresh函数它是监听用户下拉页面动作。onReachBottom函数是用户上拉页面触底处理函数。onShareAppMessage函数是用户点击右上角分享处理函数。onPageScroll函数是监听页面滚动函数。
  • Page的构造器和App的构造器有些类似,同样也可以在Page中定义变量,只要是在当前page.js文件中都可以使用this拿到。
  1. 小程序的页面生命周期和打开参数
  • 页面在初次加载的时候会调用onLoad方法,并且只要当前页面没有被销毁,这个方法只会被调用一次
  • 在页面显示之后onShow方法会被调用,还有从别的页面返回到当前这个页面的时候也会调用onShow方法。
  • 在页面渲染完成时会调用onReady方法,同样只要当前页面没有被销毁这个方法只会被调用一次,这个方法一旦被触发,那么就代表着当前页面已经准备妥当,视图层和逻辑层就可以交互了。他们三个函数的调用时机为onLoad>onShow>inReady
  • 当用户切换到其他的页面的时候,onHide方法就会被调用。
  • 如果当前页面使用wx.redirectToh或者wx.navigateBack返回到其他页面的时候,当前页面就会被销毁,这个时候onUnload方法就会被调用。
  • 同App构造器一样,他们两的生命周期都是由微信客户端的操作而主动触发的,所以在其他的代码里面,最好不要调用这些函数。
  • 关于页面打开之后的也就是调用onLoad方法时,参数问题。这个参数在开发中会很有用。假如现在做一个商城开发,有一个商品列表页和一个商品详情页,当用户点击商品列表页的某一个商品的时候会自动跳转到对应商品详情页。因为商品众多,不可能给每一个商品都添加对应的详情页面,所以就需要根据当前商品的唯一标识,然后根据这个标识去查询对应的商品的详情再展示到详情页面。这个时候就需要使用到onLoad方法上的参数了 image.png image.png