小程序开发攻略：授权获取用户信息流程、渲染性能优化

2018-09-0713:19:10APP与小程序开发Comments2,692 views字数 2665阅读模式

授权获取用户信息流程

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

session_key 有有效期，有效期并没有被告知开发者，只知道用户越频繁使用小程序，session_key 有效期越长
在调用 wx.login 时会直接更新 session_key，导致旧 session_key 失效
小程序内先调用 wx.checkSession 检查登录态，并保证没有过期的 session_key 不会被更新，再调用 wx.login 获取 code。接着用户授权小程序获取用户信息，小程序拿到加密后的用户数据，把加密数据和 code 传给后端服务。后端通过 code 拿到 session_key 并解密数据，将解密后的用户信息返回给小程序

面试题：先授权获取用户信息再 login 会发生什么？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

用户授权时，开放平台使用旧的 session_key 对用户信息进行加密。调用 wx.login 重新登录，会刷新 session_key，这时后端服务从开放平台获取到新 session_key，但是无法对老 session_key 加密过的数据解密，用户信息获取失败
在用户信息授权之前先调用 wx.checkSession 呢？wx.checkSession 检查登录态，并且保证 wx.login 不会刷新 session_key，从而让后端服务正确解密数据。但是这里存在一个问题，如果小程序较长时间不用导致 session_key 过期，则 wx.login 必定会重新生成 session_key，从而再一次导致用户信息解密失败。

性能优化

我们知道view部分是运行在webview上的，所以前端领域的大多数优化方式都有用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

加载优化

代码包的大小是最直接影响小程序加载启动速度的因素。代码包越大不仅下载速度时间长，业务代码注入时间也会变长。所以最好的优化方式就是减少代码包的大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

小程序加载的三个阶段的表示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

优化方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

代码压缩。
及时清理无用代码和资源文件。
减少代码包中的图片等资源文件的大小和数量。
分包加载。

首屏加载的体验优化建议文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

提前请求: 异步数据请求不需要等待页面渲染完成。
利用缓存: 利用 storage API 对异步请求数据进行缓存，二次启动时先利用缓存数据渲染页面，在进行后台更新。
避免白屏：先展示页面骨架页和基础内容。
及时反馈：即时地对需要用户等待的交互操作给出反馈，避免用户以为小程序无响应。

使用分包加载优化

在构建小程序分包项目时，构建会输出一个或多个功能的分包，其中每个分包小程序必定含有一个主包，所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本，而分包则是根据开发者的配置进行划分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

优点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

对开发者而言，能使小程序有更大的代码体积，承载更多的功能与服务
对用户而言，可以更快地打开小程序，同时在不影响启动速度前提下使用更多功能

限制：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M

原生分包加载的配置 假设支持分包的小程序目录结构如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

复制代码

开发者通过在 app.json subPackages 字段声明项目分包结构：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

复制代码

分包原则文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到 app（主包）中
app（主包）也可以有自己的 pages（即最外层的 pages 字段
subPackage 的根目录不能是另外一个 subPackage 内的子目录
首页的 TAB 页面必须在 app（主包）内

引用原则文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源

官方即将推出 分包预加载文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

独立分包文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

渲染性能优化

每次 setData 的调用都是一次进程间通信过程，通信开销与 setData 的数据量正相关。
setData 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互。
setData 是小程序开发使用最频繁，也是最容易引发性能问题的。

避免不当使用 setData文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/4461.html

使用 data 在方法间共享数据，可能增加 setData 传输的数据量。。data 应仅包括与页面渲染相关的数据。
使用 setData 传输大量数据，**通讯耗时与数据正相关，页面更新延迟可能造成页面更新开销增加。**仅传输页面中发生变化的数据，使用 setData 的特殊 key 实现局部更新。
短时间内频繁调用 setData，**操作卡顿，交互延迟，阻塞通信，页面渲染延迟。**避免不必要的 setData，对连续的setData调用进行合并。
在后台页面进行 setData，**抢占前台页面的渲染资源。**页面切入后台后的 setData 调用，延迟到页面重新展示时执行。