快速知悉

• 地理位置接口新增与相关流程调整
• 页面容器 page-container
• 获取更新性能统计信息
• Canvas 画布

1.地理位置接口新增与相关流程调整

点击查看 地理位置接口新增与相关流程调整 公告

1.1 地理位置接口新增说明

由于精确地理位置接口只允许部分类目的小程序申请使用，为了满足开发者在更多场景使用地理位置接口，自基础库 2.25.0 版本起（预计 2022 年 6 月 28 日发布），新增获取模糊地理位置接口（wx.getFuzzyLocation）。同时为保障用户合法权益，该接口调用前需进行准入开通申请，该接口准入规则与 wx.chooseLocation 一致。

wx.getFuzzyLocation 接口说明：

该接口返回的是经过模糊处理的经纬度坐标；

该接口支持返回 wgs84 或 gcj02 两种类型的坐标；

该接口需要用户授权 scope.userFuzzyLocation。

1.2 app.json 的配置指引

为了开发者能够正常使用获取模糊地理位置等接口，以及后续对于代码提审环节的优化（见「1.3 地理位置接口使用流程」），自基础库 2.25.0 版本起（预计 2022 年 6 月 28 日发布），开发者在使用地理位置相关接口时（共计 8 个，见表1），需要提前在 app.json 中进行配置。

1.2.1 需配置的接口列表

表1

1.2.2 配置规则

1）在代码中使用的地理位置相关接口（共计 8 个，见表1），开发者均需要在 app.json 中 requiredPrivateInfos 配置项中声明，代码格式如下：

2）表1中模糊位置信息（序号1）和精确位置信息（序号2-5）是互斥的，即声明了模糊位置信息就无法声明精确位置信息。若同时声明模糊位置信息和精确位置信息，则在编译代码时出现错误；

3）注意：在基础库 2.25.0 版本（预计 2022 年 6 月 28 日发布）后发布的小程序，如果未在 app.json 中声明表1中的相关接口，则小程序调用这些接口（表1）时会出现错误，在基础库 2.25.0 版本前发布的小程序不受影响；

4）对于第三方开发者，需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口，配置规则和普通小程序的配置规则相同。

1.3 地理位置接口使用流程

预计 2022 年 6 月 28 日起，开发者如需在最新版本发布后使用地理位置相关接口，除需完成接口权限开通外，还需在 app.json（或ext.json）配置环节，具体如下：

1.3.1 接口权限开通

以下 6 个接口需完成准入开通流程：wx.getFuzzylocation、wx.getLocation、wx.onLocationChange、wx.chooseAddress、wx.choosePoi、wx.chooseLocation

1）普通开发者：需要在 “小程序管理后台 -「开发」-「开发管理」-「接口设置」” 中完成权限申请；

2）第三方开发者：可通过 apply_privacy_interface 接口完成权限申请。

1.3.2 app.json（或 ext.json）配置

1）普通开发者：需在 app.json 中声明其需调用的地理位置相关接口，具体配置流程见「1.2 app.json 的配置指引」；

2）第三方开发者：需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口（配置方式：可通过 commit 接口配置）。

同时，为了提升开发者体验，平台在代码提审环节会协助开发者对地理位置接口进行检测，如检测出代码中包含未完成准入开通的地理位置接口，平台将再次提醒开发者确认是否需使用相关接口。

1）普通开发者：若无需使用，开发者可在提审时确认不使用该接口，即可正常进行代码提审。小程序审核通过且新版本发布完成后，平台将对小程序确认不使用的接口关闭使用权限；

2）第三方开发者：若无需使用，可在提审时通过参数声明不使用该接口（声明方式：可通过 submit_audit 接口配置），即可正常进行代码提审，审核通过后发布上线，将对其声明不使用的接口关闭使用权限。

以上调整将仅对所有小程序生效。

2.页面容器 page-container

小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

注意事项：

• 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器
• wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面

点击查看 页面容器 官方教程

3.获取更新性能统计信息

点击查看  获取更新性能统计信息  官方文档

