// 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());

<!--index.wxml-->

<view class="container">

    <view bindtap="toSecondPage" hover-class="press-style" class="normal-style" hover-stay-time="100"> 閃電加載第二個頁面</view>

    <view>300毫秒 閃電加載方式</view>

</view>

toSecondPage = function () {

       // this.$route是預加載的頁面跳轉(zhuǎn)方式，以wx.navigateTo方式跳轉(zhuǎn)。這個方法是在CommonPage中實現(xiàn)的。

       this.$route({path: '../second/second', query: {count: 10, title: '這是第二個頁面'}, clazzName: 'SecondPage'});

       // 這是小程序原生的普通加載方式

       // wx.navigateTo({

       //     url: '../second/second?count=10&title=這是第二個頁面'

       // })

   }

// 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('閃電?加載時接收到的參數(shù)', query);

        this.$put('second-data', this.initData.bind(this), query);

    };

    initData = function (query, resolve, reject) {

        //這里的query是在this.$put()中傳遞過來的

        //resolve在協(xié)議成功時回調(diào)

        //reject在協(xié)議失敗時回調(diào)

        //模擬網(wǎng)絡請求

        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);只有調(diào)用了resolve或者reject方法，才能在this.$take()的then()方法中獲取到值。

        }, 300);

    };

    onLoad(options) {

        const lightningData = this.$take('second-data');

        if (lightningData) {

            lightningData.then((data) => {

                //成功回調(diào)，resolve(data)調(diào)用時觸發(fā) data就是resolve傳遞的參數(shù)

                this.$setData(data);

            },(data, error)=>{

                //失敗回調(diào)，reject(data, error)調(diào)用時觸發(fā)，data和error是reject傳遞的參數(shù)。

            });

            return;

        }

        this.initData(options);

    }

}

//這里注入的clazzName: 'SecondPage'，與this.$route({path, query, clazzName});中的clazzName名稱與其一致即可

Page(new SecondPage({clazzName: 'SecondPage'}));