一、小程序的双线程模型

谁是小程序的宿主环境?  => 微信客户端

       宿主环境是为了执行小程序的各种文件:wxml文件 wxss文件 js文件

当小程序基于WebView环境下时 WebView的Js逻辑 DOM树创建 CSS解析 样式计算 Layout Paint(composite)都发生在同一线程,在WebView上执行过多的Js逻辑可能阻塞渲染 导致界面卡顿

以此为前提，小程序同时考虑了性能与安全，采用了目前称为「双线程模型」的架构。

双线程模型：

       WXML模块和WXSS样式运行于 渲染层，渲染层使用 WebView线程渲染（一个程序有多个页面，会使用多个 WebView的线程）。

       JS脚本（app/home.js等）运行于 逻辑层，逻辑层使 用JsCore运行JS脚本。

       这两个线程都会经由微信客户端（Native）进行中转交互。

二、不同配置文件的区分

小程序的配置文件

小程序的很多 开发需求 被规定在了 配置文件 中

• 这样做可以更有利于我们的开发效率
• 可以保证开发出来的小程序的某些风格比较一致
• 如 导航栏 顶部TabBar栏 以及 页面路由

常见的配置文件有哪些?

• project.config.json => 项目配置文件
• sitemap.json => 小程序搜索相关
• app.json => 全局配置
• page.json => 页面配置

三、全局配置文件app.json

全局app配置文件

完整的可查看官方文档 =>  打开开发文档 => 框架 => 全局配置

• pages: 页面路径列表
• 指定小程序由哪些网页组成,每一项对应一个页面的路径(含文件名)信息
• 小程序所有页面都必须在pages中注册
• window:全局的默认窗口展示
• 用户指定窗口怎样展示,包含很多其他属性
• tabBar:底部tab栏展示
• 案例:

在app.json中进行tabbar配置

JSON
  "tabBar": {
    "selectedColor": "#ff8189",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "assets/tabbar/home.png",
        "selectedIconPath": "assets/tabbar/home_active.png"
      },
      {
        "text": "收藏",
        "pagePath": "pages/favor/favor",
        "iconPath": "assets/tabbar/category.png",
        "selectedIconPath": "assets/tabbar/category_active.png"
      },
      {
        "text": "订单",
        "pagePath": "pages/order/order",
        "iconPath": "assets/tabbar/cart.png",
        "selectedIconPath": "assets/tabbar/cart_active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/profile/profile",
        "iconPath": "assets/tabbar/profile.png",
        "selectedIconPath": "assets/tabbar/profile_active.png"
      }
    ]
  },

四、页面配置文件page.json

页面page配置文件

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置

• 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

enablePullDownRefresh 是否开启下拉刷新

onReachBottomDistance 距离底部还有多少距离 回调函数

五、注册App实例的操作

注册小程序 - App函数

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

• 在注册时 绑定对应的 生命周期函数
• 在生命周期函数中 执行对应的代码

注册App时,我们一般会做什么?

• 1 判断小程序的进入场景
• 2 判断生命周期函数,在生命周期中执行对应的业务逻辑,如:某个生命周期函数中进行登录操作或请求网络数据;
• 3 因为App()实例只有一个, 并且是全局共享的(单例对象),所以我们可以将一些共享数据放在这里;

App函数中的参数

作用一:判断用户打开场景

小程序打开场景较多:

• 常见打开场景:小程序列表中,群聊中,微信扫描等..
• 可在开发文档中打开

如何确定场景:

• 在onLaunch和onShow生命周期回调函数中,会有options参数,其中有scence值

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

可以在Object中定义全局App的数据

定义的数据可以在其他任何网页中进行访问:

作用三: 生命周期函数

在生命周期函数中,完成应用程序启动后的初始化操作

• 登录操作
• 读取本地数据(拿取token等..)
• 请求整个应用程序所需要的数据

六、注册Page实例的操作

注册页面 - Page函数

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

在注册时,可以绑定初始化数据、生命周期、事件处理函数等..

注册一个Page页面时 一般需要做什么?

• 在生命周期函数中发送网络请求,从服务器获取数据
• 初始化一些数据 方便被wxml展示
• 监听wxml中的事件 绑定对应的事件函数
• 其他监听等..(下拉刷新,上拉加载等..)

注册页面时 做什么?

Page页面的生命周期

上拉和下拉的监听

监听页面的下拉刷新和上拉加载更多:

步骤一:配置页面的json文件

步骤二:代码中进行监听