微信小程序开发在全局配置和资源加载优化在获取接口上的节点信息实战

全局配置

应用程序 json 文件用于全局配置微信 applet、确定页面文件的路径、窗口表示、设置网络超时、设置多个选项卡等。有关完整的配置项说明，请参阅 Applet 全局配置以下是一个包含一些常见配置选项 json 的应用程序：

{  "pages": [    "pages/index/index",    "pages/logs/index"  ],  "window": {    "navigationBarTitleText": "Demo"  },  "tabBar": {    "list": [{      "pagePath": "pages/index/index",      "text": "首页"    }, {      "pagePath": "pages/logs/index",      "text": "日志"    }]  },  "networkTimeout": {    "request": 10000,    "downloadFile": 10000  },  "debug": true}

每个小程序页面也可以使用。json 文件以相同名称配置此页面的窗口表示，页面中的配置项将覆盖应用程序 json 窗口中的相同配置项。有关完整的配置项说明，请参阅 applet 页面配置例如：

{  "navigationBarBackgroundColor": "#ffffff",  "navigationBarTextStyle": "black",  "navigationBarTitleText": "微信接口功能演示",  "backgroundColor": "#eeeeee",  "backgroundTextStyle": "light"}

资源加载优化

1.控制图像资源的大小开发者应根据功能要求和实际显示区域的大小选择合适的图像大小、图像格式和压缩比。图片尺寸太大，可能会导致以下后果增加图像下载时间，使用户看到图像的时间延迟；对用户造成不必要的流量消耗；它可能会影响图像解码和渲染的时间消耗，更容易造成帧丢失、干扰或白屏，甚至无法正常滚动和切换页面（尤其是在低端设备上）；内存使用增加，特别是对于大图像和长列表中的大量图像。图片对记忆的影响当 iOS 系统内存不足时，它会主动回收一些 WebViews。大图像和长列表中的大量图像很容易导致系统回收 WebView，导致小程序的空白屏幕。在严重情况下，微信将被触发强制关闭小程序。如果内存增长超过限制，小程序也会出现白屏或黑屏，甚至整个小程序都会闪回。2.避免滥用图像组件的 widthFix/highFix 模式加载图片后，widthFix/highFix 模式将动态更改图片的高度或宽度。图像的高度或宽度的动态变化可能会导致页面内的大量布局重新排列，从而导致页面抖动和结巴。对于页面的背景图像或横幅图像，应尽可能提前指定图像的大小，以避免加载图像后进行二次大小调整。

获取接口上的节点信息

WXML 节点信息节点信息查询 API 可用于获取接口上的节点属性、样式和位置等信息。最常见的用法是使用此界面查询节点的当前位置和界面的滚动位置。示例代码：

const query = wx.createSelectorQuery()query.select('#the-id').boundingClientRect(function(res){  res.top // #the-id 节点的上边界坐标（相对于显示区域）})query.selectViewport().scrollOffset(function(res){  res.scrollTop // 显示区域的竖直滚动位置})query.exec()

在上面的例子中，#theid 是一个节点选择器，它与 CSS 选择器相似，但略有不同。

建议使用自定义组件或包含自定义组件 CreateSelectorQuery 的页面替换 wx CreateSelector 查询，这样可以确保在正确的范围内选择节点。WXML 节点布局交叉点状态节点布局交集状态 API 可用于侦听布局位置中两个或多个组件节点的交集状态。这组 API 通常可以用来推断用户是否可以看到某些节点以及用户可以看到的百分比。这组 API 中涉及的主要概念如下。引用节点：用于侦听的引用节点。其布局区域作为参考区域。如果有多个参考节点，则其布局区域的交点将作为参考区域。页面显示区域也可以用作参考区域之一。目标节点：要侦听的目标。默认情况下，它只能是一个节点（使用 selectAll 选项时，可以同时侦听多个节点）。交点区域：目标节点的布局区域与参考区域之间的交点区域。交点比例：交点面积与参考面积的比例。阈值：如果交集比率达到阈值，将触发侦听器的回调函数。可以有多个阈值。下面的示例代码可以在每次目标节点（由 selector.target 类指定）进入或离开页面显示区域时触发回调函数。

Page({  onLoad: function(){    wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {      res.id // 目标节点 id      res.dataset // 目标节点 dataset      res.intersectionRatio // 相交区域占目标节点的布局区域的比例      res.intersectionRect // 相交区域      res.intersectionRect.left // 相交区域的左边界坐标      res.intersectionRect.top // 相交区域的上边界坐标      res.intersectionRect.width // 相交区域的宽度      res.intersectionRect.height // 相交区域的高度    })  }})

Page({  onLoad: function(){    wx.createIntersectionObserver(this, {      thresholds: [0.2, 0.5]    }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {      res.intersectionRatio // 相交区域占目标节点的布局区域的比例      res.intersectionRect // 相交区域      res.intersectionRect.left // 相交区域的左边界坐标      res.intersectionRect.top // 相交区域的上边界坐标      res.intersectionRect.width // 相交区域的宽度      res.intersectionRect.height // 相交区域的高度    })  }})

响应显示区域中的更改

显示区域大小显示区域是指小程序界面中可以自由显示的区域。默认情况下，小程序显示区域的大小在页面初始化后不会改变。但是，以下两种方法可以更改此默认行为。在手机上启用屏幕旋转支持从 applet 的基本库版本 2.4.0 开始，applet 支持手机屏幕旋转。在 applet 中启用页面以支持屏幕旋转的方法是：在 app 中设置 json 窗口部分的“pageOrientation”：“auto”，或在页面 json 文件中配置“pageOrthority”：“auto”。下面是在单页 json 文件中启用屏幕旋转的示例。

{  "pageOrientation": "auto"}

如果将上述语句添加到页面中，页面将在屏幕旋转时旋转，并且显示区域的大小将随屏幕旋转而改变。从 applet 的基本库版本 2.5.0 开始，pageOrientation 也可以设置为横向，这意味着它固定为水平显示。在 iPad 上启用屏幕旋转支持从 applet 的基本库版本 2.3.0 开始，iPad 上运行的 applet 可以支持屏幕旋转。让 applet 支持 iPad 屏幕旋转的方法是：在 app 中添加“可调整大小”：在 json 中为 true。

{  "resizable": true}

如果小程序添加了上述语句，当屏幕旋转时，小程序将随之旋转，显示区域的大小将随屏幕旋转而改变。注意：页面是否支持屏幕旋转无法在 iPad 上单独配置。