小程序学习笔记

学习B站up主：ilovecoding 的微信小程序视频（推荐！），记的一些笔记和资料的的收录，方便以后相关资料查找。

初识小程序

小程序配置

常见配置文件

project.config.json : 项目配置文件，比如项目名称、appId等

文档地址

sitemap.json ：小程序搜索相关配置

文档地址

app.json : 全局配置

全局配置比较多，完整文档，表格中是开发中比较常用到的和相对比较重要的：

属性	类型	必填	描述
pages	string[]	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabbar	Object	否	底部tab栏的表现

pages：页面路径列表

• 用于指定小程序由哪些页面组成，每一项对应一个页面的路径信息。
• 小程序中所有的页面都必须在pages中进行注册。

window：全局的默认窗口展示

• 用户指定窗口如何展示，其中还包括了很多其他的属性

tabbar：底部tab栏的展示

属性	类型	必填	描述
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，不支持网络图片。
selectedIconPath	string	否	图片路径，不支持网络图片。

page.json: 局部配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。完整文档

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容

小程序的双线程模型

谁是小程序的宿主环境？微信客户端

• 宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件 提供了小程序的双线程模型。

双线程模型：

• wxml模块和wxss样式运行于渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使用多个WebView的线程）
• JS脚本（app.js/home.js等）运行于逻辑层，逻辑层使用JsCore运行JS脚本
• 这两个线程都会经由微信客户端（Native）进行中转交互
  

小程序界面渲染流程

界面渲染整体流程

• 1、在渲染层里，宿主环境会把wxml文件转化成对应的JS对象（虚拟DOM）；
• 2、将JS对象再次转成真实DOM树，交由渲染层线程渲染；
• 3、数据变化时，逻辑层提供最新数据，产生JS对象对应的节点会发生变化，对比前后两个JS对象，进行 diff 算法对比得到变化的部分；
• 4、将最新变化的内容应用到真实的DOM树中，更新UI，这同时也是 “ 数据驱动 ” 的原理。
  
  

小程序的启动流程

注册小程序 – 参数解析

每个小程序都需要在app.js 中调用App方法注册 小程序实例

• 在注册时，可以绑定对应的声明周期函数，在生命周期函数中，执行对应的代码
• 完整文档

属性	类型	默认值	必填	描述
onLaunch	function		否	声明周期回调 – 监听小程序初始化
onShow	function		否	声明周期回调 – 监听小程序启动或切前台
onHide	function		否	声明周期回调 – 监听小程序切后台
onError	function		否	错误监听函数
onPageNotFound	function		否	页面不存在监听函数
其他	any		否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

注册App时做什么呢？

注册小程序时，一般会进行的操作：

• 1、判断小程序的进入场景
• 2、监听生命周期函数，在生命周期中执行对应的业务逻辑，比如在某个生命周期函数中获取用户的信息。
• 3、因为App()实例只有一个，并且是全局共享的（单例对象），所以我们可以将一些共享的数据放在这里。

小程序的打开场景

• 常见的打开场景：群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开等
• 完整文档

如何确认场景

在onLaunch和onShow生命周期回调函数中，会有options参数，其中有scene值

获取用户信息

获取微信用户的基本信息方式

• 1、wx.getUserInfo - 即将废弃，建议不使用；
• 2、button组件 – 将 open-type 改成 getUserInfo，并且绑定bindgetuserinfo事件去获取
• 3、使用open-data组件展示用户信息
  

保存全局变量

注册页面

小程序中的每个页面，都有一个对应的js文件，其中调用Page方法注册页面实例

• 在注册时，可以绑定初始化数据、生命周期回调、事件处理函数等
• 完整文档

属性	类型	描述
onLaunch	function	声明周期回调 – 监听小程序初始化
data	Object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发
其他	any	开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问