【微信小程序】知识点总结

路由

wx.switchTab(Object object)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.reLaunch(Object object)
关闭所有页面，打开到应用内的某个页面

wx.redirectTo(Object object)
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.navigateTo(Object object)
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateBack(Object object)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

总结：
navigateTo, redirectTo 只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

微信官方文档-路由

生命周期

应用的生命周期

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

object参数说明：

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数–监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow	Function	生命周期函数–监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	生命周期函数–监听小程序隐藏	当小程序从前台进入后台，会触发 onHide

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

• 用户首次打开小程序，触发 onLaunch（全局只触发一次）。
• 小程序初始化完成后，触发onShow方法，监听小程序显示。
• 小程序从前台进入后台，触发 onHide方法。
• 小程序从后台进入前台显示，触发 onShow方法。
• 小程序后台运行一定时间，或系统资源占用过高，会被销毁。

页面的生命周期

Page()函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
object 参数说明：

• 小程序注册完成后，加载页面，触发onLoad方法。
• 页面载入后触发onShow方法，显示页面。
• 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
• 当小程序后台运行或跳转到其他页面时，触发onHide方法。
• 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
• 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。

应用的生命周期对页面生命周期的影响

• 小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
• 当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
• 当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

bindtap和catchtap的区别是什么

bindtap是不会阻止冒泡事件的，catchtap是阻止冒泡的

小程序跳转tab需要注意哪些？

必须用wx.switchTab(Object object)，需要跳转的页面必须是在app.json中的tabBar注册过的，并且路径后不能带参数

wxml传值

• 添加data-属性来传递我们需要的值，然后通过e.currentTarget.dataset获取
• 需要注意：命名如果有大写，如：data-ID，在获取的时候都是小写，即：ev.currentTarget.dataset.id

如何实现下拉刷新

• 首先在app.json或者页面的json中配置enablePullDownRefresh:true
• 在 Page中使用onPullDownRefresh 函数,该函数在下拉刷新时执行
• 在下拉函数执行时发起数据请求，请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新的状态

小程序的双向绑定和vue哪里不一样

小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData({})

小程序和Vue写法的区别

• 循环遍历：小程序是wx:for=“list”，vue是v-for=“inforin list”
• 调用data模型：小程序是this.data.unifo，vue是this.unifo
• 给模型赋值：小程序是this.setData({unifo:1})，vue是直接this.unifo=1

小程序的优点和缺点

优点

• 无需下载
• 打开速度快
• 开发成本低
• 为用户提供良好的安全保障。发布有一套严格的审查流程，不能通过审查的程序无法发布上线
• 服务请求快

缺点

• 依托微信，不能开发后台管理功能
• 大小限制不能超过2M，不能打开超过5个层级的页面

参考

微信小程序之生命周期（四）
前端开发工程师面试（小程序）