小程序总结（一）

重要摘要

1. 生命周期
   1. 小程序生命周期

小程序的生命周期是在app.js里面调用的。

• • • • onLaunch()

监听小程序初始化，全局只触发一次，可以将一些全局都需要的数据且不会变化的放在这里

• • • • onShow()

监听小程序启动或切前台。

• • • • onHide()

监听小程序切后台

• • • • onError()

错误监听函数

• • • • onPageNotFound()

页面不存在监听函数。

 

总结：

小程序的生命周期是：onLaunch()>onShow()>onHide(),

关于onError()和onPageNotFound()我没有进行测试。 

onHide()触发方式 

1. 1. 页面的生命周期

页面生命周期函数就是当你每次进入/切换到一个新的页面的时候，就会调用生命周期函数

• • • • onLoad()

监听页面加载，只执行一次

• • • • onShow()

监听页面显示

• • • • onHide()

监听页面隐藏

• • • • onReady()

监听页面初次渲染完成

• • • • onUnload()

监听页面卸载

 

1. 1. 1. 生命周期执行顺序

onLoad()>onShow()>onReady

 

总结：小程序的生命周期分为两种，一种是app.js生命周期，另一种是页面生命周期，这是

两种不同的生命周期但是又相互关联

区别：

• • • • • • • • 小程序生命周期是App(Object object)函数。

页面生命周期是Page(Object object)函数。

• • • • • • • • 页面里的生命周期无法在小程序生命周期中回调。

 

相同：

都是接受一个Object类型参数，参数里指定生命周期等

 

1. 顶部导航实现

小程序的底部导航可以在app.json进行设置，可顶部导航需要自定义实现。

 

1. 事件绑定

1. 1. 什么是事件

• • • • 事件是视图层到逻辑层到通讯方式
      • 事件可以将用户的行为反馈到逻辑层进行处理
      • 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数
      • 事件对象可以携带额外信息

1. 1. 事件的使用方式

• • • • bindtap，当用户点击该组件的时候会在该页面对于的Page中找到对应的事件处理函数  

 

 

 

1. 1. 事件如何携带参数 

 

 

1. 1. 事件冒泡

bind事件绑定不会阻止向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡 

1. 1. 事件的介绍
      1. 官网介绍

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F

1. 1. 1. 非官方介绍

https://www.cnblogs.com/eline2018/p/10394974.html

 

1. wx.navigateTo(Object object)

保留当前页面，跳转到应用内到某个页面，但是不能跳到tabbar页面。 

url是需要跳转到应用内非tabBar的页面路径，路径后可以带参数，路径参数之间用？分割。 

1. 引入.wxml文件

引入.wxml文件有两种方式：import和include。

• • • include

include可以将目标文件除了<template /> <wxs />外点整个代码引入，相当于是将目标文件

代码拷贝到include所在到位置 

• • • import

import需要先在目标文件里加上<template>才可以引用。

  

注意：我这里说的是引入.wxml文件，如果想引入别的文件的.wxss，只用在本页面的.wxss

添加引入就行。

 

1. 下拉刷新

下拉刷新需要先在.json的window里加上 "enablePullDownRefresh" : true 

如果是在app.json加上的，指的是小程序中所有页面都可以下拉刷新，若在本页面的.json加

上，即只能是本页面才可以下拉刷新。

加上enablePullDownRefresh之后，就可以在.js页面中写上onPullDownRefresh()方法。

onPullDownRefresh是用来监听用户下拉刷新事件。 

注意：使用mac的，在用微信开发者工具测试下拉刷新的时候，要用一只手指按住触摸板往

下拉才会触发onPullDownRefresh。

1. checkbox的选中事件处理

在checkbox里，无法使用bindchange函数事件，但是catchtap函数事件又无法知道是否选

中了，你需要在checkbox外面加上checkbox-group，在checkbox-group用bindchange才能

知道是不是选中了。

这样判断也只是根据checkboxZeroDay方法里是不是有返回的value值。

 

 

1. editor

小程序的富文本编辑器，可以对图片、文字进行编辑，对于editor官方有demo，可以学习，

我要在这里说的是困扰我一个下午的问题，在使用editor的时候，project.config.json里的

libVersion一定要在2.7.0版本以上！！！！！！

疑问解答

1. 小程序的前后台解释

当用户点击左上角的关闭按钮，或者按设备的Home键离开微信，此时小程序并没有销毁，

而是进入到了后台。只有当小程序进入后台一定时间或者手机资源占用过高的情况下，小程

序才会被清理。当在一定时间中，再次进入微信或者打开小程序时，小程序又会从后台进入

到前台。

来源：https://developers.weixin.qq.com/community/develop/doc/0008e4d97f8f2834a21702e6553c00

1. 小程序的表单组件相关

在小程序的表单组件中，会发现并没有你常用的select元素，但有类似的picker可用

 

关于微信开发者工具

1. 如何快速生成页面结构

在app.json的pages添加页面路径，微信开发者工具会自动生成相应的页面结构。

但是可能遇到报错  

 

遇到这个问题我还未找到具体解决方法，但是你可以先”pages/login1/login1”做这样改动

后，再重新生成”pages/login/login”，这样就能自动生成了，别忘了把login1自动生成的给

删了。

推荐

1. 校验插件

扩展插件（发送请求、Promise API、表单验证、Restful API）

https://github.com/skyvow/wx-extend