小程序实战三之微信组件事件及函数传参

项目地址

表单

input表单

<view class='menu-group'>
  <navigator class='menu-item arrow'>
    <text>表单</text>
  </navigator>
  <navigator class='menu-item'>
    <input type='text' placeholder='text'></input>
  </navigator>
  <navigator class='menu-item'>
    <input type='text' password placeholder='password'></input>
  </navigator>
  <navigator class='menu-item'>
    <input type='digit' placeholder='digit'></input>
  </navigator>
  <navigator class='menu-item'>
    <input type='idcard' placeholder='idcard'></input>
  </navigator>
</view>
<view class='divider'></view>

其他表单

<view class='menu-group'>
  <navigator class='menu-item arrow'>
    <text>其他表单</text>
  </navigator>
  <navigator class='menu-item'>
    <checkbox-group bindchange='cbChanged' data-aa='222'>
      <checkbox color='#f60' value='son' checked></checkbox> 呵呵
      <checkbox color='#f60' value='mom'></checkbox> 妈妈
      <checkbox color='#f60' value='dad'></checkbox>爸爸
    </checkbox-group>
  </navigator>
  <navigator class='menu-item'>
    <radio-group bindchange='rbChanged' data-index='1'>
      <radio color='#f60' value='apple'>苹果</radio>
      <radio color='#f60' value='pear'>梨</radio>
    </radio-group>
  </navigator>
  <navigator class='menu-item arrow'>
    <text>你好</text>
  </navigator>
</view>

表单绑定事件和传参

cbChanged(e){
    console.log(e.detail.value + " : " + e.target.dataset.aa)
},
rbChanged(e){
    console.log(e.detail.value + " : " + e.target.dataset.index)
}

wxs 微信页面的脚本程序

<!-- 微信脚本，提供给当前页面逻辑计算的方法 -->
<wxs module='obj'> //module是必要属性

  var inSum = function(a,b){
    return a + b
  }

  module.exports.sum = inSum
</wxs>

<view>{{  obj.sum(1,2)  }}</view>


或者

<wxs module = 'nba'>
    module.exports={
        yaoming:function(){
        return '姚明'
        },
        siji:function(){
        return '银角大王'
        }
    }
</wxs>
<view> {{ nba.yaoming() +'  : ' nba.siji()}}</view>

小程序的冒泡事件

bindxxx 是冒泡事件
catchxxx 是非冒泡事件

.father{
  width: 300rpx;
  height:300rpx;
  background-color: skyblue;
}

.son{
  width: 100rpx;
  height:100rpx;
  background-color: pink;
}

.son2 {
  width: 100rpx;
  height:100rpx;
  background-color: green;
}


<view class='father' bindtap='fatherHandle'>
父亲
    <view class='son' bindtap='sonHandle'>
      儿子1
    </view>
    <view class='son2' catchtap='son2Handle'>
      儿子2
    </view>
</view>

 fatherHandle(event){
    console.log("父亲被点击了")
  },
  sonHandle(event){
    console.log("儿子1被点击了")
  },
  son2Handle(event){
    console.log("儿子2被点击了")
  }