小程序 - 取值传参

1.单向绑定

分三种情况：第一种，直接在A.js 取变量值

<!--A.wxml-->
<view>
      <text wx:for="{{city}}" wx:key="index">{{item}}</text>
</view>

<!--A.js-->
Page({
  data: {  
    city: ["北京", "上海", "广州", "香港"],    
  } 
})

第二种，从 app.js 取全局变量：

<!--A.wxml-->
<view>
      <text>{{globalVal.name}}</text>
</view>

<!--A.js-->
Page({
  onLoad: function () {
    this.setData({
      globalVal: app.globalData.globalVal
    })
  } 
})

<!--app.js-->
App({
  globalData: {   
    globalVal:{name:"marc",age:16} 
  }
})

第三种是，在A.js 取 getStorage 

<!--A.wxml-->
<view>
      <text>{{date}}</text>
</view>

<!--A.js-->
Page({  
  onLoad: function () {
    var d = new Date(),
        week = "日一二三四五六"; 
    
    wx.setStorage({
      key: "date",
      data: d.getMonth() + 1 + "月" + d.getDate() + "日,星期" + week.charAt(d.getDay())
    }); 

    var _this = this;
    wx.getStorage({
      key: 'date',
      success: function(res) {       
        _this.setData({
          date: res.data
        });        
      },
    })
  } 
})

2.双向绑定

双向绑定input、textarea

<!--A.wxml-->
<view>  
    <text>{{iptTxt}}</text>  
    <input bindinput='bindIpt' value ="{{iptTxt}}" placeholder='search'></input>
    <text>{{txtBox}}</text>
    <textarea bindinput='bindTxtBox' value="txtBox"></textarea>
</view>

<!--A.js-->
Page({
  data: { 
    iptTxt:"",
    txtBox:""   
  },
  bindIpt(e){
    this.setData({
      iptTxt:e.detail.value
    })
  },  
  bindTxtBox(e){
    this.setData({
      txtBox:e.detail.value
    })
  }  
})

3.页面传参给事件函数

小程序不支持像 vue 那样，直接在事件函数内传参： @click="getInfo(index)" ，只能加 data-index="{{index}}" 曲线传参

<!--A.wxml-->
<view>
    <text wx:for="{{city}}" data-index="{{index}}" bindtap="getInfo1" wx:key="index">{{item}}</text>
     <text id="transfer" data-item="{{city[0]}}" bindtap="getInfo2">测试</text>
</view>  

<!--A.js-->
Page({
  data: {  
    city: ["北京", "上海", "广州", "香港"],    
  }，
  getInfo1(e){   
    console.log(e.currentTarget.dataset.index)
  }, 
  getInfo2(e){
    console.log(e.currentTarget.id);
    console.log(e.currentTarget.dataset.item);
  },
})

4.跨页传值

<!-- A.wxml -->
<view>
    <view wx:for="{{city}}" wx:key="index">
      <navigator url="../demo/demo?city={{item}}">{{item}}</navigator>
    </view>	  
</view>

<!-- A.js -->
Page({
  data: {  
    city: ["北京", "上海", "广州", "香港"],    
  } 
});

<!-- demo.js -->
// pages/demo/demo.js
Page({
  onLoad: function (options) {
    console.log(options.city);
  },
})

最后，再赠送一个 纯手工选项卡！

如果有幸帮到你，帮忙到个人主页 Star 一下 ：https://github.com/mark-tang

听说 Star 的人马上升职加薪！Skr - skr !

<!-- A.wxml -->
<view>
  <view>
    <text wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="tabcard">{{item}}</text>
  </view>
  <view>
    <text hidden="{{tabIndex !== index }}" wx:for="{{specialty}}" wx:key="index">{{item}}                    
    </text><!-- 留意这里 hidden 写法，不是 wx:hidden 或者 :hidden -->
    <!-- wx:if也可以,两者区别是，hidden 如字面意思只是隐藏，wx:if 则不渲染改项： -->
    <!-- <text wx:if="{{tabIndex === index }}" wx:for="{{specialty}}" wx:key="index">{{item}}</text>   -->
  </view>
</view>


<!-- A.js -->
Page({
  data: {  
    city: ["北京", "上海", "广州", "香港"],    
    specialty:["烤鸭","吴侬软语","早茶","电影"],
    tabIndex: 0
  },
  tabcard(e){
    this.setData({
      tabIndex:e.currentTarget.dataset.index
  })
})