主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
性能优化类别
对于点击某个页面,触发wx.navigateTo跳转到其他页面的小程序,其间会出现空白加载期(分包,但这是一个内部机制)小程序,没有办法优化,只能跳转到页面,等待这段无趣的时间过去,考虑到第一件事,是不是就不能优化了。 do是数字检索逻辑吗?答案是肯定的。没有办法在检索到当前页面的数据后立即执行跳转操作(这个操作更糟糕),但是仍然可以对当前请求使用缓存。有关详细信息,请参阅之前的博文“Promise 对象的 3 个伟大用途”。
代码为:
const PromiseCache = new Map()export function setCachePromise(key, Promise) { PromiseCache.set(key, Promise)}export function getCachePromise(key) { //根据key获取当前数据 const Promise = PromiseCache.get(key) //当前仅用于转发。还可以添加其他用法。promiseCache.delete(key) return Promise }
创建一个全局Map并使用Map来缓存Promise对象。
导入setCachePromise函数。 (id) { const Promise = // Promise 请求 setCachePromise(`xxx:${id}` , Promise) }, handleBookDetailShow (e) {const id = e.detail this.getBookData(id) wx.navigateTo({url: `xx/xx/x?id=${id}`}) } }})
跳转后的代码也为如下所示:
// 导入 getCachePromise 函数 Component({properties: { id: Number }, Lifetimes: { Attached () { const id = this.data.id // 全局缓存 Promise 获取 const bookPromise = getCachePromise ( ` xxx:${id}`) bookPromise.then((res) => { // 业务处理}).catch(error => { // 错误处理}) } }, method : { getBook() { // 检索数据以方便错误处理、上拉刷新和其他操作。
这样,您就可以同时处理获取和页面加载逻辑。 当然,这是与页面绑定的,因此后续删除或更改不会影响它。 但是,请考虑一下,如果您只是在分包跳转之间添加它,它可以产生积极的效果。
如果你不想打扰,你可以学习和研究更多的微信小程序技巧和wxpage框架,以提高你的应用速度。 同时,考虑到ToC和ToC用户都可能存在硬件和网络环境问题。 ,这个优化还是很有价值的。
当然,为了减少冷启动时间,微信小程序提供了预拉取周期性更新数据的能力。
注:以上解释omiseCache 仅用于转发,不用于缓存。 如果您正在考虑添加缓存,请参阅我之前的博客文章前端 API 请求缓存解决方案。
通知类
如果交互发生在PC端,则数据的CRUD。 例如,如果您在详情页更改或删除了数据,当您返回列表时,您可以直接调用之前保存的列表查询条件重新运行查询。 然而,移动设备的下拉滚动设计并没有提供直接调用之前查询条件的方式。 搜索。
如果从列表页进入详情页,则只能在详情页添加或更改项目。 然后返回列表页面。 这时,你可以通知用户数据发生了变化,他们可以决定是否更新数据。
如果编辑页面数据发生变化:
const app = getApp()component({messages: { async handleSave() { //... app.globalData.xxxChanged = true / / ... } }})
列表接口:
const app = getApp()component({ pageLifetimes: { show() { this.confirmThenRefresh() } }, method: {confirmThenRefresh() { / / 检查globalData,如果当前没有变化则直接返回 if(!app.globalData.xxxChanged) return wx.showModal({ // ...complete: () => { // 检查更新?不管是否有或者不,将数据设置为 false app.globalData。xxxChanged = false } }) } } })
当然,也可以使用wx.setStorage或getCurrentPage来获取上一页的setData进行数据通知,并允许用户刷新页面。
订阅公共类
如果只涉及更改数据,可以选择让用户执行更新操作。 但对于删除操作,如果用户选择不更新,不小心点击了已删除的数据,就会出现错误。 因此,如果需要删除,最好在返回列表页面之前修改列表,以免出现错误。
mitt
github 有许多 pub/sub 开源库。 如果没有特殊需求,代码量最少的库是最好的选择。 作者喜欢开发微型图书馆。 著名的开发boss preact也是这个boss创建的。 我不会在这里讨论太多细节,但它非常简单。 或许大家都能看懂,但代码如下(不包括流程工具检查):
导出默认函数 mitt(all) { all = all Object.create(null); return { on(type, handler) { (all[type] || (all[type] = [])) .push(handler); }, off(type, handler) { if (all[type]) { all[type].splice(all[type].indexOf(handler) >>> 0, 1);发出(类型,evt){(所有[类型] || []).slice().map((handler) => { handler(evt); }); (all['*'] || []).slice().map((handler) => { handler(type , evt); }) ; } };}
只有三种方法:on-emitter 和 off-emitter。
只需将生成的 mitt() 函数生成的对象导入到多个页面中(或直接将其放置在 app.globalData 中)。
Component({ Lifetimes: {attached: function() { // 创建页面时执行 const changeData = (type, data) => { // 处理传入的类型和数据} this._changed =changeDatabus . on ('xxxchanged', this._changed) },detached: function() { // 当页面被销毁时执行bus.off('xxxchanged', this._changed) } }})。
你可以在这里运行 mit。 用于绑定事件的多个页面。 如果你的需求只涉及两个页面,你可以使用wx.navigateTo的EventChannel(页面到页面的事件信息通道)。 更多关于如何在微信小程序中使用wx.navigateTo方法的events参数的细节和场景可以阅读。 这种方案的优点是,传递到下一页的参数也可以通过EventChannel进行信号传递,从而解决了属性不宜太大的情况下传递数据的问题。
注:页面显示如果显示的信息过多,小程序页面会卡住并显示白屏。 官方小程序也有一个长列表组件回收-视图。 如果你愿意的话,你可以自己研究一下,但我不会在这里详细介绍。
鼓励
如果你觉得这篇文章不错,请给我鼓励,帮我star我的github博客。 博客地址
推荐教程:《微信小程序》
PHP快速学习视频免费教程(从入门到精通)
如何学习PHP入门? PHP如何快速学习?不用担心。 这里有简单的 PHP 学习教程(从初学者到专家)。 您可以保存并下载您想学习的朋友。
下载
这几篇文章你可能也喜欢:
- 小程序无法跳转链接怎么办(为什么我的小程序打不开链接?)
- 小程序如何传递页面上的对象数组(向小程序组件传递参数)
- 个人小程序应用开发指南
- 小程序标题是否可以居中(小程序标题栏字体位置设置)
- 微信订阅号可以绑定小程序吗?(我可以使用微信订阅号申请小程序吗?)
本文由主机参考刊发,转载请注明:小程序跨页面交互特点及方法(小程序跨平台) https://zhujicankao.com/123980.html
评论前必须登录!
注册