微信小程序 参数传递

一、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