微信小程序（二）

点击事件

在控件上使用bindtap绑定事件

<text class="text-top text" style='color:{{color}}' data-name='自定义属性' id='mytext' bindtap='clickMe'>{{motto}}</text>

clickMe:function(event){
    console.log(event)
    console.log(event.currentTarget.dataset.name)
  }

以下是打印结果，可以看到触发控件的属性都可以通过event获得。如果自定义属性为data-Name，编译器会自动转为小写，需要注意。

模块化

抽取公共方法封装成utils，使用module.exports对方法进行暴露，不使用的话外部无法调用该方法。

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
module.exports.sayGoodbye = sayGoodbye

在需要的地方引入并调用，使用相对路径。

var common = require('../utils/common.js');//在page对象前

   clickMe:function(event){
    common.sayHello('ay'); 
    common.sayGoodbye('ab');
  }

数据绑定

通过{{}}进行数据绑定，在js中的data中改变数据，页面中使用{{}}显示绑定的数据，可以绑定到内容，也可以绑定到属性中，需注意当绑定在属性时，要使用双引号" {{…}} "

wxml
<view id="{{myId}}">{{msg}}</view>
js中
data: {
    motto: 'Hello World',
    color: 'red',
    msg:'绑定在内容',
    myId:111
  },

在{{}}中也可以做一些简单的运算，如三目运算符{{a+b==c? ’ 相等’：‘不相等’}}，字符串拼接，运算等。