微信小程序开发（入门篇）

微信小程序开发--WXML语法参考

一、数据绑定

1 2 3 4 5 6 7 8 9 10 11

<!--index.wxml--> <view class="container"> <text>{{msg}} </text> <text>{{person.name}}</text> <view class="{{ClassName}}"> </view> <text>{{"这里也可以写字符串"}}</text> <text>{{ 100+200}}</text> <text>{{ 100>40 ? true : false}}</text> <checkbox checked="false"></checkbox> <checkbox checked="{{false}}"></checkbox> </view>

　　

1 2 3 4 5 6 7 8 9 10 11

// index.js Page({ data: { msg:"hello world", person:{ name:"he", age:30 }, ClassName:"ClassName" } })

　

1 2 3 4 5 6

/**index.wxss**/ .ClassName{   width: 100rpx;   height:100rpx;   background: pink; }

　　

二、列表渲染

<!--index.wxml-->

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<view wx:for="{{list}}" wx:for-index="j" wx:for-item="abc" wx:key="index">   <!--  wx:for="{{list}}"   遍历data属性里的list列表  wx:for-index        指定索引值的名字  wx:for-item         指定数组名字  wx:key              列表项目中的唯一标识符  -->   <text>{{j}}</text>   <checkbox checked="{{abc.check}}">{{abc.name}}</checkbox> </view>   <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i" wx:key="index">   <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j" wx:key="index">     <view wx:if="{{i <= j}}">     <!-- wx:if:用来控制显示或隐藏的 ，如果结果为true，则显示。反之，则隐藏 -->       {{i}} * {{j}} = {{i * j}}     </view>   </view> </view>

　　

1 2 3 4 5 6 7 8 9

// index.js Page({   data: {<br> list:[       {name:"html",check:true},       {name:"css",check:true},       {name:"javascript",check:false}     ]   } })

三、绑定一个点击事件

1 2 3 4

<!--index.wxml--> <view>   <button bindtap='event'>点我</button> </view>

　　

1 2 3

// index.js<br>Page({    event:function(){      console.log("我是一个事件")<br>　　　console.dir(e)<br>　　　// 将一个对象树状打印到控制台

1 2

} })

 四、事件冒泡

　　

1 2 3 4 5 6 7

<!--index.wxml--> <view style='width:200px;height:200px;background:pink' bindtap='outter'>   <view style='width:100px;height:100px;background:blue'catchtap="inner"> 　　//绑定一个事件，并阻止事件冒泡catchtap="" 　　//绑定一个事件bindtap="" 　</view> </view>

　　

1 2 3 4 5 6 7 8 9

// index.js Page({    inner:function(){      console.log("inner")    },    outter:function(){      console.log("outter")    }, })

五、事件传参

1 2 3 4 5

<!--index.wxml--> <button bindtap='evenData' data-name="he">点我传参</button> <button bindtap='evenData' data-name-xin="he">点我传参</button>    <!--    事件的基本使用 bind[*] catch[*]   -->

　　

1 2 3 4 5 6 7 8

// index.js Page({    evenData:function(e){      console.log(e.target.dataset)      //e.target 指的是当前点击的元素      //dataset  指的是当前点击的元素上所有以  data-[*] 开头的属性的集合    } })