微信小程序开发之页面传取值(数组,对象,字符串)

古城微笑少年丶 2022-05-27 02:11 205阅读 0赞

微信小程序页面的传值取值.

小程序传递参数的方式有三种：

（1）通过在App.js中设置全局变量

（2）通过拼接URL直接传递

（3）通过数据缓存存储再获取

1.app.js

通常把不更改的常量数据放在app.js的Data中,在各个页面都可以通过App实例获取Data的数据.

var app = getApp();
    var data = app.data;

2.wx.navigateTo(\{\})中URL携带参数

wx.navigateTo({
      url: 'test?id=1'
    });

3.数据缓存方式

①wx.setStorageSync(KEY,DATA)存储数据

try {
      wx.setStorageSync('key', 'value')
    } catch (e) {    
    }

②wx.getStorageSync(KEY)获取数据

try {
      var value = wx.getStorageSync('key')
      if (value) {
        // Do something with return value
      }
    } catch (e) {
       // Do something when catch error
    }
    或
    wx.getStorage({
      key: 'key',
      success: function(res) {
         console.log(res.data)
      }
    })

1.  传递String字符串

Page({  
      data: {
        testStr: 'xiaochengxu'
      },
      next: function(e){
        wx.navigateTo({
          url: '/test/test?str='+this.data.testStr
        })
      }
    })

Page({
      onLoad:function(options){  
        console.log("接收到的参数是str="+options.str);  
      }
    })

打印内容：接收到的参数是str=xiaochengxu

2.  传递对象

Page({
      data: {
        testData:{name:'username', password:'password'}  
      },
      next: function(e){
        wx.navigateTo({
           url: '/test/test?testData='+JSON.stringify(this.data.testData)
        })
      }
    })

Page({
      data:{
        testData:null
      },
    onLoad:function(options){
       console.log("接收到的参数是testData="+options.testData);
       this.data.testData = JSON.parse(options.testData);
    }})

打印内容：接收到的参数是testData=\{"name":"username","password":"password"\}

3.  传递数组集合

Page({
      data: {
        list:['item-A','item-B']
      },
      next: function(e){
        wx.navigateTo({
          url: '/test/test?list='+JSON.stringify(this.data.list),
        })
      }
    })

Page({  
      data:{
        list:[]
      },
    onLoad:function(options){
       console.log("接收到的参数是list="+options.list); 
       this.data.list = JSON.parse(options.list);  
    }})

打印内容：接收到的参数是list=\["item-A","item-B"\]

使用的话,就给数组赋值就可以了,看这个示例

onLoad : function (options ) \{

// 页面初始化 options为页面跳转所带来的参数

console .log ( "接收到的参数是list=" \+ options .goodsList );

this .setData (\{

list : JSON .parse (options .goodsList )

\})