微信小程序使用navigateTo数据传递的实例

微信小程序使用navigateTo数据传递的实例

1，传递基本数据类型

index.js 发送页JS

Page({
 data: {
  testStr: '字符串str'
 },
 onLoad: function () {
 },
 next: function(e){
  wx.navigateTo({
   url: '/pages/test/test?str='+this.data.testStr,
  })
 }
})

test.js 接受页JS

Page({
 data:{
 },
 onLoad:function(options){
  console.log("接收到的参数是str="+options.str);
 }
})

打印的Log如下：

接收到的参数是str=字符串str

2，传递对象{}

index.js 发送页JS

Page({
 data: {
  dataObj:{name:'我是name', extra:'我是extra'}
 },
 onLoad: function () {
 },
 toTest: function(e){
  wx.navigateTo({
   url: '/pages/test/test?dataObj='+JSON.stringify(this.data.dataObj)
  })
 }
})

test.js 接受页JS

Page({
 data:{
  dataObj:null
 },
 onLoad:function(options){
  this.dat.dataObj= JSON.parse(options.dataObj);//解析得到对象
 }})

打印的Log如下：

test.js [sm]:16 接收到的参数是obj={“name”:”我是name”,”dataObj”:”我是dataObj”}

3，传递数组集合[]

index.js 发送页JS

Page({
 data: {
  list:['item-A','item-B']
 },
 onLoad: function () {
 },
 next: function(e){
  wx.navigateTo({
   url: '/pages/test/test?list='+JSON.stringify(this.data.list),
  })
 }
})

test.js 接受页JS

Page({
 data:{
  list:[]
 },
onLoad:function(options){
  console.log("接收到的参数是list="+options.list);//此处打印出来的是字符串，解析如下
  this.data.list = JSON.parse(options.list);//解析得到集合
 }})

打印的Log如下：

