微信小程序之页面传值参值

    很多人在开发小程序包括web的时候,一说到页面传参第一印象就是main.js或app.js,对的,全局变量,如果轻量化的应用用这种方式当然没有问题。但是当你要做一个中大型应用时全局变量的使用就等于慢性死亡。

    所以下面介绍一个微信小程序的库:killglobal,使用简单上手快,功能强大效率高!

    安装:

    npm i killglobal --save

使用:

pages/index/index.js

    import { getWechat } from "killglobal";

    const BasePage = getWechat().page;

    const Router = getWechat().router;

    Page(BasePage({

        data: { },

        onLoad(){ },

        onShow(){ },

        onTapPage1(){ // 跳转到page1

            Router.navigateTo('/pages/page1/index', { onload: 'onload' })

            .withKGData({ kgdata: 'kgdata' })

            .onPage( page => { page.showAlert();  // 执行结果: I'm Page1! });

        },

    }))

pages/page1/index.js

    import { getWechat } from "killglobal";

    const BasePage = getWechat().page;

    const Router = getWechat().router;

    Page(BasePage({

        onKGData(data){

            console.log(params); // 执行结果: { kgdata: 'kgdata' }

        },

        onLoad(params){

            console.log(params);  // 执行结果: { onload: 'onload' }

        }

        showAlert(){

            console.log("I'm Page1!");

        },

    }))

同样在reLaunch、redirectTo甚至是navigateBack的时候也能优雅传参。

Router.navigateTo(path, options);

参数:

path: 跳转的路径

options: 路径后面的参数,拼接到路径后面(/pages/page1/index?a=1&b=2)

.withKGData(obj) 和 onKGData(data)

配合navigateTo、redirectTo、reLaunch、navigateBack函数使用

注意,withKGData的数据和onKGData接收的数据是两个不同的数据,onKGData接收的数据被深拷贝过,防止污染。

onPage(page=>{}) 

配合navigateTo、redirectTo、reLaunch、navigateBack函数使用

在回调中获取跳转目标page的实例

更多参考:killglobal官方文档

你可能感兴趣的:(微信小程序之页面传值参值)