微信原生使用 Native 代替

框架

理念：数据驱动视图
逻辑层修改数据，视图层就会做响应的更新。
作用：

1. 框架接管了小程序的路由，可以做到页面间的无缝切换，并给页面完整的生命周期；
2. 框架提供了一套基础组件
3. 框架提供了丰富的 API

[逻辑层]App Service

注册小程序：

每一个小程序都需要在^app.(js|ts)$中注册小程序实例，需要注意的是整个小程序只存在一个实例

const appInstance = getApp()

注册页面：可以通过Page或Component（类似于自定义组件）来注册页面

页面共享数据和方法可以通过Behavior

页面路由(页面栈)

框架提供了API和组件形式的路由。路由以事件的形式表示，由 Native 下发给小程序基础库,两者同时处理这一次路由事件。
通常来说，路由时机有2个：用户操作发起和开发者通过API触发。
第一类是Native直接下发到小程序基础库，确认执行；
第二类是基础库首先向Native发起路由请求，Native 确认路由可以被执行后，再将路由事件下发到基础库；
路由类型存在 7 种:

1. openType: appLaunch(onLaunch)
   触发时机：小程序启动时，只触发一次
   页面栈：此时页面栈是空，appLaunch 会创建路由事件制定的页面，并将其推入页面栈。此时，该页面的onLoad 和 onShow 会被触发。

2. openType: navigateTo
   触发时机：API wx:navigateTo
   页面栈：当前的栈顶页面首先被隐藏，触发onHide；之后框架创建路由事件指定的页面，新页面的onLoad 和 onShow 会被触发

3. openType: redirectTo
   触发时机：API wx:redirectTo
   页面栈：当前的栈顶页面首先被销毁，触发onUnload；之后框架创建路由事件指定的页面，新页面的onLoad 和 onShow 会被触发

4. openType: navigateBack 将当前栈顶页面依次弹出栈并销毁
   触发时机：API wx:navigateBack
   特殊情况：当前只存在一个页面，无论delta是多少都会失败；
   页面栈：页面栈的栈顶页面会被销毁，触发onUnload，这个过程会被触发多次。新栈顶页面的onShow 会被触发

5. openType: switchTab

   
   
   image.png

6. openType: reLaunch, autoReLaunch
   表示销毁当前所有页面；并载入一个新的页面。reLaunch代表开发者触发，autoRelaunch代表用户触发（从扫码或分享等场景重新进入页面）
   页面栈：栈中所有页面销毁，触发onUnload；创建目标页面，并推入页面栈作用唯一页面，触发onLoad 和 onShow 两个生命周期

7. openType: dismissPip (dismiss Picture-in-Picture)
   关闭小窗页面路由 dismissPip 表示关闭一个正处于小窗模式的页面。

模块化

可以将一些公共的代码抽离成一个单独的js文件,通过module.exports对外暴露接口。目前，小程序不支持node_modules引入。需要通过以下两种方法：

var common = require('common.js')

或 npm 形式

文件作用域

全局数据需要在app中的global中声明

API

小程序提供丰富的Native API：事件监听API，同步API(以Sync结尾)，异步API（cb形式）
约定事件监听使用 on

wx.onCompassChange(function (res) {
console.log(res.direction)
})

## [](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html#%E5%90%8C%E6%AD%A5-API)

[视图层] View

介绍

事件系统

双向绑定

基础组件

节点信息

Magic

• 什么是小程序基础库？
  小程序的能力需要微信客户端来支撑，每一个基础库都只能在对应的客户端版本上运行，高版本的基础库无法兼容低版本的微信客户端。通常：

• 非 tabBar 页面是什么？
  

  image.png

• 视频小窗video模式是什么？

• 为什么navigateBack只有onShow触发

• todo 画一个 tab 路由切换