如何让你的小程序健步如飞
发布时间:2022-07-14发布作者:思讯网络阅读次数:673

前言

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

通过这种技术,可以缩短用户的等待时间,极大地提升用户的使用体验。由于那篇文章并未给出实现方式,只是讲解了技术原理,因此本文就来为大家讲下技术实现方式。

框架优缺点

优点:

  • 预加载下一个页面的数据,提高了页面的加载速度,轻量级的协议(200~300ms左右就能接收到数据)能轻松让小程序页面打开后数据瞬间加载,几乎不出现空页面。

  • 让同种业务的代码保持在一个类中,不会破坏项目结构。

  • 代码量非常少,对原本业务影响非常少。

  • 实现预加载后想删掉预加载?只需在实现的类中删除一个字符串即可。

缺点:

  • 需要你按情况替换setData为$setData

  • 需要开发者非常清楚各情况下的上下文是什么。

  • 如果你的协议非常耗时,达到400ms以上的,使用这种优化方式效果就不明显了。

  • 有网友发现,这个项目无法运行在使用了组件的小程序中,所以大家如果使用了组件的话,就不要直接用这个项目 了。不过还是推荐你吸收下这个项目的思想,毕竟工程师在工作中思想是很重要的。

这里就不为大家展示最终效果了,感兴趣的朋友可以自行尝试下。

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

如何集成

重要声明:我的小程序是遵循ES6标准写的,里面用了class extends及解构赋值等,如果看不懂的话,请学习下ES6!!如果你的项目是用的ES5,那就仔细阅读后续文章,体会预加载技术的核心思想,如果核心思想理解了,分分钟写一个出来,对吧 ~ ~

首先,你要有个基类CommonPage

小程序中的每一个Page类都继承该基类,这样的话才方便统一管理。

比如下面的IndexPage页面

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// 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页面添加跳转按钮。

1

2

3

4

5

<!--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页面添加预加载专用跳转方式。

1

2

3

4

5

6

7

8

9

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:页面路径,支持绝对路径和相对路径。

  • query:需要传递的参数。这是一个object类型的。

  • clazzName:需要跳转的页面的类名。这个介绍SecondPage时再说。

其实你可能会问,既然有path了,为什么还要clazzName?这个问题会在介绍技术原理时详细说,那是下一篇的事儿了。

到这里,如果你也是用ES6的规范来实现类的,可以看到,在IndexPage中,你只需将跳转方式修改为this.$route({path, query, clazzName});即可。

3、给SecondPage页面添加预加载专用的初始化方法。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

// 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时,将clazzName注入,this.$route({path, query, clazzName});中的clazzName名称与其一致即可。

  • 需要在SecondPage中注入新的生命周期函数,也就是预加载方法。在执行this.$route时,你在this.$route中传递的clazzName是什么,这个框架就会自动去找匹配一致的类,调用该类的$onNavigator方法。

  • 在$onNavigator中调用this.$put(key,fun,query)参数分别是键、异步请求方法、异步请求方法的参数。

  • 在异步请求方法将this.setData替换为this.$setData(),使用this.$resolve(data)或者this.$reject(data,error)来回调成功或失败。

  • 在onLoad中使用this.$take(key).then(success,fail)来获取异步结果,分别对应了resolve和reject回调。如果你没有使用预加载,或者预加载失败,那么this.$take(key)方法返回空,由此可以判断是否使用了预加载进入页面!

这么做的话,实现了在跳转前先把下一个页面的协议发出去,而且还让同种业务的代码保持在一个类中,不会破坏项目结构!

在实现了预加载后,如果不想用预加载了,只需要删掉new SecondPage()时注入的clazzName即可!

移动互联网 铸就行业典范

Mobile Internet

  • 微信公众号开发

    以微信公众号为承载平台,打造专属定制化的公众号开发,以良好的用户体验操作体验,形成更具黏性的公众服务号平台。

  • 微信小程序

    无须关注与下载,超载传统的APP应用,实现更轻的应用更快的传播。以更好的UI设计与程序响应速度,将轻应用广泛传播使用。

  • H5营销页

    整合品牌互联化传播理念,从文案策划到页面交互设计,将网媒广告以更直接生动的形式传弟给用户,并最终形成转化与形象记忆。

联系我们,免费获得专属《策划方案》 及报价

集众家所长 · 只为

全流程定制开发,一对一的专业设计,用专业和态度为您提供优质的服务。

免费咨询

在线咨询
在线咨询
电话咨询
400-800-6227
微信咨询