微信小程序页面间的传值方式

最新在学习微信小程序时联想到之前angular，vue在页面间的传值方式。想到小程序的几种页面间传值方式，于是总结了一下。

一.路由带参传值

顾名思义，路由带参传值的方式就是我们需要将所需要传的参数拼接到路由上。我们将这种传值方式分解为两步进行

1.传值

举个栗子：我们要想将A页面的某个值userId传递给B页面，首先我们需要在A页面将userId传递出去，在这里我们用路由参数的形式将参数传递出去

<!--pages/pageA/pageA.wxml-->
<navigator url="../pageB/pageB?user_id='038281831283'" hover-class="navigator-hover">B页面</navigator>

2.接收值

我们在A页面将值传递出去的同时，页面的路由也要发生变化，此时路由栈到了B页面。在接收之前我们需要现在data中定义一下userId这个数据对象。(类似于vue中的$router.params)

data: {
    userId:'',
  },

在B页面执行生命周期函数onLoad的时候我们需要接收一下传递过来的参数。

onLoad: function (options) {
    this.setData({
      userId:options.userId
    })
    console.log(this.data.userId)
  },

二.本地存储（类似于webApp中的localStorage）

关于微信小程序的缓存我们可以访问[小程序-数据存储]（https://developers.weixin.qq.com/minigame/dev/guide/base-ability/storage.html
）了解一下
同样我们分两步进行

1.存数据（A页面）

wx.setStorageSync('userName', 'zhangmingbo')

2.取数据（B页面）

Page({
  data:{
    userName:'',
  },
  onLoad: function(){
   var userName = wx.getStorageSync('userName')
   this.setData({
       userName: userName
    })
  }
})

三.全局app对象（可以理解为angular中的$rootScope）

关于app全局对象我们可以访问[小程序-注册程序]（https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
）了解一下
按部就班我们还是分为两步

1.存数据（A页面）

var app = getApp();
app.userName='zhangmingbo';

2.取数据（B页面）

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

目前作为小程序初学者，我所了解到的页面间传值大概有着几种。如有其他方式，欢迎补充