本文加少NodeJS鉴权的五种方案
1. `HTTP Basic Authentication`
2. `session-cookie`
3. `Token` 验证
4. `Json Web Token` 验证
5. `OAuth`(开放授权)




# HTTP Basic Authentication
这种授权方式是浏览器遵守`http`协议实现的基本授权方式，`HTTP`协议进行通信的过程中，`HTTP`协议定义了基本认证允许`HTTP`服务器对客户端进行用户身份认证的方法。

## 认证过程：

![image.png](https://blog.warmplace.cn/static/img/5e3e2b898b8f79b249bdf7b836d04e43.image.webp)

1. 客户端向服务器请求数据，请求的内容可能是一个网页或者是一个ajax异步请求，此时，假设客户端尚未被验证，则客户端提供如下请求至服务器：

```http
Get /index.html HTTP/1.0
Host:www.xianzao.com
```

2. 服务器向客户端发送验证请求代码401, `WWW-Authenticate: Basic realm="xianzao.com"`这句话是关键，如果没有客户端不会弹出用户名和密码输入界面）服务器返回的数据大抵如下：
```http
HTTP/1.0 401 Unauthorised
WWW-Authenticate: Basic realm=”xianzao.com” 
Content-Type: text/html 
Content-Length: xxx
```
补充说明
- realm 用来描述进行保护的区域，或者指代保护的范围。
- 它可以是类似于 "Access to the staging site" 的消息，
- 这样用户就可以知道他们正在试图访问哪一空间。

3. 当符合`http1.0`或`1.1`规范的客户端（如`FIREFOX`，`Chrome`）收到401返回值时，将自动弹出一个登录窗口，要求用户输入用户名和密码。
4. 用户输入用户名和密码后，将用户名及密码以`BASE64`加密方式加密，并将密文放入前一条请求信息中，则客户端发送的第一条请求信息则变成如下内容：
```shell
Get /index.html HTTP/1.0 
Host:www.xianzao.com 
Authorization: Basic d2FuZzp3YW5n
```
> 注：d2FuZzp3YW5n表示加密后的用户名及密码（用户名：密码 然后通过base64加密，加密过程是浏览器默认的行为，不需要我们人为加密，我们只需要输入用户名密码即可）

5. 服务器收到上述请求信息后，将 Authorization 字段后的用户信息取出、解密，将解密后的用户名及密码与用户数据库进行比较验证，如用户名及密码正确，服务器则根据请求，将所请求资源发送给客户端
  
## 示例代码
- 服务端
```javascript
let express = require("express");
let app = express();

app.use(express.static(__dirname+'/public'));

app.get("/Authentication_base",function(req,res){
  console.log('req.headers.authorization:',req.headers)
  if(!req.headers.authorization){
    res.set({
      'WWW-Authenticate':'Basic realm="xianzao"'
    });
    res.status(401).end();
  }else{
    let base64 = req.headers.authorization.split(" ")[1];
    let userPass = new Buffer(base64, 'base64').toString().split(":");
    let user = userPass[0];
    let pass = userPass[1];
    if(user=="xianzao"&&pass="xianzao"){
      res.end("OK");
    }else{
      res.status(401).end();
    }
  }
})

app.listen(8000)
```
- 客户端
```javascript
async authenticaition_base() {
  await axios.post('/Authentication_base')
}
```

优点：
1. 所有流行的网页浏览器都支持基本认证，但基本认证很少在可公开访问的互联网网站上使用，有时候会在小的私有系统中使用（如路由器网页管理接口）；
2. 开发时使用基本认证，是使用Telnet或其他明文网络协议工具手动地测试Web服务器。因为传输的内容是可读的，以便进行诊断；

缺点：
1. 由于用户 ID 与密码是是以明文的形式在网络中进行传输的（尽管采用了 base64 编码，但是 base64 算法是可逆的），所以基本验证方案并不安全，如果没有使用SSL/TLS这样的传输层安全的协议，那么以明文传输的密钥和口令很容易被拦截。该方案也同样没有对服务器返回的信息提供保护；
2. 现在的浏览器保存认证信息直到标签页或浏览器被关闭，或者用户清除历史记录。HTTP没有为服务器提供一种方法指示客户端丢弃这些被缓存的密钥。这意味着服务器端在用户不关闭浏览器的情况下，并没有一种有效的方法来让用户注销；

# session-cookie
`session` 是会话的意思，浏览器第一次访问服务端，服务端就会创建一次会话，在会话中保存标识该浏览器的信息。

- 它与 `cookie` 的区别就是 `session` 是缓存在服务端的，`cookie` 则是缓存在客户端
- 它与 `cookie` 的联系  二者一一对应，这样避免了`cookie`明文存储用户信息的缺点
## 认证过程

1. 服务器在接受客户端首次访问时在服务器端创建`seesion`，然后保存`seesion`(我们可以将`seesion`保存在 内存中，也可以保存在`redis`中，推荐使用后者)，然后给这个`session`生成一个唯一的标识字符串,然后在 `response header` 中种下这个唯一标识字符串；
2. 签名。这一步通过秘钥对`sid`进行签名处理，避免客户端修改`sid`；(非必需步骤)
3. 浏览器中收到请求响应的时候会解析响应头，然后将`sid`保存在本地`cookie`中，浏览器在下次`http`请求的请求头中会带上该域名下的`cookie`信息。
4. 服务器在接受客户端请求时会去解析请求头`cookie`中的`sid`，然后根据这个`sid`去找服务器端保存的该客户端的`session`，然后判断该请求是否合法。

![image.png](https://blog.warmplace.cn/static/img/f130548be8743db34ec7b8aa84021235.image.webp)

## 示例
```javascript
const http = require('http')
//此时session存在内存中
const session = {}

http.createServer((req, res) => {
  const sessionKey = 'sid'
  if (req.url === '/favicon.ico') {
    return
  } else {
    const cookie = req.headers.cookie
    //再次访问，对sid请求进行认证
    if (cookie && cookie.indexOf(sessionKey) > -1) {
      res.end('Come Back')
    }
    //首次访问，生成sid，保存在服务器端
    else {
      const sid = (Math.random() * 9999999).toFixed()
      res.setHeader('Set-Cookie', `${sessionKey}=${sid}`)
      session[sid] = { name: 'xianzao' }
      res.end('Hello Cookie')
    }
  }
}).listen(3000)
```
# Token
token 是一个令牌，浏览器第一次访问服务端时会签发一张令牌，之后浏览器每次携带这张令牌访问服务端就会认证该令牌是否有效，只要服务端可以解密该令牌，就说明请求是合法的，令牌中包含的用户信息还可以区分不同身份的用户。**一般 token 由用户信息、时间戳和由 hash 算法加密的签名构成**。

## 认证流程
1. 客户端使用用户名跟密码请求登录；
2. 服务端收到请求，去验证用户名与密码；
3. 验证成功后，服务端会签发一个 `Token`，再把这个 `Token` 发送给客户端；
4. 客户端收到 `Token` 以后可以把它存储起来，比如放在 `Cookie` 里或者`Local Storage` 里；
5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 `Token`；
6. 服务端收到请求，然后去验证客户端请求里面带着的 `Token（request头部添加Authorization）`，如果验证成功，就向客户端返回请求的数据 ，如果不成功返回`401`错误码，鉴权失败；

## Token和session的区别

1. 认证方式局限于在浏览器中使用，cookie 是浏览器端的机制，如果在app端就无法使用 cookie；
2. 为了满足全局一致性，我们最好把 session 存储在 redis 中做持久化，而在分布式环境下，我们可能需要在每个服务器上都备份，占用了大量的存储空间；
3. 在不是 Https 协议下使用 cookie ，容易受到 CSRF 跨站点请求伪造攻击。

token的缺点：

1. 加密解密消耗使得 `token` 认证比 `session-cookie` 更消耗性能；
2. `token` 比 `sid` 大，更占带宽；

两者对比，它们的区别显而易见：

1. `token` 认证不局限于 `cookie` ，这样就使得这种认证方式可以支持多种客户端，而不仅是浏览器。且不受同源策略的影响；
2. 不使用 `cookie` 就可以规避CSRF攻击；
3. `token` 不需要存储，`token` 中已包含了用户信息，服务器端变成无状态，服务器端只需要根据定义的规则校验这个 `token` 是否合法就行。这也使得 `token` 的可扩展性更强。

# JWT（JSON Web Token）
- 基于 `token` 的解决方案有许多，常用的是JWT，
- `JWT` 的原理是，服务器认证以后，生成一个 `JSON` 对象，
- 这个 `JSON` 对象肯定不能裸传给用户，那谁都可以篡改这个对象发送请求。因此这个 `JSON` 对象会被服务器端签名加密后返回给用户，返回的内容就是一张令牌，以后用户每次访问服务器端就带着这张令牌。
- 这个 `JSON` 对象可能包含的内容就是用户的信息，用户的身份以及令牌的过期时间。

##  JWT的组成部分
在该网站[JWT](https://jwt.io/)，可以解码或编码一个JWT。一个JWT形如：

![image.png](https://blog.warmplace.cn/static/img/b60810bda0d2124a92cd6b8ab25ef13c.image.webp)

它由三部分组成：`Header`（头部）、`Payload`（负载）、`Signature`（签名）

1. `Header`部分是一个JSON对象，描述JWT的元数据。一般描述信息为该Token的加密算法以及Token的类型。`{“alg”: “HS256″,”typ”: “JWT”}`的意思就是，该token使用HS256加密，token类型是JWT。这个部分基本相当于明文，它将这个JSON对象做了一个Base64转码，变成一个字符串。Base64编码解码是有算法的，解码过程是可逆的。头部信息默认携带着两个字段；
2. `Payload` 部分也是一个 JSON 对象，用来存放实际需要传递的数据。一般存放用户名、用户身份以及一些JWT的描述字段。它也只是做了一个Base64编码，因此肯定不能在其中存放秘密信息，比如说登录密码之类的；
3. `Signature`是对前面两个部分的签名，防止数据篡改，如果前面两段信息被人修改了发送给服务器端，此时服务器端是可利用签名来验证信息的正确性的。签名需要密钥，密钥是服务器端保存的，用户不知道。算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用”点”（.）分隔，就可以返回给用户；
## JWT的特点

1. JWT 默认是不加密，但也是可以加密的。生成原始 Token 以后，可以用密钥再加密一次；
2. JWT 不加密的情况下，不能将秘密数据写入 JWT；
3. **JWT 不仅可以用于认证，也可以用于交换信息**。有效使用 JWT，可以降低服务器查询数据库的次数；
4. **JWT 的最大缺点是，由于服务器不保存 session 状态，因此无法在使用过程中废止某个 token**，或者更改 token 的权限。也就是说，一旦 JWT 签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑；
5. **JWT 本身包含了认证信息，一旦泄露，任何人都可以获得该令牌的所有权限**。为了减少盗用，JWT 的有效期应该设置得比较短。对于一些比较重要的权限，使用时应该再次对用户进行认证；
6. **为了减少盗用，JWT 不应该使用 HTTP 协议明码传输，要使用 HTTPS 协议传输**；

# OAuth(开放授权)
**简单说，OAuth 就是一种授权机制。数据的所有者告诉系统，同意授权第三方应用进入系统，获取这些数据。系统从而产生一个短期的进入令牌（token），用来代替密码，供第三方应用使用。**

**令牌与密码的差异**<br />令牌（token）与密码（password）的作用是一样的，都可以进入系统，但是有三点差异。

- **令牌是短期的**，到期会自动失效，用户自己无法修改。密码一般长期有效，用户不修改，就不会发生变化。
- **令牌可以被数据所有者撤销，会立即失效。** 以上例而言，屋主可以随时取消快递员的令牌。密码一般不允许被他人撤销。
- **令牌有权限范围（scope）**，比如只能进小区的二号门。对于网络服务来说，只读令牌就比读写令牌更安全。密码一般是完整权限。

上面这些设计，保证了令牌既可以让第三方应用获得权限，同时又随时可控，不会危及系统安全。这就是 OAuth 2.0 的优点。<br />
注意，只要知道了令牌，就能进入系统。系统一般不会再次确认身份，所以令牌必须保密，泄漏令牌与泄漏密码的后果是一样的。 这也是为什么令牌的有效期，一般都设置得很短的原因。

## 授权分类
OAuth 2.0 对于如何颁发令牌的细节，规定得非常详细。具体来说，一共分成四种授权类型

- **授权码**（authorization code）方式，指的是第三方应用先申请一个授权码，然后再用该码获取令牌。
- **隐藏式** 允许直接向前端颁发令牌。这种方式没有授权码这个中间步骤，所以称为（授权码）"隐藏式"（implicit）
- **密码式** 如果你高度信任某个应用，RFC 6749 也允许用户把用户名和密码，直接告诉该应用。该应用就使用你的密码，申请令牌，这种方式称为"密码式"（password）。
- **凭证式**： 最后一种方式是凭证式（client credentials），适用于没有前端的命令行应用，即在命令行下请求令牌。

## GitHub第三方登录示例（授权码）

![image.png](https://blog.warmplace.cn/static/img/3c222b277de95e9bf0add5ddea2e7ce1.image.webp)

1. 在GitHub中备案第三方应用，拿到属于它的客户端ID和客户端密钥。

在`github-settings-developer settings`中创建一个`OAuth App`。并填写相关内容。填写完成后`Github`会给你一个客户端`ID`和客户端密钥。

![image.png](https://blog.warmplace.cn/static/img/f06e1d1733522f20f9bbd4950f4d1a59.image.webp)

1. 此时在你的第三方网站就可以提供一个Github登录链接，用户点击该链接后会跳转到Github。这一步拿着客户端ID向Github请求授权码code；
```javascript
const config = {
  client_id: 'XXX',
  client_secret: 'XXX'
}

router.get('/github/login', async (ctx) => {
  var dataStr = (new Date()).valueOf();
  //重定向到认证接口,并配置参数
  var path = "https://github.com/login/oauth/authorize";
  path += '?client_id=' + config.client_id;

  //转发到授权服务器
  ctx.redirect(path);
})
```

2. 用户跳转到`Github`，输入`Github`的用户名密码，表示用户同意使用`Github`身份登录第三方网站。此时就会带着授权码`code`跳回第三方网站。跳回的地址在创建该`OAuth`时已经设置好了；
3. 第三方网站收到授权码，就可以拿着授权码、客户端ID和客户端密钥去向`Github`请求`access_token`令牌；
4. `Github`收到请求，向第三方网站颁发令牌；
5. 第三方网站收到令牌，就可以暂时拥有`Github`一些请求的权限，比如说拿到用户信息，拿到这个用户信息之后就可以构建自己第三方网站的`token`，做相关的鉴权操作；
```javascript
router.get('/github/callback', async (ctx) => {
  console.log('callback..')
  const code = ctx.query.code;
  const params = {
    client_id: config.client_id,
    client_secret: config.client_secret,
    code: code
  }
  let res = await axios.post('https://github.com/login/oauth/access_token', params)
  const access_token = querystring.parse(res.data).access_token
  res = await axios.get('https://api.github.com/user?access_token=' + access_token)
  console.log('userAccess:', res.data)
  ctx.body = `
    <h1>Hello ${res.data.login}</h1>
    <img src="${res.data.avatar_url}" alt=""/>
  `
})
```

<div style='display:flex;align-items:center;font-size: 20px;'>
    <hr style='flex:1;font-size: 10px;'>
    &emsp;完结&emsp;
    <hr style='flex:1;font-size: 10px;'>
</div>

补充知识点： 单点登录
- 在企业发展初期，企业使用的系统很少，通常一个或者两个，每个系统都有自己的登录模块，运营人员每天用自己的账号登录，很方便。但随着企业的发展，用到的系统随之增多，运营人员在操作不同的系统时，需要多次登录，而且每个系统的账号都不一样，这对于运营人员来说，很不方便。于是，就想到是不是可以在一个系统登录，其他系统就不用登录了呢？这就是单点登录要解决的问题。
- 单点登录英文全称Single Sign On，简称就是SSO。它的解释是：**在多个应用系统中，只需要登录一次，就可以访问其他相互信任的应用系统。**

![image.png](https://blog.warmplace.cn/static/img/c6c42437395ad5210f73ed3ec46eefd6.image.webp)

要求
1. 登录退出只能在sso系统中进行
2. 子系统与sso系统通信得到登录状态

登录认证机制

![image.png](https://blog.warmplace.cn/static/img/587b8a777d3532189974106fa3393de2.image.webp)

1. 同域名单点登录

cookie 种在 顶级域名下面，  子应用服务器 通过session共享，如Spring-Session

2. 不同域名下的单点登录，现在一般采用auth授权

NodeJS鉴权的五种方案

简单总结了NodeJS相关基础知识



# nodejs是什么
- nodejs本质是一个javascript的解释器（运行环境）。
   - 移植了`chrome V8`引擎，解析和执行代码机制和浏览器js相同，
   - 另外扩展了自己需要的功能（如文件操作、网络、流等）
- nodejs是一个服务器程序
- nodejs不是web服务器

# nodejs三大特征
1. 单线程
   - 优点：系统就不需要有创建线程和销毁的时间的开销，性能更好
   - 缺点： 单线程的阻塞的问题。(一个崩溃了 ，其他的都崩溃了)
2. 非阻塞 I/O
   - I/O阻塞了代码的执行，node就是非阻塞的I/O，在执行完访问数据库的代码之后，将立即执行后面的代码，而不是等待，而是将处理数据的过程放在回调函数中，提高了效率。
   - 与阻塞模式的对比 使线程的利用率是100%
   - 为了处理异步的I/O线程就必须要有事件的循环，不断的检查有没有未处理的事件，依次的予以处理
2. 事件驱动 
   - 一个线程处理了多个事件，采用观察者模式对事件进行调度。


# nodejs优势及用途
- 处理大流量数据
- 适合实时交互的应用
- 完美支持对象数据库
- 异步处理大量并发连接
- 前端工具 `vite`、`webpack`、`gulp`、`babel`
- `SSR`

# 学习资料
- [官网](https://nodejs.org/en/) 
- [中文官网](http://nodejs.cn/)
- 安装教程： [https://www.runoob.com/nodejs/nodejs-install-setup.html](https://www.runoob.com/nodejs/nodejs-install-setup.html)
- 本文写作参考资料 [nodejs教程](https://www.runoob.com/nodejs)
- 开发机器上可以通过 [nvm](https://github.com/nvm-sh/nvm) 切换node版本
- 可以通过[nrm](https://github.com/Pana/nrm)切换npm源
- [npm](https://docs.npmjs.com/about-npm/) js包管理平台， [npm官网](https://www.npmjs.com/)
- [package.json](http://caibaojian.com/npm/files/package.json.html)：是一个用于包的依赖管理文件，项目入口文件类似java的web.xml

包管理器 npm
- 允许用户从NPM服务器下载别人编写的三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。


# nodejs REPL环境
交互式解释器
- ctrl+ c -退出当前终端（输入 `.exit也可以`）。
- ctrl+c按下两次-退出NodeREPL。
- ctrl+d-退出NodeREPL.
- 向上/向下键-查看输入的历史命令
- tab键-列出当前命令
- .help -列出使用命令
- .break-退出多行表达式
- .clear -退出多行表达式
- .save filename -保存当前的Node REPL会话到指定文件
- .loadfilename-载入当前NodeREPL会话的文件内容。

# nodejs回调函数
- 函数调用的方式分为三类：同步调用、回调、异步调用
- 回调是一种双向调用机制
- 可以通过回调函数来实现回调

# nodejs 事件循环
Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现

**事件驱动模型**
![image.png](https://blog.warmplace.cn/static/img/206a776e627d21860e9a2b64397f865d.image.webp)

**阻塞与非阻塞概念**
- 阻塞和非阻塞关注的是程序在等待调用结果(消息， 返回值)时的状态.
- 阻塞就是做不完不准回来
- 非阻塞就是你先做，我现看看有其他事没有，完了告诉我一声



**事件处理代码流程**
1. 引入events对象，创建eventEmitter对象
2. 绑定事件处理程序
3. 触发事件
```javascript
const events = require('events')
const eventEmitter  = new events.EventEmitter()

function connectHanddler () {
  console.log('connected被调用')
}
eventEmitter.on('connect', connectHanddler)
eventEmitter.emit('connect')
```
# nodejs缓冲区与流
JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。处理文件流和处理TCP流（如文件之间传数据），必须使用到二进制数据（IO操作效率高），因此有了Buffer类，该类用来创建一个专门存放二进制数据的缓存区。

Node.js，Stream 有四种流类型：
- **Readable** - 可读操作。
- **Writable** - 可写操作。
- **Duplex** - 可读可写操作.
- **Transform** - 操作被写入数据，然后读出结果。

所有的 Stream 对象都是 EventEmitter 的实例。常用的事件有：
- **data** - 当有数据可读时触发。
- **end** - 没有更多的数据可读时触发。
- **error** - 在接收和写入过程中发生错误时触发。
- **finish** - 所有数据已被写入到底层系统时触发。

写入流、管道流、链式流

# Node.js模块系统
require、module.exports用法<br />
nodejs文件加载逻辑（非常重要）

# nodejs路由
根据request.url 正则处理url路径

# nodejs全局对象
- `global`
- `__dirname`
- `__filename`
- `process`

# nodejs文件系统
nodejs内置模块
- util
- http
- fs
- url
- os
- path
- net
- domain
- 连接mysql


# node 框架
[https://koa.bootcss.com/](https://koa.bootcss.com/)<br />[https://www.expressjs.com.cn/](https://www.expressjs.com.cn/)

# 对比koa2、koa1、express中间件

![image.png](https://blog.warmplace.cn/static/img/5320931dbfb575fcac71adf7795d15f3.image.webp)

![image.png](https://blog.warmplace.cn/static/img/e32527cbd74542b3459b937e1a4136cc.image.webp)


![koa.webp](/static/img/547b4fbf76ac7e69fc564f78e0ad0247.koa.webp)


异同：
- koa基于es6 express 基于es5
- express返回不同类型的数据调用不同的方法，koa则直接设置body即可（respond可以看一下）
- koa更小，不再内置router等
- 与koa不同，express一旦response后面的中间件就不再执行，所以错误处理要放在前面
```javascript
// express
res.json({name: 'zs'})
```

# koa中间件原理
```javascript
// koa 中间件洋葱模型执行流程模拟

async function fn1 (ctx, next) {
  console.log('fn1 start')
  await next();
  console.log('fn1 end')
}
async function fn2(ctx, next) {
  console.log('fn2 start')
  await next();
  console.log('fn2 end')
}

function componse (middlewares) {
  return function (ctx) {
    return dispatch(0)
    function dispatch(i) {
      let fn = middlewares[i]
      if(!fn) {
        return Promise.resolve()
      }
      return Promise.resolve(
        fn(ctx, function next () {
          return dispatch(i + 1)
        })
      )
    }
  }
}

componse([fn1, fn2])({/* ctx */})
// fn1 start
// fn2 start
// fn2 end
// fn1 end
```


nodejs启动服务极简案例
```javascript
const http = require('http');
let server = http.createServer();

server.on('request',(req,res) => {
    res.end('xxx');
});

server.listen(8888,()=>{
  console.log('服务器启动在8888端口');
});
```

NodeJS学习笔记

本文记录一些h5与原生通信的几种方法，bridge的原理，html5+的介绍。



相对原生开发，h5有一些不可替代的优势，如快速开发（跨平台），没有旧版本包袱（立即修复线上问题），会有很多场景通过app内嵌h5的方式进行开发。

然而相对于原生h5的能力自然弱一些，主要表现两个方面：
1. 移动端的一些特性上，如推送、定位、打开设置、语音、视频、支付、拍照、打开三方app、新开webview等，虽然有些能力如 定位、拍照、支付等h5也可以实现，但体验上不及原生；
2. 也是为了提升用户体验需要使用app的能力，如登录、退出登录、获取用户信息、加入购物车、跳转到原生页面等。

这时候就需要h5与原生结合混合开发， 不仅可以提高开发效率，也能增强h5能力，获得相对不错的用户体验。

# H5与原生通信的几种方式

## 1. userAgent
- `android`/`ios` 均可以修改 `navigator.userAgent`
- 一般在原始值的基础上增加一下内容，如表示`app`版本，其他一些重要的标志`id`等也可放进去

## 2. url
- `h5` 可以通过 `location.href = 'appName://method?k=v'`跳转到原生页面，或调用原生方法
- 原生可以通过`url query`参数 把一些重要的信息如`userId`、`token`等传给h5，该方式安全上略差一些
- `android`可以监听`url`变化（如更新原生导航头的需求），`ios`好像无法监控`h5`单页跳转

## 3. bridge通信

# bridge原理
## 原生调用h5方法
与`app`进行协商定义，`H5`暴露全局方法提供给`app`调用。
```javascript
window.sdk = {
    double = value => value * 2,
    triple = value => value * 3,
};
```
android 代码
```java
webview.evaluateJavascript('window.sdk.double(10)', new ValueCallback
    <String>() { @Override public void onReceiveValue(String s) {   
	// 20
  }
});
```
ios代码
```objectivec
NSString  *func = @"window.sdk.double(10)"; 
NSString  *str = [webview stringByEvaluatingJavaScriptFromString:func]; // 20
```
## h5调用原生代码
由 `app` 向 `h5` 注入一个全局 `js` 对象，然后在 `h5` 直接访问这个对象

android
```java
webview.addJavascriptInterface( new Object () {
    @JavascriptInterface 
    public int double (value) {    
        return value * 2;  
    }
    @JavascriptInterface
     public int triple(value) {
      return value *  3 ;
  }
},  "appSdk" );
```
ios
```objectivec
@interface AppSdk : NSObject {}
- ( int )  double :( int )value;
- ( int ) triple:( int )value;
@end
@implementation AppSdk 
- ( int )  double :( int )value {
	return value * 2
}
- (int) triple:(int)value {
    return value * 3;
}
@end
JSContext *context = [webview valueForKeyPath:@ "documentView.webView.mainFrame.javaScriptContext" ];
AppSdk *appSdk = [AppSdk new];
context[@ "appSdk"] = appSdk;
```
javascript 
```javascript
window.appSdk.double(10); 
```
有了h5原生相互通信的能力后，还有一个问题要考虑，就是何时触发，由谁开始呢？

## 简易实现

1. 首先由 `app` 自定义`sheme`协议，比如 `appName://action?params`
2. 然后打开了`webview`页面，`h5`的`js`加载完成后并在合适的时间（比如用户点击了拍照按钮）由`h5`发起一个自定义协议请求，比如 `location.href='appName://double?value=10'`
3. `app` 拦截这个请求后，进行相应的操作，获取返回值
4. 由 `app` 调用 `h5` 中的回调函数，比如 `window.bridge.getDouble(20);`

在第2步中，由于一些原因

- 原生组件永远在h5组件上面，除非原生暴露方法，否则h5无法操作原生组件。如原生`input`输入框， 页面跳转输入框还在，且`h5` 遮罩无法覆盖原生`input`组件
- 希望在h5展示原生组件而不是新开页面

这时候就需要`iframe`上场了, `h5`可以通过移除`iframe`进而移除原生组件。<br />

下面是一个示例
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <title>Document</title>
</head>
<body>
<button id="btn1">扫一扫</button>
<button id="btn2">分享</button>

<script type="text/javascript">
  // invoke.js
  (function (window, undefined) {
      // 调用 schema 的封装
      function _invoke(action, data, callback) {
          // 拼装 schema 协议
          var schema = 'myapp://utils/' + action

          // 拼接参数
          schema += '?a=a'
          var key
          for (key in data) {
              if (data.hasOwnProperty(key)) {
                  schema += '&' + key + data[key]
              }
          }

          // 处理 callback
          var callbackName = ''
          if (typeof callback === 'string') {
              callbackName = callback
          } else {
              callbackName = action + Date.now()
              window[callbackName] = callback
          }
          schema += 'callback=callbackName'

          // 触发
          var iframe = document.createElement('iframe')
          iframe.style.display = 'none'
          iframe.src = schema  // 重要！
          var body = document.body
          body.appendChild(iframe)
          setTimeout(function () {
              body.removeChild(iframe)
              iframe = null
          })
      }

      // 暴露到全局变量
      window.invoke = {
          share: function (data, callback) {
              _invoke('share', data, callback)
          },
          scan: function (data, callback) {
              _invoke('scan', data, callback)
          }
      }
  })(window)
    </script>
<script type="text/javascript">
    document.getElementById('btn1').addEventListener('click', function () {
        window.invoke.scan({}, function () {})
    })
    document.getElementById('btn2').addEventListener('click', function () {
        window.invoke.share({
            title: 'xxx',
            content: 'yyy'
        }, function (result) {
            if (result.errno === 0) {
                alert('分享成功')
            } else {
                alert(result.message)
            }
        })
    })
</script>
</body>
</html>
```
## 观察者模式封装
上述模式存在局限性，h5无法多次监听原声的同一事件，如推送通知、导航头操作等。<br />对于业务来说就的把与该事件有关的逻辑写在同一个回调方法里， 这种方式虽可能，但存在很强的耦合性。

这时候就需要使用观察着模式来接耦。<br />其实质维护一个数组，存储多个回调函数，原生通知的时候遍历数组依次调用每个回调函数。

先来看一个观察者模式
```javascript
let pool = [];

const subscribe = (type, callback, isCapture = false) => {
	pool.push({
		type, callback, isCapture
	});
};

const unsubscribe = (type) => {
	if (typeof type === 'function') {
		pool = pool.filter((o) => o.callback !== type);
	} else {
		pool = pool.filter((o) => o.type !== type);
	}
};

const publish = (type, args) => {
  let isCapture = false;
	pool.filter((o) => o.type === type).forEach((o) => {
    isCapture = o.isCapture
		result = o.callback && o.callback(args);
	});
	return result; // 需要返回给app结果的事件，如阻止webview关闭，阻止页面返回的
};

export const event = { subscribe, unsubscribe, publish };

// 监听 相当于element.addEventListener()
event.subscribe('click', console.log, false)
// 取消监听 相当于element.removeEventListener()
event.unsubscribe('click', console.log, false)
```
修改_invoke方法， 将函数体里面的 callback 方法写死如下
```javascript
window[callbackName] = function() {
	event.publish(callbackName, ...args);
}
```

# HTML5+是什么？
[HTML5+官网](https://www.html5plus.org/#home)

是对`HTML5`的一种扩展，提供一些`API`以满足`webApp`开发的需要。使得`js`可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。
> HTML5 Plus移动App，简称`5+App`，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。
> 
> **HTML5 Plus规范**
> - 通过HTML5开发移动App时，会发现HTML5很多能力不具备。
> - 为弥补HTML5能力的不足，在W3C中国的指导下成立了[www.html5plus.org](http://www.html5plus.org/)组织，推出HTML5+规范。
> - HTML5+规范是一个开放规范，允许三方浏览器厂商或其他手机runtime制造商实现。


更多关于  5+App

- [官网](https://www.html5plus.org/doc/h5p.html)  [5+App学习文档](https://ask.dcloud.net.cn/docs#//ask.dcloud.net.cn/article/89)
- [5+ App开发入门指南](https://ask.dcloud.net.cn/article/89)
- [mui](https://github.com/dcloudio/mui) mui，是mobile ui的全称，它是为5+App而配套推出的开源ui框架

应用：

1. 原生项目中引入5+APP的 SDK 替代bridge 
   1. [HTML5+ SDK功能概述](https://ask.dcloud.net.cn/article/104)（文章末尾有SDK接入的教程链接）
   2. 尽管 HTML5+规范定义了很多非常多的移动端特性的API，但业务总是有特殊性，可能需要写一些原生代码以方便JS调用，完成业务需求 [5+ App开发Native.js入门指南](https://ask.dcloud.net.cn/article/88)
2. 新项目使用5+APP开发  [5+ Runtime](https://www.dcloud.io/runtime.html)

> **5+App是DCloud早期产品，新产品uni-app推出后，从功能、性能、生态全部超越5+App。** <br>
> 但5+App不要求使用vue，使用普通HTML即可开发。<br>
一般商业级项目建议使用uni-app开发。
> [html5plus规范文档](https://www.html5plus.org/doc/h5p.html)<br>
> [对比5+App和uni-app的详细区别](https://ask.dcloud.net.cn/article/37228)



总结:
1. 它是一个跨`iOS`、`Android`的混合开发App解决方案，与`cordova`类似。
2. 它基于`webview`渲染，封装了大量原生能力给`js API`。
3. 加一条个人理解： `5+App`是早期的技术，现在主流的混合开发技术有  `Uni-app`/`React Native`/`Weex`/`Flutter`体验上要优于 `5+APP`与`Cordova`。 **但是早期的技术并不意味者过时或者被淘汰的技术**，只是体验上相对新技术略差一些，相反往往越早诞生的技术，通常是最直接高效解决问题的方式（`5+APP`要比`React Native`开发成本低很多），很多公司都有业务采用APP内嵌h5的开发方式，`5+APP`提供的`bridge`要比很多公司自己封装`bridge`要优秀。技术变现应首要考虑投入产出比。


# 原生可以对webview做些什么？
> 本人最近在做一个IM项目，在两个APP中运行，用户和小哥可以相互聊天，有一个拍照的功能, 考虑成本问题，没有采用bridge方案(bridge要四个人开发呢)，发现在android端存在问题，A app中可以正常拍照，在B app 中却没有反应<br>
> 核心代码如下：
> `<input type="file" capture accept="image/png,..." onchange="change">`<br>
> 经过查阅[资料](https://blog.csdn.net/tao______tao/article/details/114287782)得知android原生可以控制webview的一些权限，于是补一补这块盲区

这里先记录一些学习查阅的链接，以后有做混合开发的项目再去研究
- [混合开发之WebView秘笈](https://cloud.tencent.com/developer/article/1176542)
- [混合开发:android原生webview与H5,js的交互](https://blog.51cto.com/u_15298568/3052894)

- [android Webview文档](https://developer.android.com/reference/android/webkit/WebViewClient)
- [ios wkWebview文档](https://developer.apple.com/documentation/webkit/wkwebview)

h5与原生通信

本文是参考微信小程序官方文档提炼的内容， 个人学习笔记。



1. 小程序技术与web技术很大程度的相似，很多在web上能进行的优化在小程序上同样可以；
2. 研究小程序的性能前，先要深入了解小程序的运行机制；
3. 性能和体验优化可围绕 “加载时机（懒/预）”、“启动or运行”、"空间换时间（缓存）"， “场景”等维度去考虑

# 小程序运行机制
## 启动时
![image.png](https://blog.warmplace.cn/static/img/4081a9323b6a890508bd7b00c19c2c46.image.webp)

## 更新机制
![image.png](https://blog.warmplace.cn/static/img/9d8f1125f9a4dd7f1a584ff050a6dc6d.image.webp)

## 启动中的一些关键节点

- [ ] 1. 环境准备阶段，获取小程序基本信息 &emsp;&emsp;无法优化（微信内部机制）
- [ ] 2. 紧跟小程序基础库更新&emsp;&emsp;无法优化
- [x] 3. 代码拉取&注入阶段&emsp;&emsp;可以优化
- [x] 4. 合适的生命周期函数节点（数据拉取/业务逻辑/渲染）
- [x] 5. Page.onReady事件派发、首屏渲染完成阶段

## 双线程模型
- 视图层有多个，一个页面对应一个视图层
- 逻辑层只有一个，方便状态复用
- 视图层和逻辑层都是沙盒环境
- 视图层本质是`Webview`，使用了`Exparser`框架自定义组件，与`WebComponent`的`ShadowDom`高度相似，区别是`css`不隔离，并内置了一些组件及原生组件，`Exparser`可以在`webview`运行本质是执行了一些`script`垫片， 所以小程序有代码注入阶段一说法。
- 逻辑层也是一个沙盒环境，隔离了一些`window`对象，新增了一些小程序对象（`wx`, `Page`, `Component`）
- 逻辑层和视图层通过`JS bridge`通信，数据序列化传输，这里是一个瓶颈，所以有`setData`优化及`wxs`技术

# 启动阶段性能优化
## 代码拉取阶段 
该阶段既能减少代码下载时间又能减少代码注入的时间
- 分包
   - 单个包`2M`，最多`20M`, 根据具体也如场景进行分包， 如将`tabbar`页面放在主包中
- 独立分包
   - 如果对启动性能有很高的要求，可以将一些 广告、活动页或支付页等相对独立的页面放在独立分包中
- 分包预加载
   - 优点：提高后续操作的体验，缺点：耗费一些流量
- 分包异步化
   - 如果 分包`B`与分包`C`同时依赖一个通用组件 `commonA`，默认会将`commonA`组件打到主包中，更好的方案时将分包共同依赖的组件打包到另一个包中
- `treeSharking` ?  开发者工具会进行`treeSharking`吗? 还是通过通过构建工具进行`treeSharking`? TODO
- 小程序已经内置了`corejs`垫片，所以不需要处理`es6 API`，`babel`只需处理`es6`句法（新语法）
- 控制代码包内的资源文件 
   - 图片视频音频字体等，可以考虑使用cdn

## 代码注入阶段
通常情况下，在小程序启动时，启动页面依赖的所有代码包（主包、分包、插件包、扩展库等）的所有 JS 代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，同时所有页面和自定义组件的 JS 代码会被立刻执行。这造成很多没有使用的代码在小程序运行环境中注入执行，影响注入耗时和内存占用。

- 按需注入 `"lazyCodeLoading": "requiredComponents"`   `app.json` 里面配置
- 用时注入，在按需注入的基础上配置占位元素
- 启动时减少同步API调用
- 启动时避免复杂的运算
- 周期性更新

# 首屏渲染优化
`First Paint`/`First Contentful Paint`

- 使用「按需注入」和「用时注入」
- 初始化渲染缓存		一般用于静态内容的页面
- 骨架瓶				一般用于动态内容，与前者不建议一起使用，只是缓解用户等待的焦虑，事实上还略有增加首屏渲染时间
- 精简首屏数据/提前请求/缓存数据
- 合理规划版本发布（一定程度降低冷启动的时间）
- 数据预拉取

# 运行时优化
## 合理使用setData

- 减少setData频次
- 减少setData数据量，只传渲染更新的最小量数据
- 需要频繁更新的页面元素（例如：秒杀倒计时），可以封装为独立的组件，必要时可以使用 [CSS contain 属性](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)限制计算布局、样式和绘制等的范围。
- 控制后台的`setData`

## 渲染性能优化
- 适当监听页面或组件的`scroll`事件
   - 非必要不监听 `scroll` 事件
   - 在实现与滚动相关的动画时，优先考虑[滚动驱动动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html#%E6%BB%9A%E5%8A%A8%E9%A9%B1%E5%8A%A8%E7%9A%84%E5%8A%A8%E7%94%BB)（仅 [`<scroll-view>`](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)）或 [WXS 响应事件](https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html)
- 选择高性能的动画实现方式
   - 优先使用 `CSS` 渐变、`CSS` 动画、或小程序框架提供的其他[动画实现方式](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)完成动画；
   - 如果上述方式不能满足，可以使用 [WXS 响应事件](https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html) ，减少`callMethod`方法调用
   - `requestAnimationFrame`代替定时器，节流
   - 高频渲染的地方抽取成组件
- 使用 `IntersectionObserver` 监听元素曝光
- 控制 `wxml` 节点数量及层级
- 图片优化
   - 使用图片服务器压缩剪裁图片
   - 图片懒加载
   - 图片定高定宽，避免滥用widthFix/heightFix 模式

## 页面切换优化
非常建议了解下页面切换的执行流程
![image.png](https://blog.warmplace.cn/static/img/0849ea61d13f8f9e36681aeb707cd6d2.image.webp)

从上图可以看出主包及公共代码一定要精简，是对页面切换影响最大的因素。

- 首屏渲染优化
- 提前请求数据，页面之间可以通过 [EventChannel](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#%E9%A1%B5%E9%9D%A2%E9%97%B4%E9%80%9A%E4%BF%A1) 进行通信
- **控制预加载下个页面的时机**

## 内存优化
- 合理使用分包加载， 使用按需注入和用时注入
- web内存泄漏垃圾回收的方法同样适用
   - 未清理的定时器
   - 闭包及时回收
   - 事件监听未及时解绑   wx.offLocationChange

# 特殊场景的优化
- 长列表
- 滚动监听

<div style='display:flex;align-items:center;font-size: 20px;'>
    <hr style='flex:1;font-size: 10px;'>
    &emsp;完结&emsp;
    <hr style='flex:1;font-size: 10px;'>
</div>

以下内容为草稿

微信小程序性能指标

![image.png](https://blog.warmplace.cn/static/img/c055416faaa1f3e69d184276de13623a.image.webp)

> 1. 微信：[微信公众平台-小程序](https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18092610)---[文档](https://developers.weixin.qq.com/miniprogram/dev/index.html)
> 2. 支付宝：[蚂蚁金服开发平台-小程序](https://mini.open.alipay.com/channel/miniIndex.htm)---[文档](https://docs.alipay.com/mini/developer/getting-started)
> 3. 淘宝：[淘宝开发者平台](https://open.taobao.com/?spm=a219a.14658873.1.1.3d0e4dc1qltrH6)---[文档](https://open.taobao.com/doc.htm?docId=73&docType=1)
> 4. 百度：[智能小程序](https://smartprogram.baidu.com/mappconsole/main/login) --- [文档](https://smartprogram.baidu.com/docs/introduction/enter_application/)

微信小程序性能优化

本文写作已有一年半了迁移自老博客。系统梳理了uni-app开发小程序与web开发的异同，踩坑笔记。另外简单介绍了Uniapp框架小程序端的设计思路。



# 官方介绍
> **uni-app理念**
> 1. **为开发者提供免费、高效的开发工具，让天下没有难做的应用**
> 2. **改进应用形态，让用户更方便的获取数字服务**

## 推荐理由
1. **跨平台更多**（开放包容策略）
   1. 真正做到一套代码多端发行
   2. 条件编译优雅的在一个项目中调用不同平台的特色能力，
   3. 可单独针对某个、某几个平台写组件或者页面
   4. `uncloud` 解决小程序云开发跨平台问题
2. **运行体验更好**
   1. 组件、`api` 与微信一致
   2. 兼容`weex`原生渲染
3. **通用技术栈学习成本低**
   1. `vue`的语法微信的`api`
   2. 内嵌`mpvue`
4. **开放生态组件更丰富**
   1. 支持通过`npm`引用第三方包
   2. 兼容`mpvue`组件及项目
   3. `App`端支持和原生混合编码
   4. `DCloud`将发布插件市场

## 与vue的关系
- 使用`vue`语法开发
- 在`h5`端支持`vue`的完整语法
- **在`app`和小程序实现了大部分`vue`语法**

## 与小程序关系
- 组件标签靠近小程序规范
- 应用及页面生命周期使用小程序生命周期，组件使用vue生命周期 
- 接口能力靠近微信小程序规范
- 使用vue语法开发遵循vueSFC规范
   - 数据绑定及事件遵循vue规范
- 多端兼容建议使用**flex布局**[详见这里](https://uniapp.dcloud.io/matter.html#h5-%E5%BC%80%E5%8F%91%E6%B3%A8%E6%84%8F)

## 学习建议
> uni-app并不难学，但我们注意到很多新人在适应各个平台的规则限制时比较急躁。
> 每个端，有每个端的管理规则，这不是uni-app在技术层面上可以抹平的：
> - 比如H5端的浏览器有跨域限制；
> - 比如微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；
> - 比如App端，iOS对隐私控制和虚拟支付控制非常严格；
> - 比如App端，Android、国产rom各种兼容性差异，尤其是因为谷歌服务被墙，导致的push、定位等开发混乱的坑；
> - 如果你的App要使用三方sdk，比如定位、地图、支付、推送...还要遵循他们的规则和限制；
> 
遇事耐心，不急不躁，虽然这不是成功的唯一要素，但它是你技术路上长远走下去的基础。

# 踩坑笔记
> 本人有一年多的`uni-app`开发三端（h5、微信小程序、支付宝小程序），**老实说跨端的坑太多了**，尤其是早期。
> 下面的踩坑总结 也说明**uni-app跨端只做了浅层磨平**。
> 
> 事实上根据uniapp官网文档 [跨端注意](https://uniapp.dcloud.io/matter.html) 、 [非h5端不支持的的vue语法](https://uniapp.dcloud.io/tutorial/vue-components.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8D%E6%94%AF%E6%8C%81%E5%88%97%E8%A1%A8) 这两篇文章的介绍，真正属于`uniapp` 的坑很少，
> 官方文档也只是说了大概，还有很多坑时来自h5与小程序差异的细节（比如`IntersectionObserver`、下拉刷新）


## 样式兼容性问题
准确来说这一块并非`uni-app`问题，以下内容是本人使用uni-app项目开发中遇到的问题。

- `calc`函数    `ios 10`系统不支持， `android`有些低版本也不支持具体版本记不清了
- `position: fixed`
   - 如果父元素增加了`transform`， 然后其子元素`fixed-to-container`便以父元素为参考对象了。这其实也不算是兼容性问题，属于CSS知识点了
   - 设置为`fixed`布局 微信小程序的上拉刷新
- `ios 10` 不支持 `HTMLElement.style`直接赋值，推荐使用`setAttribute`方法
- `autofocus`
   - 在小程序端可以完美的支持 自动聚焦&弹起软键盘
   - 在`h5` `andriod`上会自动聚焦但不会弹软键盘，但如果手动点击过一次，再`focus`方法就可以了
   - 在`h5` `ios`上 既不会自动聚焦也不会弹软键盘，但手动点击过一次后，再调用`focus`方法就可以了
- ios 回弹问题
   - 如果在APP里面，ios可以关闭webview的回弹，但仅仅是最外层
   - h5可以同过hack的方式关闭回弹， 原理是监听scroll设置`overflow：hidden`,在开启scroll
- ios h5页面 双击会滚动到底部 解决方案 [监听touchend事件](https://blog.csdn.net/weixin_38337995/article/details/121637926)
- 刘海问题
   - ios  
      - 11之前的系统没有刘海问题
      - `11.0 ～11.2(不包含)` 使用 `constant`
      - `>=11.2` 使用 `env`
   - `anroid`建议给一个默认高度就好一般`40px`, 或者让`app`提供`bridge`方法获取状态栏高度
- `position:sticky` 在 `android 5~6`系统中存在兼容问题
- ~~小程序上设置样式作用域`scoped`不生效~~ &emsp; (最新测试是有效的)
- `scroll-view`中如果有fixed布局，在ios手机中滚动会出现一些奇怪的渲染问题

## 微信小程序上的兼容问题
- `scroll-view`
   - `scroll-view`区域，不能使用小程序的下拉刷新功能
   - `@scrolltolower` (原生`bindscrolltolower`）事件，滑动过快可能不会触发，可以把`lower-threshold`设置大一点，会缓解很多很多。
- 插槽  小程序上不支持 `v-else-if` `v-else`
- 模版语法方面，小程序上稍弱
   - 小程序上不支持 `:style="customeStyle"`  但是支持 `:style="{height: customeHeight}"`
   - :key不支持表达式
   - `v-for="it in list.slice(0,3)"`   小程序上不支持 ，要这样写 `v-for="it in computedList"`
   - `<comp :text="getText(classes[index])"></comp>`  不支持，要写成 `:test(getText(index))`
- 事件机制
   - 不支持触发多个事件 比如 
   - `{this.$emit('input', 123); this.$emit('select', 123)}`
- `v-show`  微信小程序组件上`v-show`不生效
> `uniapp`官方对组件上`v-show`不支持的解释<br />
> 因为小程序没有`v-show`，只有`if`，<br />
> 另外还有`hidden`这个属性，但这个是作为属性而不是条件控制。<br />所以如果打算生成小程序的话，还是用`v-if`来控制，非要用`v-show`的话，可以自己通过`style`模拟这个效果。

- 小程序对变量赋值`undfined`不会触发刷新  [原因点这里](https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee81299cab83b0086dba4e56c0a)
- `e.preventDefault`  `e.stopPropagation` 不支持条件控制，只能在模版上写死
- `uni.createIntersectionObserver` 该API坑比较多
   - `reactiveToViewport`
      - h5上表现是相对滚动容器会否可见
      - 微信小程序上是相对屏幕（即使被其他元素遮挡了，该API告诉你元素在可见区）
   - `observe`
      - h5上可以调用多次
      - 小程序上只能调用一次

- `easycom`的bug，不支持作用域插槽

## 微信小程序与WebComponts
先来看一个案例<br />
左侧是h5 右侧是 微信小程序<br />
![image.png](https://blog.warmplace.cn/static/img/9ed71fd0e49370397bfe1ab71ab5dde8.image.webp)
之所以渲染的结果不一样 是因为微信小程序的组件使用后了 ShadowDOM（这个差异正式ShadowDom产生的）<br />
解决方案
- 在组件上增加样式 `<testComp class="hack"></testComp>  .hack{width: 100%}`
- 在组件内增加样式 `:host {width: 100%}`

讲道理 如果使用了`ShadowDOM`那么样式应该是隔离的，<br />
事实上确实有部分东西是隔离的如css变量的获取，但组件的样式却不是隔离的，也就是 使用 `.content .test-comp{} `外层可以修改组件样式。

后来看了下微信的文档 ，微信小程序使用的`Exparser`框架，**Exparser的组件模型与WebComponents标准中的ShadowDOM高度相似,但并非完全一致**

补充： 支付宝小程序自定义组件没有使用`WebComponets`技术。

## 支付宝小程序踩坑笔记
- 组件上写`class`不生效
- 多次组件嵌套 多个具名插槽好像不支持
- 不支持作用域插槽
- `my.getSystemInfo` 返回值有属性`screenWidth`是逻辑宽度（物理宽度*像素比DPR）
- `slot`不支持备用插槽
- `@touchmove.stop.prevent`不生效

# 最佳实践
## 生命周期
- 页面上使用小程序声明周期书写业务逻辑（页面不推荐使用vue生命周期否则你会看到h5正常小程序不正常）
- 组件上推荐使用`vue`的生命周期 
- 定时器的使用 在`onShow`开启， 在`onHide` `onUnload`生命周期中销毁
- 定时器推荐写在页面上，因为组件上没有`onShow` `onHide`方法， [详见这里](https://uniapp.dcloud.io/matter.html#h5-%E5%BC%80%E5%8F%91%E6%B3%A8%E6%84%8F)
- `onHide`跳到其它页面触发   `onUnload`在`redirectTo`或`navigateBack`时触发


## 样式
- 样式推荐使用flex布局

## 组件编写
- 模版上别使用复杂的表达式，用方法代替表达式
- 以上踩坑笔记可以借鉴，作为多些写通用代码，通用组件的参考

# uni-app框架原理及优化策略
## 跨平台实现原理图
> 注： 这里是官方文档的两张图，先体会一下。

![image.png](https://blog.warmplace.cn/static/img/e1350a11b0bc4c6c94d5405d6fdf35b7.image.webp)

![image.png](https://blog.warmplace.cn/static/img/f2f8257412140e87b76f6fdc947fee29.image.webp)

总结
- **`uniapp`以微信小程序`API`为基准，把通用的组件和接口都`uni`化了**
- **不能通用的组件及接口则使用条件编译或单独针对该平台书写组件代码**

## uni-app小程序设计思路
`uni-app`是比较传统的小程序框架，包括**编译器和运行时**。<br>
小程序是视图层和逻辑层分开的双线程架构。<br>
那么我们来分析一下使用Vue开发的代码如何在微信小程序上运行呢？

1. 首先对于视图层，必须将vue中的template模版语法转换为小程序的wxml语法，这是唯一方案
2. 对于逻辑层，要使用小程序的路由`page.json`，那么对于uni-app来说就需要多入口打包，生成小程序各页面所需`JS`。这两步是编译器做的事情，除此之外还有css的转换。
3. Vue是响应式的，小程序也是响应式的，那么肯定需要把vue的响应式融入到小程序，这就是uni-app运行时做的事情包含一下内容
    - 不需要VDOM patch函数diff的是数据，调用setData传到是视图层
    - 因为组件使用的是Vue生命周期，这里需要转换为小程序的生命周期
    - 事件也要进行映射（映射关系纪录在wxml文件的标签属性`data-event-opts`上）
4. uni-app小程序框架需要对vue框架进行一些改造，如下图
![image.png](https://blog.warmplace.cn/static/img/71d1d02526b0bd5c0e753ee1237f4223.image.webp)

- `compile`不需要静态标注
- `render`不需要生成`VNode`
- 补丁的生成是直接`diff`，然后`setData`

思路有了，还是建议在 uni-app项目中通过 JavaScript调试终端 运行`npm run build:mp-weixin`命令进行调试， 入口文件是`node_modules/.bin/vue-cli-server`，在这里设置断点。

可以参考这篇文章[《uni-app是如何构建小程序的》](https://juejin.cn/post/6968438754180595742) 边读边调试。好文章在我这里绝不藏着掖着，也绝不照搬抄袭，这里我也偷个懒，以下内容记录我个人的总结，不做深入解读，仅供参考。

## uni-app运行时
uni-app `runtime` 主要做了三件事情
- 数据同步机制
- 事件代理机制
- 生命周期映射

![image.png](https://blog.warmplace.cn/static/img/822b454670e7cc14a6e88b999767d074.image.webp)

## uni-app编译时
- `uni-app` 是基于 `vue-cli` 的扩展
- `vue-cli` 运行会加载 `package` 的 `devDependencies` 对象中 以 `vue-cli-plugin-*` 命名的插件，即加载 `@dcloudio/vue-cli-plugin-uni` 插件
- `vue-cli` 的插件机制在执行插件时会传入两个参数一个是service实例对象（有个plugins属性包含所有插件实例），一个是webpack参数对象，有了这两个参数，`@dcloudio/vue-cli-plugin-uni`可以做任何事情。

`@dcloudio/vue-cli-plugin-uni`做了以下事情
1. 多入口打包
    - 根据参数获取平台信息，找到`lib/mp.js`, `mp.js`会一个新的webpack参数对象，它内部会解析`pages.json`生成多入口对象`process.UNI_ENTRY`，即webpack参数对象的entry属性，`entry: () => process.UNI_ENTRY`
    - 使用`module-alias`修改`template`编译指向，分发个平台
    - `webpack-preprocess-loader` 	处理条件编译
    - `webpack-uni-pages-loader`  		该 `loader` 作用于 `src/pages.json`，解析生成项目及各页面的 `config`，并配合 `wrap-loader` 将转换后的结果引入 `src/main.js` 中
    - `wrap-loader`			自动引入各平台运行时兼容
2. 原`vue-loader`会把`vue`拆分为`template`、`style`、`script`三块内容再分发给不同的`loader`。 `uni-app`则对`vue-loader`的分发进行了更改
```js
{
  resourceQuery: /vue&type=script/,
  use: [{
    loader: '@dcloudio/webpack-uni-mp-loader/lib/script'
  }]
},
{
  resourceQuery: /vue&type=style/,
  use: [{
    loader: '@dcloudio/webpack-uni-mp-loader/lib/style'
  }]
}
{
  resourceQuery: /vue&type=template/,
  use: [{
    loader: '@dcloudio/webpack-uni-mp-loader/lib/template'
  }]
}
```
- `uni-mp-loader/lib/template.js` 把vue模版语法转换为小程序模板语法
- `uni-mp-loader/lib/script.js` 使用babel对js句法翻译，生命周期映射、事件代理等
- `uni-mp-loader/lib/style.js` 多插入一些`nomaliize`样式用于磨平平台差异


vue语法转成小程序语法
- 生命周期转换
- 模版语法转换 
   - 数据绑定  `:key="val"`&emsp;>>	&emsp;`key={{val}}`
   - 显示隐藏 `v-show`/`v-if`&emsp;>>&emsp;`hidden`/`wx:if`
   - 列表渲染 `v-for`&emsp;>>&emsp;`wx:for`
   - 双向数据绑定 `v-model="myModel"`&emsp;>>&emsp;`value={{myModel}}`/`bindinput`/`setData`
   - 取值  `this.key`&emsp;>>&emsp;`this.data.key`
- 事件 & 传参数 
   - `@event`&emsp;>>&emsp;`bindtap="" catchtap=""`
   - 父传子 `:prop`&emsp;>>&emsp;`bind:prop`
   - 子传父 `this.$emit('myevent', data)`&emsp;>>&emsp;`this.triggerEvent('myevent', data)`
   - `$refs`&emsp;>>&emsp;`selectComponent`
- 组件注册 
   - `import`  + `配置components`&emsp;>>&emsp;子组件`component: true` 父组件 配置`useComponents`
- 。。。。。。

此外还有一些loader
- `webpack-preprocess-loader`&emsp;处理条件编译
- `wrap-loader`&emsp;&emsp;自动引入个平台运行时兼容

## 总结
![image.png](https://blog.warmplace.cn/static/img/9f0e93404ff1c9e7217317d4a034c774.image.webp)

# uni-app性能优化
## setData优化
减少调用setData数据量
- 改写了`Vue`的`patch`实现，删掉了`vnode`，仅`Diff Data`数据 （包减少30%）
- `nextTick`机制保证不会重复`setData` 
- 借鉴westore `JSON Diff` 实现高效、精准的差量数据

 差量更新的本质是调用小程序的setData方法(小程序支持setData本身支持细粒度更新)<br />`this.setData({'obj.list.0.name': '细粒度更新'})`

## 其他优化
- 自定义组件实现局部数据刷新

<div style='display:flex;align-items:center;font-size: 20px;'>
    <hr style='flex:1;font-size: 10px;'>
    &emsp;完结&emsp;
    <hr style='flex:1;font-size: 10px;'>
</div>

以下内容为草稿

uniapp项目升级

- `npx @dcloudio/uvm `
- `npx @dcloudio/uvm 3.2.12.20211029`