微信小程序实现传参数的几种方法示例

2024-12-02 13:13:36

前言

首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小程序的传参数，话不多说了，来一起看看详细的介绍吧。

一、navigator 跳转时

wxml页面（参数多时可用“&”）

<navigator url='../index/index?id=1&name=aaa'></navigator>

或者添加点击事件，js用navigateTo跳转传参，两种效果一样

 wx.navigateTo({
   url: '../index/index?id=1&name=aaa',
   })

js页面在onLoad里直接获取

 onLoad: function (options) {
  //页面初始化 options为页面跳转所带来的参数
  var id = options.id //获取值
 },

二、全局变量

app.js页面

globalData:{
  id:null
 }

赋值：

var app = getApp();
app.globalData.id = 2

取值：

var app = getApp();
var id = app.globalData.id

三、列表index下标取值

wxml页面

<button bindtap='clickMe' data-id='1'>点击</button>

如果需要传递多个，可以写多个data-[参数]的方式进行传递

js页面

clickMe:function(e){
 var id = e.currentTarget.dataset.id
 console.log(id);
},

注意：通过wxml设置data-[参数名]传递参数，[参数名]只能是小写，不能有大写

四、form表单传值

form表单传值比较简单常用，就不举例了

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

微信小程序数据封装，参数传值等经验分享

微信小程序开发总结: 一: 参数传值的方法 1: data-id 我们可以给HTML元素添加data-*属性来传递我们需要的值,使用方法说明: (1)设置data-id <view class="block" bindtap="playTap" data-id="{{modle.id}}"> (2): 取值 + 传值 playTap:function(e) { const dataset = e.currentTarget.datas
微信小程序之页面跳转和参数传递的实现

微信小程序之页面跳转和参数传递的实现前言: 在微信小程序里面的跳转其实和html里的超链接a差不多,我们实现跳转可以通过标签实现,也可以通过js实现,下面一一演示给大家看一下. 在展示demo前,我们需要先简单的建好项目文件夹做好准备.如下: 标签实现小程序里面有一个类似于a标签的navigator标签,用来做跳转处理. index页面: <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</n
微信小程序开发之数据存储参数传递数据缓存

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(
微信小程序参数传递详解

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
详解微信小程序页面跳转传递参数

微信小程序的页面跳转,页面之间传递参数笔记,具体如下: 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码.  <view class="btn-area"> <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面&
微信小程序 navigator 跳转url传递参数

微信小程序 navigator 跳转url传递参数使用方法说明 (1)传值:在navigator的属性url后拼接?id(参数名字)=要传递的值 (如果多个参数用&分开 &name=value&--.) (2)取值:options 是包含url地址中参数的对象,可以直接点获取. 扩展 JS获取web页面地址栏中的参数. https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&am
微信小程序参数传递实例代码

微信小程序参数传递实例代码 1.通过事件传递参数实例代码: <view data-id="103" bindtap="evenName"></view> Page({ evenName: function(e) { //获得点击事件传递的id console.log(e.target.dataset.id); }) 2.通过页面跳转传递参数页面1: wx.navigateTo({ url: '/pages/scan-order/sca
微信小程序跳转传参数与传对象详解及实例代码

微信小程序跳转传参数传对象微信小程序跳转传参一般都是传字符串到下一页,如果要想传对象怎么办呢? 我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串,再转化为对象.如下: let str=JSON.stringify(e.currentTarget.dataset.item); wx.navigateTo({ url: '../toMybaby/babyDetail/babyDetail?jsonStr='+str, success: function (res) {
微信小程序教程系列之页面跳转和参数传递（6）

关于页面的跳转,微信小程序提供了3种方法: 方法一: 使用API wx.navigateTo()函数示例: 首先先新建一个test页面如何新建页面? 请到先阅读下面教程微信小程序的新建页面 -- 微信小程序教程系列(4) index.wxml: 在index.wxml新建一个button组件,并使用bindtap事件绑定一个函数 index.js: 在index.js中的Page函数内部,添加changeToTest 函数,函数里面使用wx.navigateTo,写上需要跳转的页面,里面
微信小程序实现传参数的几种方法示例

前言首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小程序的传参数,话不多说了,来一起看看详细的介绍吧. 一.navigator 跳转时 wxml页面(参数多时可用"&") <navigator url='../index/index?id=1&name=aaa'></navigator> 或者添加点击事件,js用navig
微信小程序url传参写变量的方法

具体代码如下所示: <navigator url="../../pages/newsDetail/newsDetail?id={{news.id}}"> <view class="list-item"> <view class="little-item"> <view class="left-box"> <image src="{{news.thumb[0]}}&
详解微信小程序的不同函数调用的几种方法

一.调取参数直接调取当前js中的方法, 调取参数that.bindViewTap(); 二.跳转页面 navigateTo: function () { wx.navigateTo({ url: '../page4/page4' }); }, 全局变量使用方法 a.js var app = getApp() Page({ data: { hex1: [], })} //设置全局变量 if (hex1 != null) { app.globalData.hex1 = hex1; } b.js 接
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

本文实例讲述了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data.分享给大家供大家参考,具体如下: 在此之前,小程序获取微信的头像,昵称之类的用户信息,我用的都是wx.getUserInfo,例如: onLoad: function (options) { var that = this; //获取用户信息 wx.getUserInfo({ success: function (res) { console.log(res); that.data.userInfo
微信小程序设置启动页面的两种方法

微信小程序设置启动页面在开发微信小程序的时候,除了tabBar上设置的页面之外,想进入肯定要走跳转之类的进入,但是我们开发的时候肯定想要直接看到该页面,那么我们就需要设置一下启动页面了有两种方法. 方法一在app.json文件中,pages数组,设置在第一个的页面就是默认启动页面,所以你只需要调整你当前开发的页面顺序就好了. 方法二在编译的地方设置,你只需要设置页面的路径,勾选上"使用以上条件编译",如果页面需要参数,那可以把参数也传上.这样启动的就是你设置的页面. 感谢阅读
微信小程序传值取值的几种方法总结

微信小程序传值取值小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%. 列表index下标取值页面传值 form表单取值 1. 列表index下标取值实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1 生成值 <image src="../../../images/icon_delete.png" /><text>删除&l
微信小程序实现实时圆形进度条的方法示例

前言最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧. 效果图如下初始状态点击中间按钮开始绘制绘制过程绘制结束实现思路建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条. WXML代码 <view class="wrap"> <view class="circle-box"> <canvas class
微信小程序跳转页面的两种方法详解

微信小程序跳转页面小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i
微信小程序在{{ }}中直接使用函数的方法示例

前言在微信小程序开发中(原生wxml.wxcss),想直接在{{ }}调用方法处理数据, 但是会报错.如:在项目中涉及到百分比的计算,js浮点数运算会出现精度问题,造成小数位数过多,因此想在模板语法中对值进行相应的处理. 1. 使用 <view>￥{{(money*0.03).toFixed(2)}}手续费(费率3%)</view> 报错,无法直接使用,也不能调用js中的方法. 2. 解决方案既然{{}}中无法调用js中的函数,那该怎么办呢?微信提出了一种新的概念,WXS(We
微信小程序实现点击空白隐藏的方法示例

怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: 1.蒙层的结构:  <view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'> //mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件 <view

微信小程序实现传参数的几种方法示例

相关推荐

随机推荐