微信小程序--跨界面传值

前言

微信小程序现在越来越火爆，几乎在我们生活中的各个角落都能看到小程序的二维码，那么你知道如何在微信小程序中实现跨界面传值嘛

url传值

url可以实现传值，因为它可以携带很多参数在里面。我们可以在url后面加一个?号，后面可以传一些参数进去，多个参数中间用&连接：http://xiaocai.com/skip?para1=‘money’&para2='love’

然后我们再解析**?**号后面的字符串就能拿到传过去的值。

完整案例

本案例演示page1向page2传值，代码cv可用

page1.wxml

<button type="primary" bindtap="skip">点击跳转</button>

page1.js

skip:function(){
    //传数字
    let number=0
    //传字符串
    let str="字符串"
    //传json对象
    let json={
        name:'小王',
        age:18
    }
    //传json数组
    let jsonArray=[{
            name:'小赵',
            age:20
        },{
            name:'小李',
            age:18
     }]
     
    /**
     * url传值只能传字符串或数字，不能直接传json对象
     * 所以要把json,jsonArray转化为字符串传值
     * 当然到另一个界面要把字符串还原成json，jsonArray对象
     */
    let jsonstr=JSON.stringify(json)
    let jsonArraystr=JSON.stringify(jsonArray)
    
    //skipurl换成你要跳转的url
    //ex: ../page2/page2
	wx.navigateTo({
          url: 'skipurl?number='+number+'&str='+str+'&json='+jsonstr+'&jsonArray='+jsonArraystr,
    })
},

page2.js

onLoad: function (options) {
        //接收number
        let number = options.number
        //接收str
        let str = options.str
        //接收json字符串，并将json字符串还原json
        let json=JSON.parse(options.json)
        //接收jsonArray字符串，并将jsonArray字符串还原jsonArray
        let jsonArray=JSON.parse(options.jsonArray)
        //打印接收到的数据
        console.warn("传输数据成功！！")
        console.log(number)
        console.log(str)
        console.log(json)
        console.log(jsonArray)
},

注意：
onLoad函数中可以获取传过去的参数（小程序自动解析url获取?后面各个参数值）
onLoad是生命周期函数，在page中不能出现两次否则只执行第二次出现的onLoad函数（覆盖）
所以上面的代码你要在小程序中onLoad函数里面改，也就是你要复制的是上面代码块中onLoad里面的内容，将它复制到原本小程序固有的onLoad函数里

成功效果

小程序缓存传值

小程序缓存你只要不去清除它，它就一直存到缓存中。所以自然也就能够实现跨界面传值了

写入缓存：

let json={
        name:'小王',
        age:18
}

//把json写入缓存,设置主键test
wx.setStorage({
        data: json,
        key: 'test',
})

读取缓存：

 wx.getStorage({
         key: 'test',
 }).then(res=>{
     console.log('获取缓存成功')
     console.log(res.data)
 }).catch(res=>{
     console.log("404，没有找到缓存")
 })

在一个界面中写入缓存，在另一个界面读取缓存进而实现跨界面传值

app.js传值

利用全局的app.js进行传值，它之所以能传值，是因为所有的js文件都能通过调用const app=getApp()方法来获取到app.js中的值。

app.js

app.js是小程序目录里的文件，不需要你自己去建
下面这段代码演示的是 设置并初始化全局变量

//app.js
App({
  onLaunch: function () {
    
  }
  //设置并初始化全局变量,this指代整个App包含所有page
  //this.globalData指的是App中的变量
    this.globalData = {
         name:'cqg',
         sdept:'web前端'
    }
  }
})

page1.js

演示读取并修改全局变量，app.js里的值

const app=getApp()
console.log("读取全局变量name",app.globalData.name)
console.log("读取全局变量sdept",app.globalData.sdept)
//修改name
app.globalData.name='cqg001'
//修改sdept
app.globalData.sdept='github'

page2.js

演示读取修改后的全局变量

const app=getApp()
console.log("读取修改后的全局变量name",app.globalData.name)
console.log("读取修改后的全局变量sdept",app.globalData.sdept)

总结：我们今天学习了微信小程序跨界面传值方法

如果这篇博文能够帮到您，请点赞+收藏+关注