在微信小程序页面间传递数据

在开发微信小程序过程之中，遇到这么一些须要在微信小程序页面之间进行数据的传递的状况，也遇到了开发过程微信小程序限制状况，特此作个总结。

全局变量之中传递参数数据

• 在微信小程序的开发过程之中，须要从A页面跳转到B页面，而且把A页面的数据传递到B页面使用。可使用全局变量使用的方法，微信小程序官方提供app.js全局变量定义文件，里面能够定义须要在全局须要使用的变量与及变量值，例如用户登陆以后，须要在全部页面中使用用户登陆状态等。
• 微信小程序初始化时，首先会加载app.json全局样式配置文件和全局变量文件，例以下面的globalData变量。
• 在app.js定义全局变量后，能够在各页面间直接加载全局变量，小程序提供了getApp()方法，能够直接获取到App({...})这个全局实例对象。

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }，
  //全局变量
  globalData：{
      userInfo：null
    }
    
    })
  //page/index/index
  var app=getApp();//取得全局App({..})实例
  var userInfo=app.globalData.userInfo;//取得全局变量须要的值
复制代码

使用本地缓存的方法保存全局变量,本地缓存是有存储限制的，因此建议手动删除再也不须要的缓存数据。

• 假如在A页面保存须要的信息,以下图就能够直接保存键名为cargo的数据。

var cargo={
    id:'12345',
    count:2,
    name:'xx书籍',
    price:85,
    picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
};
wx.setStorage({
  key:"cargo",
  data:cargo
})
复制代码

• 在B页面直接可使用小程序的wx.getStorage并传入要获取到的键值名就能够获取本地缓存的数据。

wx.getStorage({
  key: 'cargo',
  success: function(res) {
      console.log(res.data)
  } 
})
复制代码

经过在跳转、重定向等转变页面时候，能够直接经过url来传送数据。

• 在A页面传递数据到B页面中使用的时候能够直接使用如下数据。

  //page A
  wx.navigateTo({
    url: 'test?id=1'
  })
  //or page A
  wx.redirectTo({
    url: 'test?id=1'
   })
  // or page A
  wx.reLaunch({
    url: 'test?id=1'
  })
  //page B
  Page({
      onLoad: function(option){
        console.log(option.query)
      }
  })
  复制代码

• wx.navigateTo和wx.redirectTo不能跳转到tabar定义的页面，查看了微信小程序提供了wx.switchTab进行跳转，可是switchTab不能够传递url参数，后面提供了wx.reLaunch函数。
• 往组件模板之中传递数据，能够直接在模板的data-*中传递数据。

<template is="模板名" data="数据对象"/>
复制代码

经过页面栈获取到上一页面对数据进行修改

• 假设从A页面跳转到B页面，而B页面须要对A页面的数据进行修改处理。

//pageA
    page({
       data:{
          user:kiwis
       }
    })
    //pageB
    page({
        updateData:function(){
          var pages=getCurrentPages();
          var prevPage=pages[pages.length-2];
          prevPage.setData({
               user:'LaternKiwis'
           })
        }
    })
复制代码

对于全局变量的，也能够直接经过第三方服务器用数据库进行保存，是要使用的时候直接从数据库里面直接读取全局变量。

• 使用wx.request提交与读取数据

//提交数据给第三方服务器进行插入缓存数据库处理
     wx.request({
        url: 'test.php', //仅为示例，并不是真实的接口地址
        data: {
           username:'kiwis',
            gender:1,
            picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
        },
        method:'POST',
        header: {
          'content-type': 'application/json'
        },
       success: function(res) {
          console.log(res.data)
        }
    })
    //从缓存数据库读取数据
    wx.request({
        url: 'test.php', //仅为示例，并不是真实的接口地址
        data: {
           username:'kiwis'
        },
        method:'GET',
        header: {
          'content-type': 'application/json'
        },
       success: function(res) {
          console.log(res.data)
        }
    })
复制代码

• 在使用url进行参数传递时候，传递数据有字节限制；详情能够查阅微信小程序的文档；在使用url传参数数据时候，若是传送的参数值是一个json数据，要使用JSON.stringify对json对象转换成字符串的形式；在开发小程序过程当中，使用Nodejs获取传递的参数时，没有通过字符串序列化，在后台获取不到参数值，显示为null。因此须要JSON.stringify,而后在后台逻辑之中使用JSON.parse序列化成对象使用。
• 小程序经过wx.navaigaTo跳转到具体的页面，并传递相关联的参数数据过去案例以下，class为item的view绑定了tap事件，传递数据经过data-* 来定义(*是自定义的储存数据变量值，其中的item是真实数据)例如wxml页面以下所示：

<view class="container">
  <view class="item" wx:for="{{items}}" data-video="{{item}}"  bindtap="play">
    <image src="{{item.image_url}}" class="newsPic"></image>
    <view class="source">
      <text>{{item.source}}</text>
      <text class="count">评论 {{item.comments_count}}</text>
    </view>
    <view class="icon" >
      <text>{{item.title}}</text>
      <image src="../../images/{{path}}" class="play"></image>
    </view>
  </view>
  </view>
复制代码

• 在wx的js文件中，经过play事件经过下面的方式传递数据,经过event.currentTarget.dataset获取咱们自定义的video变量:

  play:function(event){
        var video = event.currentTarget.dataset.video;
    console.log(video)
    // this.setData({
    //   path:'play.png'
    // })
    wx.navigateTo({
      url: '../logs/logs?imgUrl=' + video.image_url + '&source_url=' + video["source_url"] + "&title=" + video.title + "&group_id=" + video["group_id"]
    })
   }
  复制代码

• 在要接收上一页面传递过来的数据的页面经过onLoad事件的options参数里面包含了上一页面全部传递过来的参数数据，能够经过下面的方式进行获取。

  onLoad:function(options){
    var that=this
    that.setData({
      imgUrl:options.imgUrl,
      title:options.title,
      videoSrc:options.videoSrc,
      group_id:options["group_id"]
    })
  },
  复制代码