note

Appearance

基础能力 ​

网络请求 ​

进行网络通信的域名需要审核，域名必须经过 ICP 备案。

网络请求包括：

  • 普通 HTTPS 请求（wx.request）
  • 上传文件（wx.uploadFile）
  • 下载文件（wx.downloadFile)
  • WebSocket 通信（wx.connectSocket）
  • 局域网通讯， UDP（wx.createUDPSocket)，TCP （wx.createTCPSocket)

云托管作为后端服务，可无需配置通讯域名

小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；

存储 ​

wx.setStorageSync
wx.getStorageSync
wx.removeStorageSync
wx.clearStorageSync

文件系统 ​

小程序被用户添加到手机后，会有一块独立的文件存储区域，以用户维度隔离。

临时文件：比如 wx.chooseImage 返回的地址就是临时文件，重启后就可能无法访问了。

本地用户文件：微信提供，拥有完整控制权利。路径为 wx.env.USER_DATA_PATH

示例：write file by USER_DATA_PATH

js
const fs = wx.getFileSystemManager();
fs.writeFileSync(`${wx.env.USER_DATA_PATH}/hello.txt`, "hello, world", "utf8");

Canvas 2D ​

todo https://developers.weixin.qq.com/miniprogram/dev/framework/ability/canvas.html

分包加载 ​

需要注意，uni-app 的 H5 不支持 subPackages！

某些情况下，开发者需要将小程序划分成不同的子包，从而实现 按需加载。

主包：即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本
分包：则是根据开发者的配置进行划分

独立分包：可以独立于主包运行

限制：

  1. 单个分 不能超过 2M
  2. 所有分包 不超过 20M
├── app.js
├── app.json
├── app.wxss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── moduleB
│   └── pages
│       ├── pear
│       └── pineapple
├── pages
│   ├── index
│   └── logs
└── utils
json
{
  "pages": ["pages/index", "pages/logs"],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": ["pages/rabbit", "pages/squirrel"]
    },
    {
      "root": "moduleB",
      "pages": ["pages/pear", "pages/pineapple"],
      "independent": true // 独立分包！
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["moduleA", "moduleB"]
    }
  }
}

独立分包的注意事项 ​

  1. getApp() 可能是 undefined。
    通过 getApp({allowDefault: true}) 可以解决
  2. 没有 APP 的生命周期。 通过： wx.onAppShow、wx.onAppHide、wx.onError、wx.onPageNotFound 完成

分包预下载 ​

preloadRule

分包异步化 ​

基础库版本 2.11.2 或以上

了解一下即可

json
// subPackageA/pages/index.json
{
  "usingComponents": {
    "button": "../../commonPackage/components/button",
    "list": "../../subPackageB/components/full-list",
    "simple-list": "../components/simple-list",
    "plugin-comp": "plugin://pluginInSubPackageB/comp"
  },
  "componentPlaceholder": {
    "button": "view",
    "list": "simple-list",
    "plugin-comp": "view"
  }
}

当 button 为加载完成时候，使用 view 代替

按需注入 ​

用到了才会 import ，避免初始化了不需要的 变量，从而浪费 内存。

json
"lazyCodeLoading": "requiredComponents"

Worker ​

一些异步处理的任务，可以放置于 Worker 中运行，待运行结束后，再把结果返回到小程序主线程。

双方使用 Worker.postMessage() 来发送数据，Worker.onMessage() 来接收数据

app.json

"workers": "某某目录"

如果是分包，需要等待起下载完毕后在使用

js
wx.preDownloadSubpackage({
  packageType: "workers",
  success(res) {
    console.log("load worker success", res);
    var worker = wx.createWorker("workers/request/index.js"); // 创建 worker。 如果 worker 分包没下载完就调 createWorker 的话将报错
  },
  fail(res) {
    console.log("load worker fail", res);
  },
});

自定义 tabBar ​

todo

周期性更新 ​

未打开小程序的情况下，也能从服务器提前拉取数据

登录小程序 MP 管理后台，进入开发管理 -> 开发设置 -> 数据周期性更新，点击“开启”

  • 个人主体小程序 仅支持 云开发
  • 非个人主体小程序 支持 HTTPS 数据下载地址、云开发环境

数据预拉取 ​

在小程序 冷启动 的时，通过 微信后台 提前 向第三方服务器拉取业务数据。

登录小程序 MP 管理后台，进入开发管理 -> 开发设置 -> 数据预加载，点击开启

个人主体小程序 仅支持 云开发

深色模式 / DarkMode ​

大屏适配 ​

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/adapt.html

match-media 媒体相关

row 与 col 组件