微信小程序 3__事件,方法传参,数据绑定，微信API调用

一 事件和方法传参

 

<button bindtap="clickMe" data-val1="1">点击我</button>

这里bindtap 表示绑定的点击事件， 事件名称为clickMe,  data- 开头表示传递参数， val1表示参数名称，也可以是val2 或者其他名字， 1表示参数的值。

我们要明白一条： 微信小程序开发 跟 vue 开发差别是很大的。  如果同时在面对两个任务， 不可搞混淆了。

二  数据绑定

用{{}} 表示， 该语法称为插值表达式。

event.wxml

<input type="text" bindinput="changeMe" />
<button bindtap="clickMe" data-val1="1">点击我</button>
<view>
{{msg}}
</view>

<button open-type="getUserInfo"  bindgetuserinfo="getUserInfo">获取用户信息</button>
<button open-type="getPhoneNumber"  bindgetuserinfo="getphonenumber">获取用户手机号</button>
<button open-type="contact"  bindgetuserinfo="getcontact">联系客服</button>

对应的js文件 event.js

// pages/event/event.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "Hello World"
  },
  clickMe:function(value){
    this.setData({
      msg: "你好，世界"
    })
    console.log(this.data.msg);
    console.log( value.currentTarget.dataset);
  },
  changeMe(){
    console.log("文本框变化了");
  },
  getUserInfo(e){
    console.log("获取用户信息 ");
    console.log(e);
  },
  getphoneNumber(e){
    console.log("获取用户手机号 ");
    console.log(e);
  },
getcontact(e){
  console.log(e);
},

})

讲解一下 MVVM:   M: Model,  V：View,   VM：ViewModel 

示例运行效果图

示例代码参考  miniprogram_20210310  工程