微信小程序开发在全局配置和资源加载优化在获取接口上的节点信息实战
admin
2024-03-31 13:33:45
0

文章目录

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

全局配置

应用程序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 // 目标节点 idres.dataset // 目标节点 datasetres.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上单独配置。

相关内容

热门资讯

读了七彩虾一文,你觉得可以为老... 读了七彩虾一文,你觉得可以为老年人做些什么事情呢?读了七彩虾一文,你觉得可以为老年人做些什么事情呢?...
一年级学了姓氏歌学到了什么 一年级学了姓氏歌学到了什么更加深入的了解了中国传统文化培养了热爱祖国的真挚情感,姓氏歌让我对中国很多...
EDG打破了四大记录,分别是哪... EDG打破了四大记录,分别是哪四大记录?EDG打破了四大记录,分别是:LPL首位S系列赛首位国产冠军...
男主北冥夜女主慕云瑾是什么小说 男主北冥夜女主慕云瑾是什么小说是《恶魔的点心:宝贝,来伺候!》 作者:凉小桃
戚薇嫁给李承铉婚后生活超幸福,... 戚薇嫁给李承铉婚后生活超幸福,你向往异国恋吗?我一点都不向往异国恋,我觉得两国的文化会有很大的不同,...
南瓜车是什么意思? 南瓜车是什么意思?卡片中文名:南瓜车 等级:3星 卡种:效果怪兽 属性:地属性 种族:植物族 特殊效...
金海心在美丽俏佳人里的那个内弯... 金海心在美丽俏佳人里的那个内弯的短发是什么发型?那个发型确实挺好看的......不过不知道叫什么- ...
我的朋友今年11岁,得了急性淋... 我的朋友今年11岁,得了急性淋巴细胞白血病,想咨询一下儿童急淋一般不需要做移植,单靠化疗就可以治愈,...
分手后女生发家乡红枣树是什么意... 分手后女生发家乡红枣树是什么意思啊祝你以后平安吉祥的意思。红枣树有很多层意思,既然分手了,女朋友发家...
寻求类似斗破的小说 寻求类似斗破的小说凡人修仙传 绝对给力斗医、焚尽八荒、禁血红莲、召唤万岁等等。。。。绝对好看。。...
网络上好看的书籍有哪些? 网络上好看的书籍有哪些?张小娴和亦舒的全部书籍...个人觉得很经典...尤其是张小娴的系列真的是太赞...
为什么说周不疑天生废才? 为什么说周不疑天生废才?三国三国 觉得对他的评价不够妥当周不疑是谁?小说家言,不足以考。
时间をかける 时间をかかる 有... 时间をかける 时间をかかる 有什么区别?请举例说明 顺便打出相应的汉字 谢谢楼主出错了。时间を挂ける...
小燕子为什么要飞回南方? 小燕子为什么要飞回南方?1、燕子是以昆虫为食的,且它们从来就习惯于在空中捕食飞虫,而不善于在树缝和地...
有关汽车 有关汽车在汽车的速度表上,没开之前有两个灯亮:一个是油壶表示什么意思。 还有就是像温度计一样的表是什...
怎么样能更好的经营一个小家庭? 怎么样能更好的经营一个小家庭?遇到事情换位思考!!!两个人爱情保鲜,都想着对方,买点小礼物什么的。当...
含有计数单位的四字成语 含有计数单位的四字成语含有计数单位的四字成语 一日千里yī rì qiān lǐ【解释】原形容马...
成语玩命猜,舟字被水冲走的成语 成语玩命猜,舟字被水冲走的成语顺其自然(顺其自然)shùn qí zì rán[释义] 顺:顺应。...
如何描述一篇文章的故事情节? 如何描述一篇文章的故事情节?第一是时间,年、月、日、时写清楚;第二是地点,要写环境和发生事情的地点....
一闪一闪亮晶晶剧情介绍 一闪一闪亮晶晶剧情介绍 《一闪一闪亮晶晶》讲的是在妇产科两个孩子被调换之后各自找回自己人生的故事。《...