|
发布时间：2021-03-15 10:49:32
来源：亿速云
阅读：103
作者：小新
栏目：移动开发 这篇文章给大家分享的是有关怎么让你的小程序健步如飞的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 通过这种技术，可以缩短用户的等待时间，极大地提升用户的使用体验。由于那篇文章并未给出实现方式，只是讲解了技术原理，因此本文就来为大家讲下技术实现方式。 框架优缺点 优点：
缺点：
这里就不为大家展示最终效果了，感兴趣的朋友可以自行尝试下。 如何集成 重要声明：我的小程序是遵循ES6标准写的，里面用了class extends及解构赋值等，如果看不懂的话，请学习下ES6！！如果你的项目是用的ES5，那就仔细阅读后续文章，体会预加载技术的核心思想，如果核心思想理解了，分分钟写一个出来，对吧 ~ ~ 首先，你要有个基类CommonPage 小程序中的每一个Page类都继承该基类，这样的话才方便统一管理。 比如下面的IndexPage页面 // pages/index/index.js
import CommonPage from "../CommonPage";
class IndexPage extends CommonPage {
constructor(...args) {
super(...args);
this.data = {
testStr: this is the firstPage
}
}
onLoad(options) {
}
}
Page(new IndexPage());IndexPage是第一个页面，不需要预加载，SecondPage是第二个页面，我们来模拟下SecondPage的预加载方式。 接下来看到的this.$route() this.$put() this.$take() this.$resolve() this.$reject()等带$符号的都是基类中实现的方法。 1、给IndexPage页面添加跳转按钮。 <!--index.wxml--> <view class="container"> <view bindtap="toSecondPage" hover-class="press-style" class="normal-style" hover-stay-time="100"> 闪电加载第二个页面</view> <view>300毫秒 闪电加载方式</view> </view> 注意：这里添加的class="normal-style" hover-stay-time="100"是非常重要的，如果不添加点击态，会很影响体验。 2、给IndexPage页面添加预加载专用跳转方式。 toSecondPage = function () {
// this.$route是预加载的页面跳转方式，以wx.navigateTo方式跳转。这个方法是在CommonPage中实现的。
this.$route({path: ../second/second, query: {count: 10, title: 这是第二个页面}, clazzName: SecondPage});
// 这是小程序原生的普通加载方式
// wx.navigateTo({
// url: ../second/second?count=10&title=这是第二个页面
// })
}this.$route({path, query, clazzName});这个方法的参数含义是：
其实你可能会问，既然有path了，为什么还要clazzName？这个问题会在介绍技术原理时详细说，那是下一篇的事儿了。 到这里，如果你也是用ES6的规范来实现类的，可以看到，在IndexPage中，你只需将跳转方式修改为this.$route({path, query, clazzName});即可。 3、给SecondPage页面添加预加载专用的初始化方法。 // pages/second/second.js
import CommonPage from "../CommonPage";
class SecondPage extends CommonPage {
constructor(...args) {
//super(...args)一定要写，他会将clazzName与下面的data进行合并。
super(...args);
//这个$init(obj)中注入的obj就是页面初始时的data
super.$init({
arr: []
});
}
$onNavigator(query) {
//这里的query是从this.$route中传递来的query
console.log(闪电️加载时接收到的参数, query);
this.$put(second-data, this.initData.bind(this), query);
};
initData = function (query, resolve, reject) {
//这里的query是在this.$put()中传递过来的
//resolve在协议成功时回调
//reject在协议失败时回调
//模拟网络请求
setTimeout(() => {
if (typeof query.count === "string") {
query.count = parseInt(query.count);
}
this.data.arr.splice(0, this.data.arr.length);
for (let i = 0; i < query.count; i++) {
this.data.arr.push({id: i, name: `第${i}个`, age: parseInt(Math.random() * 20 + i)})
}
this.$setData(this.data);
this.$resolve(this.data);//或者 resolve(this.data);只有调用了resolve或者reject方法，才能在this.$take()的then()方法中获取到值。
}, 300);
};
onLoad(options) {
const lightningData = this.$take(second-data);
if (lightningData) {
lightningData.then((data) => {
//成功回调，resolve(data)调用时触发 data就是resolve传递的参数
this.$setData(data);
},(data, error)=>{
//失败回调，reject(data, error)调用时触发，data和error是reject传递的参数。
});
return;
}
this.initData(options);
}
}
//这里注入的clazzName: SecondPage，与this.$route({path, query, clazzName});中的clazzName名称与其一致即可
Page(new SecondPage({clazzName: SecondPage}));大概是这么几步：
这么做的话，实现了在跳转前先把下一个页面的协议发出去，而且还让同种业务的代码保持在一个类中，不会破坏项目结构! 在实现了预加载后，如果不想用预加载了，只需要删掉new SecondPage()时注入的clazzName即可！ 感谢各位的阅读！关于“怎么让你的小程序健步如飞”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！ |
|
|
