微信小程序参数传递

一、input输入框值获取传递

 <input bindinput='getInputValue'  value="{{inputTxt}}" placeholder='请输入' />

取值

getInputValue(e){this.setData({inputCode: e.detail.value})

其中value="{{inputTxt}}重置的时候用到的

 reset(){this.setData({inputTxt:'',inputCode:""})},

二、Form表单获取输入值传递
第一步、添加 from 控件，并为其指定 bindsubmit 属性值。
第二步、添加输入控件到 form 中，并为其指定 name 属性值。
第三步、添加 button 控件，并为其指定 form-type=“submit”。
第四步、在 js 中取值时，用 e.detail.value.xxx 或 e.detail.value[“xxx”]，其中 xxx 为 name 属性值。

.wxml

 <form bindsubmit='formSubmit' bindreset="formReset"><view ><input class="input" type="text" name="inputCode" placeholder='请输入：'/>
<view>兴趣：<checkbox-group name="cb"><label><checkbox value="A" />乒乓球</label><label><checkbox value="B" checked="false" />羽毛球</label><label><checkbox value="C" checked="{{checked}}" />排球</label></checkbox-group></view><view>级别：<radio-group name="r"><label><radio value="a" />初级</label><label><radio value="b" />中级</label><label><radio value="c" />高级</label></radio-group></view><view><button class="submit_btn" type="primary" form-type='submit'>保  存</button><button class="reset_btn" type="default" form-type='reset'>重  置</button></view>
</form>

.wxss

  formSubmit: function (e) {var that = this;console.log(e.detail.value);var inputCode= e.detail.value.inputCode;if (inputCode!=null&&inputCode!="") {wx.showToast({title: e.detail.value["cb"].join(","),icon: "success",duration: 2000});wx.navigateTo({url: ""})} else {wx.showToast({title: '请输入正确bian号',icon:'none'})}},

input 的取值如前面所述，用 e.detail.value.xxx 或 e.detail.value[“xxx”]，其中 xxx 为 name 属性。

checkbox 的取值也是类似 input，不过 xxx 为 checkbox-group 的 name，取出来的值是数组，由选中项的 value 组成，比如选中了“乒乓球”、“排球”，结果就是：[“1”, “3”]。特别说明，这个顺序与我们选择的先后有关，比如我们先选择“排球”，再选择“乒乓球”，结果就是[“3”, “1”]。

radio 的取值和 input 一样，返回的是选中的那一项的 value，没有选中项就是 “”。

三、navigator跳转传递

 <navigator url="../or/or?orId={{item.id}}" class="btn">详情</navigator>

直接在目标跳转页面，onLoad里直接获取

onLoad: function (options) {console.log(options.orId)},

四、全局变量传递
app.js

  globalData: {phone: "",},

赋值

var app = getApp();app.globalData.phone= "110";

取值

var app = getApp();
var userId  = app.globalData.phone

五、列表index下标取值
data-[参数]的方式进行传递,下面以充值金额表格为例：
.wxml

  <view class="item-num"><view class="{{money==10 ? 'num1 checked' : 'num1'}}" data-amount="10" bindtap="choose">100元</view><view class="{{money==20 ? 'num checked' : 'num default'}}" data-amount="20" bindtap="choose">200元</view><view class="{{money==30 ? 'num checked' : 'num default'}}" data-amount="30" bindtap="choose">300元</view></view>

.js

  choose(e) {let data = e.currentTarget.dataset;this.setData({money : data.amount,});console.log(this.data.money);},

.wxss

.item-num{display:flex;justify-content: space-between;margin-bottom: 15rpx;
}
/*默认未选中的格子样式  */
.item-num .num{height: 130rpx;background-color: #F1F3F5;color: #333333;font-size: 32rpx;width: 335rpx;text-align: center;line-height: 130rpx;border-radius:8rpx;margin-left: 9rpx;
}
/*默认选中的格子样式  */
.item-num .num1{height: 130rpx;background-color: #F1F3F5;color: #333333;font-size: 32rpx;width: 335rpx;text-align: center;line-height: 130rpx;border-radius:8rpx;margin-left: rpx;
}
/*选中的格子背景字体样式  */
.item-num .num.checked{background-color: #FFEBE8;color:#337AB7;
}
.item-num .num1.checked{background-color: #FFEBE8;color:#337AB7;
}

可能总结的不够清晰，我会持续改善，小白在路上~欢迎为数不多的读者提意见o

备注：本文有引用到以下网址部分内容，感谢
https://my.oschina.net/yanyaya/blog/1610907
https://www.jb51.net/article/132550.htm

微信小程序参数传递相关推荐

微信小程序参数传递获取当前页面的url和参数
页面跳转添加参数 wx.navigateTo({url: `../deeddetail/deeddetail?id=${e.currentTarget.dataset.id}`, }) 接收optio ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
Java小程序post如何传参,微信小程序向Java后台传输参数的方法实现
微信小程序向Java后台传输参数的方法实现首先,微信小程序我使用的是微信web开发者工具想要向后台传输数据,需要在js中写在微信小程序的官方文档中可以看到一个api叫wx.request它的作用 ...
微信小程序在web-view页面做分享，并且把分享的参数传递给小程序
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票本demo实现的功能,微信小程序给h5传参,h5给小程序传参实现代码: <!--index.wxm ...
微信小程序开发之数据存储参数传递数据缓存
微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没 ...
微信小程序（uni-app）url参数传递对象
开发小程序和uni-app时,遇到需要在navigaor组件中传递对象参数到下一个页面的需求,传递对象时如果不JSON.stringify的话,接收到的对象会被转化成[object,object]形式 ...
微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
Asp.Net Core SignalR 与微信小程序交互笔记
什么是Asp.Net Core SignalR Asp.Net Core SignalR 是微软开发的一套基于Asp.Net Core的与Web进行实时交互的类库,它使我们的应用能够实时的把数据推送给 ...
微信小程序系列4——传值详解
前言在开发程序过程中,会遇到各种各样的传值的情景,例如:页面之间的传值.回调.代理.通知等.而在微信小程序中,传值的方式和Android和iOS的方式有一定的异同. 微信小程序使用的数据传值方式 ...

微信小程序参数传递

微信小程序参数传递相关推荐

最新文章

热门文章

微信小程序 参数传递

微信小程序 参数传递相关推荐

最新文章

热门文章

微信小程序参数传递

微信小程序参数传递相关推荐