微信小程序页面间数据传输

记录一下两个页面之间数据的传输。

要将index里的用户信息数据传给home页面。

index.wxml:

<text class="clickload" bindtap="loadByWechat">点击登录</text>

 index.js

//在index.js的data中声明两个变量用于存放昵称和头像图片的路径
nickName:"",
avatarUrl:"",

//在这个生命周期中将获得到的数据存入缓存和data的变量中
onShow(){
    let userInfo = wx.getStorageSync('userInfo')
    console.log("我的缓存信息",userInfo);
    if(userInfo){
      this.setData({
        loginOk:true,
        nickName:userInfo.nickName,   //从缓存中拿数据
        avatarUrl:userInfo.avatarUrl
      })
    }else{
      this.setData({
        loginOk:false
      })
    }
  },


//绑定到按钮上，点击按钮即可授权登录
//通过路由传参将data里的数据传递给下一个页面
  loadByWechat(){
    wx.getUserProfile({
      desc: '授权登录',
    })
    .then(res=>{
    // console.log("用户允许了微信授权登录!",res.userInfo);
    //注意：此时不能使用 wx.switchTab，不支持参数传递
    wx.navigateTo({
      //将微信头像和微信名称传递给【home】页面
      url: `/pages/home/home?nickName=${res.userInfo.nickName}&avatarUrl=${res.userInfo.avatarUrl}`,
    })
    //保存用户登录信息到缓存
    // wx.setStorageSync('userInfo', res.userInfo);
    })
    .catch(err=>{
      console.log("用户拒绝了微信授权登录",err);
    })
  },


    //退出登录
    exit(){
      wx.showModal({
        content:"确定退出吗"
      }).then(res=>{
        if(res.confirm){
        console.log("用户点击了确定");
        this.setData({
          loginOk:false
        })
        //清空登录的缓存
        wx.setStorageSync('userInfo', res.userInfo)
        }else if(res.cancel){
          console.log("用户点击了取消");
        }
      })
    },

home.wxml

<text type="userNickName">{{nickName}}</text>
<image type="userAvatarUrl" src="{{avatarUrl}}" class="userImg"></image>

home.js

// 像index.js中一样声明两个变量来存放昵称和图片的路径
nickName:"",
avatarUrl:"",

//在页面加载的时候获得数据并放入data中
//这样就可以在home.wxml中使用了
  onLoad(options) {
    this.setData({
      nickName: options.nickName,
      avatarUrl: options.avatarUrl
    });
  },