如果想要知道 setData 引发界面更新的开销，可以使用更新性能统计信息接口。它将返回每次更新中主要更新步骤发生的时间戳，可以用来大体上估计自定义组件（或页面）更新性能。例如：

Component({
  attached() { // 调用时机不能早于 attached
    this.setUpdatePerformanceListener({withDataPaths: true}, (res) => {
      console.log(res)
    })
  }
})

setUpdatePerformanceListener 方法接受一个 options 对象和回调函数 listener 作为参数。

其中， options 对象包含以下字段：

withDataPaths Boolean 是否返回变更的 data 字段信息

listeners 返回携带一个 res 对象，表示一次由 setData 引发的 更新过程 。根据 setData 调用时机的不同，更新过程大体可以分为三类：

• 基本更新 ，它有一个唯一的 updateProcessId ；
• 子更新 ，它是另一个基本更新的一个子步骤，也有唯一的 updateProcessId ，但还有一个 parentUpdateProcessId ；
• 被合并更新 ，它被合并到了另一个基本更新或子更新过程中，无法被独立统计。

每次成功的 setData 调用都会产生一个更新过程，使得 listener 回调一次。不过 setData 究竟触发了哪类更新过程很难判断，更新性能好坏与其具体是哪类更新也没有必然联系，只是它们的返回值参数有所不同。

注意事项：

• setUpdatePerformanceListener 只会激活当前组件或页面的统计， parentUpdateProcessId 有可能是其他组件或者页面的更新过程 ID 而未被统计回调，如果想要知道页面内所有的更新过程，需要在所有组件中都调用 setUpdatePerformanceListener ；
• 统计本身有一点点开销，如果想要禁用统计，调用 setUpdatePerformanceListener 时传入第二个参数 listener 为 null 即可。

4.Canvas 画布

canvas 组件 提供了绘制界面，可以在之上进行任意绘制。

小程序的 旧版 canvas 接口 已经不再维护，旧版本可参考 旧版画布迁移指南 进行迁移。

基础使用

第一步：在 WXML 中添加 canvas 组件

<!-- 2d 类型的 canvas -->
<canvas id="myCanvas" type="2d" style="border: 1px solid; width: 300px; height: 150px;" ></canvas>

首先需要在 WXML 中添加 canvas 组件。

指定 id="myCanvas" 唯一标识一个 canvas，用于后续获取 Canvas 对象。

指定 type 用于定义画布类型，本例子使用 type="2d" 示例。

第二步：获取 Canvas 对象和渲染上下文

wx.createSelectorQuery()
    .select('#myCanvas') // 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')
    })

通过 SelectorQuery 选择上一步的 canvas，可以获取到 Canvas 对象。

再通过 Canvas.getContext，我们可以获取到 渲染上下文 RenderingContext。

后续的画布操作与渲染操作，都需要通过这两个对象来实现。

第三步：初始化 Canvas

wx.createSelectorQuery()
    .select('#myCanvas') // 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')


        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height


        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)
    })

canvas 的宽高分为渲染宽高和逻辑宽高：

• 渲染宽高为 canvas 画布在页面中所实际占用的宽高大小，即通过对节点进行 boundingClientRect 请求获取到的大小。
• 逻辑宽高为 canvas 在渲染过程中的逻辑宽高大小，如绘制一个长方形与逻辑宽高相同，最终长方形会占满整个画布。逻辑宽高默认为 300 * 150。

不同的设备上，存在物理像素和逻辑像素不相等的情况，所以一般我们需要用 wx.getWindowInfo 获取设备的像素比，乘上 canvas 的渲染大小，作为画布的逻辑大小。

第四步：进行绘制

在开发者工具中预览效果

// 省略上面初始化步骤，已经获取到 canvas 对象和 ctx 渲染上下文


// 清空画布
ctx.clearRect(0, 0, width, height)


// 绘制红色正方形
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);


// 绘制蓝色半透明正方形
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);

通过 渲染上下文 上的绘图 api，我们可以在画布上进行任意的绘制。