学习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)进行中转交互
![双线程模型](https://i-blog.csdnimg.cn/blog_migrate/8cba56fe53d31a8da80e7d53977320b4.png#pic_center)
小程序界面渲染流程
界面渲染整体流程
- 1、在渲染层里,宿主环境会把wxml文件转化成对应的JS对象(虚拟DOM);
- 2、将JS对象再次转成真实DOM树,交由渲染层线程渲染;
- 3、数据变化时,逻辑层提供最新数据,产生JS对象对应的节点会发生变化,对比前后两个JS对象,进行 diff 算法对比得到变化的部分;
- 4、将最新变化的内容应用到真实的DOM树中,更新UI,这同时也是 “ 数据驱动 ” 的原理。
![wxml转换为对应的JS对象](https://i-blog.csdnimg.cn/blog_migrate/23d0cdf24329de54e99f3d04c142c177.png#pic_center)
![数据发生变化,前后两个JS对象进行diff算法比较](https://i-blog.csdnimg.cn/blog_migrate/cd6f62b93788b9828bde617c039cb623.png#pic_center)
小程序的启动流程
![小程序启动流程](https://i-blog.csdnimg.cn/blog_migrate/0b3018cd1fad6ad758aa6ab3f18138bd.png#pic_center)
注册小程序 – 参数解析
每个小程序都需要在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组件展示用户信息
![获取微信用户的基本信息的方式](https://i-blog.csdnimg.cn/blog_migrate/e29e45a933ccc51311218af90a3b79df.png#pic_center)
保存全局变量
![全局变量](https://i-blog.csdnimg.cn/blog_migrate/8c689a3e928cbc675560fdfc84b7b23a.png)
注册页面
小程序中的每个页面,都有一个对应的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 可以访问 |