淘小兔

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

全局变量之中传递参数数据 在微信小程序的开发过程之中,需要从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/indexvar 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 Awx.navigateTo({  url: 'test?id=1'})//or page Awx.redirectTo({  url: 'test?id=1' })// or page Awx.reLaunch({  url: 'test?id=1'})//page BPage({    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页面的数据进行修改处理。

//pageApage({   data:{      user:kiwis   }})//pageBpage({    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="/images/2021/07/19/02/2021071902112912610000.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/2021/07/19/02/2021071902113115120001." 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参数里面包含了上一页面所有传递过来的参数数据,可以通过下面的方式进行获取。

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

 

下载仅供下载体验和测试学习,不得商用和正当使用。

下载体验

请输入密码查看内容!

如何获取密码?

 

点击下载