小程序知识点整理

小程序知识点的梳理

1.窗口配置
（1）首先从本地电脑中打开微信开发者工具。

(2)然后打开项目文件目录。

(3)点击“pages”文件夹。

(4)展开pages文件夹，点击其中给一个页面文件夹。

(5)在页面文件夹中找到json 文件，这是用来进行页面配置的。

(6)点击页面中的json文件，在文件中写入配置，如果跟全局设置重复，则会覆盖掉全局的设置。

(7)保存设置，然后来到效果预览区域进行预览。

2.小程序文件类型 每个页面由4个文件组成

创建一个小程序，在微信开发工具新建项目选择小程序项目，选择代码存放的路径，填入申请的小程序AppID,给文件起个文件的名字，点击新建，就得到一个文件了。点击顶部菜单编译就可以在微信开发工具中预览的第一个小程序。
文件类型：
.json 后缀的 JSON 配置文件，用于页面或小程序的配置设置
.wxml 后缀的 WXML 模板文件，用于布局与内容
.wxss 后缀的 WXSS 样式文件，用于具体的样式
.js 后缀的 JS 脚本逻辑文件，用于逻辑处理

3.小程序的生命周期 和 小程序页面的生命周期
小程序的生命周期：

1、用户首次打开小程序，会触发onLauch(全局只触发一次);
2、小程序初始化完成后，触发onShow方法，监听小程序显示；
3、小程序从前台进入后台，触发onHide方法；
4、小程序从后台进入前台显示，触发onShow方法；
5、小程序后台运行一定时间，或系统资源占用过高，会被销毁；

小程序页面生命函数

1、小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次；
2、页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次；
3、首次显示页面，会触发onReady方法，渲染页面和样式，一个页面只会调用一次；
4、当小程序后台运行或跳转到其他页面时，触发onHide方法；
5、当小程序从后台进入前台运行或重新载入页面时，触发onShow方法；
6、当使用wx.readirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload

wx.navigateTo跳转，页面的生命周期变化
1、进入A页面：A执行onLoad()–> onShow()–> onReady();
2、A页面wx.navigateTo(B页面)：A执行onHide(),B执行onLoad()–> onShow()–> onReady();
3、B页面wx.navigateBack(A页面)：B执行onUnload(),A执行onShow();
4、退出A页面：A执行onUnload();
7、wx.redirectTo()是关闭当前页面，跳转到某个页面，跳转页面后不能返回上一页

wx.redirectTo跳转，页面的生命周期变化
1、进入A页面：A执行onLoad()–> onShow()–> onReady();
2、A页面wx.redirectTo(B页面)：A执行onUnload(),B执行onLoad()–> onShow()–> onReady();
3. 应用生命周期影响页面生命周期

1、小程序初始化完成后，页面首次加载触发onLoad，只会触发一次；
2、小程序进入后台，先执行页面的onHide方法然后执行应用的onHide方法；
3、当小程序从后台进入到前台，先执行应用的onShow方法然后执行页面的onShow方法；
主意：
1、App()必须在app.js中注册，且只能注册一个；
2、不要在App()内的函数中调用getApp(),使用this就可以拿到app实例；
3、不要在onLauch的时候调用getCurrentPage(),此时page还没有生成；
4、通过getApp()获取实例之后，不要私自调用生命周期函数；

4.数据请求和封装
（1）、封装代码,建文件,写个js,代码截图如下

（2）使用，如图代码

5.路由的跳转分类和路由跳转传递参数

在Android中，我们Activity和Fragment都有栈的概念在里面，微信小程序页面也有栈的概念在里面。微信小程序页面跳转有四种方式：
1.wx.navigateTo(OBJECT)；
2.wx.redirectTo(OBJECT)；
3.wx.switchTab(OBJECT)；
4.wx.navigateBack(OBJECT)
5.使用实现对应的跳转功能；
分析：
1.其中navigateTo是将原来的页面保存在页面栈中，在跳入到下一个页面的时候目标页面也进栈，只有在这个情况下点击手机的返回按钮才可以跳转到上一个页面；
2.redirectTo和switchTab都是先清除栈中原来的页面，然后目标页面进栈，使用这两种跳转方式，都不能通过系统的返回键回到上一个页面，而是直接退出小程序；
3.redirectTo使用的时候一定要配合tabBar或是页面里面可以再次跳转按钮，否则无法回到上一个页面；
4.switchTab跳转的页面必须是tabBar中声明的页面；
5.tabBar中定义的字段不能超过5个页面，小程序的页面栈层次也不能超过5层。
6.navigateBack只能返回到页面栈中的指定页面，一般和navigateTo配合使用。
7.wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

6.路由配置
配置路由：在app.json中配置如下代码

7.点击获取参数
这个就是给组件中的一些标签绑定一个事件方法，我们就可以再这个事件方法中做一些逻辑处理函数 就好比渲染页面的数据 我们可以在渲染数据中 给它一个点击事件 这时候可以通过渲染的数据 传入这个事件的参数里 然后再js页面做一些逻辑处理

8.本地存储的几种方式

1、同步
（1）wx.setStorageSync(); //存储值
（2）wx.removeStorageSync(); // 移除指定的值
（3）wx.getStorageSync(); // 获取值
（4）wx.getStorageInfoSync(); // 获取当前 storage 中所有的 key
（5）wx.clearStorageSync(); // 清除所有的key

2、异步
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
（1）wx.setStorage(); //存储值
（2）wx.removeStorage(); // 移除指定的值
（3）wx.getStorage(); // 获取值
（4）wx.getStorageInfo(); // 获取当前 storage 中所有的 key
（5）wx.clearStorage(); // 清除所有的key