小程序页面之间传值

Posted 2020-11-23 双鱼座的天蝎

方式一）app.js

app.js是全局对象，每个页面都可以引用这个js，里面的globalData就是存放全局变量。

//app.js
App({
    globalData: {
        appName: ‘旧的名字‘
    }
})

//test.js
const app = getApp();

Page({
    onShow:function(){
        var name=app.globalData.appName;
　　　　　app.globalData.appName=‘新的名字‘;
    }
})    

此方式通常用于系统配置，适用于常量或者不经常变化的变量。

 

方式二）本地缓存

本地缓存非常强大，可以将用户产生的数据做本地的持久化，键值对应，可选择同步或异步读写操作。

wx.setStorage             //异步覆盖key内容
wx.getStorage             //异步获取key内容
wx.removeStorage          //异步移除指定key
wx.clearStorage           //异步清理所有key
wx.getStorageInfo         //异步获取缓存相关信息

wx.setStorageSync         //同步覆盖key内容
wx.getStorageSync         //同步获取key内容
wx.removeStorageSync    　//同步移除指定key
wx.clearStorageSync       //同步清理所有key
wx.getStorageInfoSync     //同步获取缓存相关信息

//pageA.js
var appInfo={
    name:‘旧的名字‘,
    version:‘1.0‘
}
wx.setStorageSync(‘appInfo‘,appInfo);//新增

//pageB.js
var appInfo=wx.getStorageSync(‘appInfo‘);//读取
appInfo.name=‘新的名字‘;
wx.setStorageSync(‘appInfo‘,appInfo);//修改

//删除操作
wx.removeStorageSync({
    key:‘appInfo‘
});

此方式通常用于高频变化的用户变量。

 

方式三）URL

URL传值是传统的古老方式，小程序也支持，只需将参数放在url？后面就可以了

//pageA.js
wx.navigateTo({
      url: ‘/pages/pageB?appname=A&version=1.0‘,
})

//pageB.js
Page({
    onLoad:function(options){
        var appName=options.appname;
        var appVersion=options.version;
    }
})

此方式用于临时性且非敏感数据。

注意：1）url参数不区分大小写    2）在tab页面中（wx.switchTab）不允许参数传值

 

方式四）页面跳转传值

当页面A跳转到页面B，在B页面可以对A页面值进行读取和修改，即子页面操作父页面数据

//pageA.js
Page({
   data:{
        appInfo:{
            appName:‘旧的名字‘,
            version:‘1.0‘
        }
    }
    onLoad:function(options){
        wx.navigateTo({
            url: ‘/pages/pageB‘,
        })
    }
})        

//pageB.js
Page({
    onLoad:function(options){
        var pages=getCurrentPages();
        var pageA=pages[pages.length-2];
        var app=pageA.data.appInfo;
        app.appName=‘新的名字‘;
        pageA.setData({
            appInfo:app
        })
    }
})

此方式用于父子页面传值。即子页面修改父级，修改父父级，修改父父父级。

 

方式五）模板组件

这里只举简单例子，详情参阅小程序官方文档。

//temp.wxml
<template name="appInfo">
    <view>
        <text>name:{{appName}}</text>
        <text>version:{{appVersion}}</text>
    </view>
</template>

//page.wxml
<template is="appInfo" data="{{appInfo}}">

//page.js
Page({
    data:{
        appInfo:{
            appName:‘旧的数据‘,
            version:‘1.0‘
        }
    }
})