微信小程序之组件的四种传值方式

我们可以利用微信小程序提供的本地存储与进行传值。

传递组件

// 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
('data', {id:1})

接收组件

// 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
('data')

传递组件

// 跳转的同时携带数据拼接在URL后面，跳转到的页面利用onLoad()方法的参数options即可获取到传递的参数
({
     url: `跳转路由?data=${data}`,
})

接收组件

onLoad(option){
    const {data} = option;
    (data)
}

这时因为传递的是对象类型的数据，到另一个页面获取时会发现是"[object,object]"，解决方法是利用()和()

传递数据的组件

const data = ();
({
   url: `跳转url?=${data}`
})

接收数据的组件

onLoad(options){
    const data = (());
}

若是数据中有特殊字符在内，微信中提供的api encodeURIComponent() 和 decodeURIComponent() 会进行截取的操作

传递数据的组件

const data = encodeURIComponent();
({
   url: `跳转url?data=${data}`
})

接收数据的组件

onLoad(options){
    const data = decodeURIComponent();
}

我们也可以从页面路由栈中直接获取目标Page对象，将数据设置到目标页面的data中。

let pages = getCurrentPages();
let prevPage = pages[ - 2]; 
({
     data: 
})

我们同时也可以利用中的 globalData 将数据存储为全局变量，在需要使用的页面通过 getApp().globalData 获取。

App({
    globalData:{
        data: { id : 1 }
    }
})

使用的组件

const data =  getApp().

其他详见：基础 | 微信开放文档

秒客网