微信小程序开发在全局配置和资源加载优化在获取接口上的节点信息实战
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上单独配置。

相关内容

热门资讯

如果我们真心相爱 最后我们会在... 如果我们真心相爱 最后我们会在一起吗?爱情这个东西并不是万能的,男女有了爱就够了吗?在绝对真实的感情...
身无彩凤双飞翼,下一句是什么? 身无彩凤双飞翼,下一句是什么?下一句是:心有灵犀一点通。全文如下:无题[ 唐 ] 李商隐原文 译文对...
中国一年中,共有多少个传统节日... 中国一年中,共有多少个传统节日?中国传统节日一年共有11个,分别是:春节、元宵、寒食、清明、端午、七...
文具盲盒引起学生过度消费,盲盒... 文具盲盒引起学生过度消费,盲盒是套路还是惊喜?我觉得如果是因为要买盲盒而过度消费就是不理智的举动,在...
“撒旦“是什么意思? “撒旦“是什么意思?“撒旦”是魔鬼的意思
跪求!肝癌晚期治疗老中医,家在... 跪求!肝癌晚期治疗老中医,家在江苏南通…爸爸是残疾人行动不方便…作广告的请有点良心…开发区有个良春中...
怎么提升孩子专注力? 怎么提升孩子专注力?数字划消法可以改善小学低年级的孩子观察能力不足,阅读或考试时容易出现跳行、漏行、...
鬼王为什么要杀初恋? 鬼王为什么要杀初恋?因为他是鬼王的初恋,她想要留下并保护他们两个共同的孩子。因为他俩之间是真爱,她想...
通天之路大结局了吗 通天之路大结局了吗尚未完结,仍在连载。
就一本小说,男主叫傅庭渊,女主... 就一本小说,男主叫傅庭渊,女主叫洛南初,他俩真是亲兄妹?贫士褚生在荒山被寓居天宁寺的商人子董生搭救。...
求一些想风吹过的街道,超越时空... 求一些想风吹过的街道,超越时空的思念,folwer dance这样的曲子(纯音乐也 可以),越独特的...
吕文扬的樟树亚博美食之旅 江西的初夏,空气中弥漫着淡淡的樟木香气。吕文扬踏上了前往樟树市的列车,作为一名资深美食爱亚博好者,他...
文具盒的介绍 文具盒的介绍文具盒的意思是文具盒里面装着嗯东西,然后外表就是就是一些好看的外表,然后呢然后呢就是要用...
爬山虎属于什么类的植物 爬山虎属于什么类的植物爬山虎属于什么类的植物爬山虎是多年生大型落叶木质藤本植物,属葡萄科。爬山虎属多...
大厦用什么量词 大厦用什么量词大厦用什么量词一栋大厦,一座楼,一幢楼,大厦要用栋幢啊。您什么学历啊一栋大厦用栋
带儿歌《三字经》《弟子规》和现... 带儿歌《三字经》《弟子规》和现代儿歌比较感受如何选择?三字经和弟子规呢,都会传达一些中国传统文化。现...
怎样复制系统到其它电脑? 怎样复制系统到其它电脑?硬盘和硬盘之间的对刻,只刻录C区的话,如果对GHOST工具不是很了解的话,建...
我是菜鸟!寻乐于助人的高手!! 我是菜鸟!寻乐于助人的高手!!我的电脑开机之后相当慢了 但是我系统还原一下以后就很快了 可是...
关于莎士比亚版本 关于莎士比亚版本买国外那个出版商的莎士比亚全集?....没人知道吗有一套《莎士比亚全集》是译林出版社...