简单绑定
<!--xml重就这样写--><view> {{ message }} </view><!--js中就为message赋值-->Page({
data: {
message: 'Hello MINA!'
}
})
条件渲染
格式就为<view wx:if="{{条件}}"> 1 </view><view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>
列表渲染
<!--array是个数组,随意命名,由js赋值,item为固定格式,不能变,否则不显示--><view wx:for="{{array}}">{{item}}</view><!--为array赋值-->Page({
data:{
array:['a','b','c','d','e'],
}
})
模板
<!--定义模板--><template name="mymoban">
<view>
<text> {{name}}: {{age}} </text>
</view></template><!--使用模板--><template is="mymoban" data="{{...zhangsan}}"/><!--赋值-->Page({
data: {
zhangsan: {
name:张三,
age:18,
}
}
})
事件
事件就是在布局文件中用bindtap,在js文件中进行方法设置
<view bindtap="clickme">点我</view>
Page(){
Data:{
clickme: function(e){
console.log("我被点击了");
}
}
}
引用
<!--引用有两种,一种是引其他布局中的模版,另一种是引用其他布局中除模版以外的部分--><!--第一种import:在page1中引用page2的模版--><import src="../page2/page2.wxml"/><!--引用进来后就可以直接使用page2中的模版--><!--注意:假如page2中引用了page3,这里并不会把page3引入进来,也就是说引用不能传递,如果page1也想使用page3的模版就需要单独再引用page3--><template is="mytemp"/><!--第二种include:在page1中引用page2中除模版以外的部分,这个和android中的include一样--><!--直接就把page2的布局加到page1页面了--><include src="../page2/page2.wxml"/>
模块化
模块化和模版和引用类似但不同,模块化可以理解成公共方法代码块。针对的是js代码。而模版和引用针对的是布局xml文件。
<!--1、创建公用代码块,可以单独建一个文件夹,单独的js文件--><!--创建一个叫common的文件夹和js文件并导出-->function say(content){
console.log('杨震宇说:'+content);
}<!--导出方式有两种,但强烈推荐使用第一种-->module.exports.mysay=say;//=左边的mysay可以随意起名,右边必须是方法名
exports.mysay=say;//这种方式是一种引用,不建议<!--2、使用代码块--><!--先引入公共方法所在的类,也就是js-->var common = require('../common/common.js');//.js后缀可不写
common.mysay('我是杨震宇');//这个mysay对应的是导出时的名字