test.js [sm]:17 接收到的参数是list=[“item-A”,”item-B”]

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml <view class="content"> <view class="sliderContent"> <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" /&

  • 微信小程序 数据绑定及运算的简单实例

    微信小程序 数据绑定的简单实例 简单用法: Page({ data: { message: '张三' } }) /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var content1={ date: "2020年 10月 8日 ", title:"时间群" , nameData:{ name1:"张三李四", name2:"人五人六", }, fade:true/fa

  • 微信小程序url与token设置详解

    微信小程序url与token设置详解

    微信小程序url与token设置详解 新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 define("TOKEN","myToken");// 后台填写的token,在微信公众平台启用 $wechatObj = new wechatAPI(); $wechatObj->isValid(); class wechatAPI { public function isValid()//验证微信接口,验证函数以外的代码和微信公众号开发token

  • 微信小程序之滚动视图容器的实现方法

    微信小程序之滚动视图容器的实现方法

    微信小程序之滚动视图容器的实现方法 直接上两种方案代码以及效果图: 方案1 这种方案是直接使用view,并设置overflow: scroll wxml: <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view> wxss: .con

  • 微信小程序中post方法与get方法的封装

    微信小程序开发post方法与get方法的封装 第一步:在utils文件夹下创建httpUtil.js文件 第二步:创建函数httpPost方法代码如下: function Post(url, data, cb, isShow, showNetError, that, showLoading) { if (showLoading == true || showLoading == undefined){ wx.showNavigationBarLoading(); wx.showLoading({

  • 微信小程序之蓝牙的链接

    微信小程序之蓝牙的链接 微信小程序蓝牙连接2.0说明: 1.本版本区分了ANDROID和IOS系统下蓝牙连接的不同方式. 2.兼容了更多情况下的链接包括: (1)未开启设备蓝牙,当监听到开启了蓝牙后自动开始连接. (2)初始化蓝牙失败后每3000ms自动重新初始化蓝牙适配器. (3)安卓端开启蓝牙适配器扫描失败,每3000ms自动重新开启. (4)IOS端获取已连接蓝牙设备为空,每3000ms自动重新获取. (5)安卓端蓝牙开始链接后中断扫描,连接失败了,重新开始扫描. (6)IOS端开始连接设

  • 微信小程序使用navigateTo数据传递的实例

    微信小程序使用navigateTo数据传递的实例 1,传递基本数据类型 index.js 发送页JS Page({ data: { testStr: '字符串str' }, onLoad: function () { }, next: function(e){ wx.navigateTo({ url: '/pages/test/test?str='+this.data.testStr, }) } }) test.js 接受页JS Page({ data:{ }, onLoad:function(

  • 微信小程序跨页面数据传递事件响应实现过程解析

    这篇文章主要介绍了微信小程序跨页面数据传递事件响应实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面.接下来将我的方案分享给小伙伴. 本次示例采用 uni-app 框架和 weui 样式库 实现思路 创建一个 Emitter,用于事件处理 创建一个 ... 在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面.接下来将我的方案分享给小伙

  • 微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转. 1.js导航 (1).wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id=1' }) 获取传递的值: //test.js Page({ onLoad: function(option){ console.log(option.id)

  • 微信小程序页面间值传递的两种方法

    微信小程序页面间值传递的两种方法

    一:url带参数传递 与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面. index.wxml: <!--index.wxml--> <view class="container"> <!-- 使用navigator组件 --> <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator>

  • 微信小程序遇到修改数据后页面不渲染的问题解决

    微信小程序遇到修改数据后页面不渲染的问题解决 前言: 去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的. 唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,

  • 微信小程序 定义全局数据、函数复用、模版等详细介绍

    微信小程序 定义全局数据.函数复用.模版等问题总结: 1.如何定义全局数据 在app.js的App({})中定义的数据或函数都是全局的,在页面中可以通过var app = getApp();  app.function/key的方式调用,不过我们没有必要再app.js中定义全局函数. 2.如何实现代码的复用 函数的复用: test.js test: function(){ } module.exports={ test:test } other.js var common = require('

  • 微信小程序本地缓存数据增删改查实例详解

    微信小程序本地缓存数据增删改查实例详解 数据如: var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || []); // 更改 developer.name = 'Lion01'; wx.setStorageSync('user', user); // 删除 wx.removeSt

  • 150行代码带你实现微信小程序中的数据侦听

    在小程序项目中, 我们的通常会使用到使用到一个全局对象作为各个页面通用的数据存储容器, 将它绑定到app对象后, 就能在每一个页面都自由的操纵这个对象. 然而在实践中, 由于这个对象及其属性不具备响应式条件, 它不能直接参与业务逻辑的编写, 能力仅仅局限于数据储存. 若是在VueJS项目中, 我们可能经常使用到 Vue.$watch 去侦听某个数据是否发生变化, 小程序却缺乏这种能力. 在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器(下简称VX): // 一个快

  • 微信小程序中的数据存储实现方式

    目录 全局变量globalData 页面私有变量 data storage 异步存储(根据设备性能的不同,你还真不知道他会存多久) 同步存储(会造成阻塞~) 文件存储 fileSysteManager 写入: 读取 移除 全局变量globalData 在最初创建小程序时,app.js文件中App方法中传入的对象里面默认添加了globalData参数.在所有的页面中我们都可以通过getApp方法获取到这个App方法传入的对象,进而拿到其中的globalData. const App = getAp

  • 微信小程序实现商品数据联动效果

    微信小程序实现商品数据联动效果

    微信小程序实现商品数据联动 直接复制代码更改可以看出效果,然后根据自己想要进行调整 注: 以下商品图片用于测试,如有侵权请通知,会删除相关图片. js部分: // pages/demo1/demo1.js //存放右侧分类的高度累加数组 var heightList = []; //记录scroll-view滚动过程中距离顶部的高度 var distanceToTop = 0; Page({ /** * 页面的初始数据 */ data: { curActive: 0, //当前选中项 produ

随机推荐