1.1数据绑定
"pages/index/index" index.wxml
<view class="container"> <!-- 1.数据绑定: 数据绑定使用 Mustache 语法(双大括号)将变量包起来,变量来源于对应js的data里面的数据 --> <view> {{message}} </view> <!-- 2.列表渲染: 在组件上使用控制属性wx:for="{{数组变量}}">绑定一个数组来循环,数组来源于对应js的data的数组变量; 循环使用:item为数组当前项默认变量名,index为数组默认索引变量名 --> <view wx:for="{{array}}"> {{index}}:{{item}}</view> <!-- array 从index.js里面的data.array 里面去的数组数据 item就是数组迭代每一项内容 --> <!-- 3.条件渲染: 在组件上使用 wx:if="{{条件/[true/false]}}" 来判断是否需要渲染该代码块: --> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view> <!-- 4.模板:定义一个模板template写上name属性 模板并不会在界面上显示出来 --> <template name="qfName"> <view> 姓名{{name}} 年龄 {{age}} </view> </template> <!-- 使用一个模板 is="使用模板的名字" data表示数据是从哪里来的 --> <template is="qfName" data="{{...zhangshan}}"></template> <!--es6语法堂来获取一个json数据--> <template is="qfName" data="{{...lisi}}"></template> <!--5.事件:--> <view bindtap="add" class="view-item">{{count}}</view> </view> |
"pages/index/index" index.js var param = { data : { message : '微信小程序数据绑定', array : ['列表渲染1', '列表渲染2', '列表渲染3'], view : 'APP', zhangshan : {name : '张山', age : 18},lisi : {name : '李四', age : 28}, count : 0, }, add:function(e){ this.setData({ count:this.data.count + 1 }) } }; //每一个页面调用Page方法 Page(param); |
1.2条件渲染
index.wxml <view class="container"> <!-- 条件渲染: wx:if="{{条件}}" 来判断是否需要渲染该代码块,为真时显示,为假时不渲染;只能判断一个组件的渲染 多个组件标签:用<block>标签包起来,加上控制属性wx:if;<block></block>并不是一个组件,只用来接收控制元素 多个判断条件:用 wx:elif 和 wx:else 来添加一个 else 块: --> <view wx:if="{{length > 5}}"> 大于5 </view> <view wx:else>小于等于5</view> <block wx:if="{{isShow? true : false}}"> <view>view0</view> <view>view1</view> </block> <view hidden>条件渲染wx:if和hidden的区别:条件渲染为真时渲染;hidden组件始终会被渲染,只是简单的控制显示与隐藏</view> </view> index.js var param = { data : { length : 6, isShow : false, } }; Page(param);1.3列表渲染 index.wxml <view class="container"> <!-- 列表渲染: 在组件上使用控制属性wx:for="{{数组变量}}">绑定一个数组来循环,数组来源于对应js的data的数组变量; 取数据:item为数组当前项默认变量名,index为数组默认索引变量名 使用wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名 wx:for可以嵌套;可以将wx:for用在<block/>标签上,以渲染一个包含多节点的结构块 --> <view wx:for="{{array}}"> {{index}}:{{item.message}} <!-- array是js里面data的数组变量array index是数组下标 item是每一项 --> </view> <view wx:for="{{array}}" wx:for-item="arrayName" wx:for-index="arrayIndex"> {{arrayIndex}}:{{arrayName.message}} <!--用arrayIndex替换了默认的index 用arrayName替换了默认的item --> </view> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view> <block wx:for="{{[1,2,3]}}"> <view>{{index}}</view> <view>{{item}}</view> </block> </view> index.js var param = { data:{ array:[ {message : 'view0'}, {message : 'view1'}, {message : 'view2'} ] } } Page(param); |
1.4模板
index.wxml <view class="container"> <!-- 定义一个模板 name属性作为模板的名字--> <template name="myTemplate"> <view> <text>name : {{name}} age : {{age}}</text> <text>addr : {{addr}}</text> </view> </template> <!-- 使用一个模板 is表示使用模板的名字 将模板所需要的 data 传入--> <template is="myTemplate" data="{{name : 'yang', age : 30, addr: '北京'}}"> </template> <template is="myTemplate" data="{{name : 'jian', age : 40, addr: '上海'}}"> </template> <!-- data传入方式1 key和value方式--> <template is="myTemplate" data="{{name : x, age : y, addr: a }}"> </template> <!-- data传入方式2 直接传入变量--> <template is="myTemplate" data="{{name, age , addr}}"> </template> <!-- data传入方式3最常用 es6传入json数据--> <template is="myTemplate" data="{{...obj1}}"> </template> <template is="myTemplate" data="{{...obj2}}"> </template> <!-- data传入方式4 es6传入数组形式的json--> <template is="myTemplate" data="{{...person_objs[0]}}"> </template> <template is="myTemplate" data="{{...person_objs[1]}}"> </template> </view> index.js var param = { data : { x : 'zhang', y : 50, a : '深圳', name : 'wang', age : 21, addr : '广州', obj1 : { name : 'name1', age : 22, addr : '广州1', }, obj2 : { name : 'name2', age : 23, addr : '广州2', }, person_objs : [ { name : 'name4', age : 25, addr : '广州4', }, { name : 'name5', age : 26, addr : '广州5', }, ] } }; Page(param); |
1.5事件
事件: 类型 触发条件 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 touchend 手指触摸动作结束 tap 手指触摸后马上离开 longtap 手指触摸后,超过350ms再离开 事件的使用: 在组件中绑定一个事件处理函数 => bind+事件="事件处理函数",在相应的Page定义中写上相应的事件处理函数,参数是event 事件分类: 事件分为冒泡事件和非冒泡事件 事件绑定: 事件绑定的写法同组件的属性 绑定冒泡事件:bind+事件="事件处理函数" 绑定非冒泡事件:catch+事件="事件处理函数" 事件对象: 当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象event event里面的基础事件对象: type 事件类型 timeStamp 事件生成时的时间戳 target 触发事件的源组件 currentTarget 事件绑定的当前组件 currentTarget id 当前组件的id tagName 当前组件的类型 dataset 当前组件上由data-开头的自定义属性组成的集合