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

文章目录

- 全局配置
- 资源加载优化
- 获取接口上的节点信息
- 响应显示区域中的更改

全局配置

应用程序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。