如何让你的小程序飞起来(如何制作小程序)

序

之前看过一篇关于提高小程序应用速度的文章。文章主要讲述了如何实现小程序在触发页面跳转前请求协议，利用200~300ms的短暂时间获取数据并渲染到页面上，从而实现小程序页面中数据的预加载。

通过这项技术，可以缩短用户的等待时间，大大改善用户体验。因为那篇文章没有给出实现方法，只是说明了技术原理，所以这篇文章就给大家讲一下技术实现方法。

框架的优点和缺点

优势:

预加载下一页的数据提高了页面的加载速度，轻量级协议（约200~300ms即可接收数据）可以轻松使数据在小程序页面打开后瞬间加载，几乎不会出现空页面。

将相同业务的代码放在一个类中不会破坏项目结构。

代码量很少，对原有业务影响不大。

实现预加载后想删除预加载吗？只需在实现的类中删除一个字符串。

缺点:

您需要根据需要用$setData替换setData。

开发人员需要非常清楚每种情况的背景。

如果你的协议非常耗时，达到400ms以上，使用这种优化方法的效果并不明显。

有网友发现这个项目不能在使用组件的小程序中运行，所以如果使用组件，就不要直接使用这个项目。但是，建议您吸收这个项目的想法。毕竟，工程师在工作中思考是非常重要的。

这里就不给大家看最终效果了。感兴趣的朋友可以自己尝试一下。

（免费学习视频分享:php视频教程）

如何整合

重要声明:我的小程序是按照ES6标准编写的，该标准使用了类扩展和解构赋值等。如果你不了解它，请学习ES6！！如果您的项目使用ES5，那么请仔细阅读后续文章并体验预加载技术的核心思想。核心思想理解了分分钟写一个对吧~ ~

首先，您应该有一个基类CommonPage。

小程序中的每个页面类都继承了基类，便于统一管理。

例如下面的索引页。

//pages/index/index . js从& quot../common page & quot；；class IndexPage扩展CommonPage {构造函数（...args）{ super（...args）；this . data = { testStr:& amp；#39;这是首页& amp#39;} } onLoad（options）{ } } Page（new index Page（））；IndexPage是第一页，不需要预加载。SecondPage是第二个页面。让我们模拟第二页的预加载方法。

接下来，看这个。$ route（）this。$ put（）this。$ take（）这个。$ resolve（）this。$ reject（）和其他带有$符号的方法都是在基类中实现的方法。

1.向IndexPage页面添加跳转按钮。

& lt！--index . wxml --& gt；& lt视图class = & quot容器&quot& gt& ltview bindtap = & quottoSecondPage&quothover -class = & quot；按-style & quot；class = & quot普通-风格& quothover -stay -time = & quot；100 & quot& gt闪电载入第二页

2.向IndexPage页面添加预加载的特殊跳转模式。

to second page = function（）{//this。$ route是一种预加载的页面跳转模式，它以wx.navigateTo的形式跳转到此方法在CommonPage中实现。这个。$ route（{ path:& amp；#39;../秒/秒& amp#39;查询:{计数:10，标题:& amp#39;这是第二页&；#39;}，clazzName:& amp；#39;第二页& amp#39;});//这是小程序的原生常用加载方式//wx . navigate to（{//URL:&；#39;../秒/秒？计数= 10 & ampTitle=这是第二页&；#39;//}）}这个。$ route（{ path，query，clazz name }）；该方法的参数含义是:

路径:页面路径，支持绝对路径和相对路径。

查询:需要传递的参数。这是一个对象类型。

ClazzName:要跳转到的页面的类名。我们将在介绍SecondPage时讨论这一点

事实上，你可能会问，既然有path，为什么还要clazzName？这个问题将在下一篇文章介绍技术原理时详细讨论。

在这里，如果你也使用ES6的规范来实现类，你可以看到在IndexPage中，你只需要将跳转模式更改为this。$ route（{ path，query，clazz name }）；去做吧。

3.为预加载到第二页添加一个特殊的初始化方法。

//pages/second/second . js从& quot../common page & quot；；类第二页扩展公共页{构造函数（...args）{/super（...args）必须被写入，他将clazzName与以下数据合并。超级（...args）；//这个$ init（obj）中注入的obj是数据超。$ init（{ arr:【】}）；} $ onNavigator（query）{//这里的查询是query console . log（&；#39;闪电加载期间收到的参数&；#39;，查询）；这个。$ put （& amp；#39;第二个-数据和。#39;，this . initdata . bind（this），query）；};init data = function（query，resolve，reject）{//这里的查询是在this中传递的。$ put（）//协议成功时解析回拨//协议失败时拒绝回拨//模拟网络请求settimeout（）=》{ if（type of query . count = = = = & quot；字符串& quot）{ query . count = parse int（query . count）；} this . data . arr . splice（0，this . data . arr . length）；for(设I = 0；我& ltquery.counti++）{ this . data . arr . push（{ id:I，name: ` ${i} th `，age:parse int（math . random（）* 2主机参考I）} } this。$ setdata（this . data）；这个。$ resolve（this . data）；//或者resolve（this . data）；只有在调用resolve或reject方法时，才能在此的then（）方法中获取值。$take（）。}, 300);};onLoad（options）{ const lightning data = this。$ take （& amp；#39;第二个-数据和。#39;);if（lightning data）{ lightning data . then（（data）= & gt；{//回调成功，resolve（data）时触发的数据是参数this。resolve传递的$ setData（data ）;}，（data，error）= & gt；{//失败回调，调用reject（data，error）时触发，数据和错误是reject传递的参数。});返回；} this.initData（选项）；} }//此处注入的ClazzName#39;第二页& amp#39;，还有这个。$ route（{ path，query，clazz name }）；中的clazzName名称与其一致，即page（new second page（{ clazz name:&；#39;第二页& amp#39;}));只需几个步骤:

该类需要将clazzName注入其中。新建时为$ route（{ path，query，clazz name }）；中的clazzName名称与其一致。

你需要在SecondPage中注入一个新的生命周期函数，也就是预加载方法。执行此操作时。$route，您在此传递的别名是什么。$route，框架将自动找到匹配的类并调用该类的$onNavigator方法。

称之为。$onNavigator中的$ put（key，fun，query）参数分别是key、异步请求方法和异步请求方法的参数。

用这个替换this.setData。异步请求方法中的$setData（），并使用此。$resolve（数据）或此。$ reject（data，error）回调成功或失败。

用这个。$ take（键）。然后（success，fail）在onLoad中获取异步结果，分别对应于resolve和reject回调。如果不使用预加载，或者预加载失败，那么这个。$ take（key）方法返回null，可以判断是否使用preload进入页面！

这样做可以在跳转之前将下一页的协议发送出去，并且可以在不破坏项目结构的情况下将相同业务的代码保留在一个类中！

预加载实现后，如果不想使用预加载，只需要删除new SecondPage（）时注入的clazzName即可！

相关推荐:小程序开发教程

这几篇文章你可能也喜欢：

• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）
• 如何在微信小程序中实现购物车功能？（方法介绍）（如何使用微信小程序购物车）
• 如何在小程序中实现下拉刷新页面的功能（小程序滚动-视图下拉更新）
• 如何构建我的小程序开发项目？（教程）（微信小程序开发实用支持资源）

本文由主机参考刊发，转载请注明：如何让你的小程序飞起来(如何制作小程序) https://zhujicankao.com/114558.html