【2 微信小程序学习 - 小程序的架构.配置.app与page】

1 小程序的架构模型

为了避免卡顿,优化性能,小程序使用双线程模型.
可以理解为创建了两个webview,一个负责渲染界面,一个负责js脚本处理,通过微信客户端的native进行中转交互.
在这里插入图片描述

2 小程序的配置文件

在这里插入图片描述

在多人开发中,一般不修改project.config.json避免冲突 ,而是单人修改project.private.config.json,并且此文件做git忽略处理

3 全局app配置文件

可以配置很多通用的东西,文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
在这里插入图片描述

底部tabbar配置,标题,页面,图标,文章选中颜色

在这里插入图片描述

4 单独页面配置

配置文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
在这里插入图片描述

5 注册小程序 – App函数

在这里插入图片描述

App函数的参数

在这里插入图片描述

作用一：判断打开场景

文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html
在这里插入图片描述

作用二：定义全局App的数据

这里一般共享固定的数据.因为不能被其他页面所绑定
在这里插入图片描述

作用三 – 生命周期函数

onLaunch(options) {//操作}
在这里插入图片描述

6 注册页面 – Page函数

这个函数主要做,数据处理和事件定义与监听.

文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
在这里插入图片描述

page({})对象中的属性

在这里插入图片描述

常见事件


// 4.绑定下拉刷新/达到底部/页面滚动
  onPullDownRefresh() {
    console.log("onPullDownRefresh");
  },
  onReachBottom() {
    console.log("onReachBottom");
  },
  onPageScroll(event) {
    console.log("onPageScroll:", event);
  },
  // 生命周期函数: 
  onShow() {
    console.log("onShow");
  },
  onReady() {
    console.log("onReady");
  },
  onHide() {
    console.log("onHide");
  },
  onUnload() {
    console.log("onUnload");
  }