小程序基础语法

1. 数据绑定的概念和基础

Mustache 语法（双大括号）模板语法

{{textstr+2}}
<view>{{"hello" + name}}</view>

注意：花括号和引号之间如果有空格，将最终被解析成为字符串

单向数据绑定
页面数据改变不影响变量数据

2. 动态数据绑定

小程序data赋值

this.setData(对象)

获取data里面的值

this.data.(key值)

3. 深度了解小程序的条件渲染

wx:if为true就显示元素，false不不显示
语法

<view wx:if="{{score<60}}">不不及格</view>
<view wx:elif="{{score>=80}}">优秀</view>
<view wx:else>良好</view>

频繁切换用 hidden
不常使用用 wwxx::iiff

<view hidden="{{condition}}"> True </view>

4. 深度了解小程序的列表渲染

wx:for绑定数组，wx:for-item值为当前项目的变量名，wx:for-index值为当前下标的变量名，wx:key 用来提高数组渲染的性能

<block wx:for="{{list}}" wx:for-item="course" wx:for-index="idx" wx:key="id">
<view class="item">
<view class="item_img">
<image src="{{course.img}}"></image>
</view>
<view class="item_name">{{course.name}}</view>
<view>{{idx}}</view>
</view>
</block>

保留字 * this ，它的意思是 item 本身，* this 代表的必须是唯⼀的字符串和数组。

list:[1,2,3,4,5]
wx:key="*this"

5. 绑定事件与事件交互

bind+事件

<button bindtouchstart="changeData" bindtouchend="tmove"
bindlongpress="lpress">改变数据</button>

需要在js里写对应的方法

//点击事件
changeData:function(){
this.setData({
textStr:"hello 小程序"
})
},
//触摸移动
tmove:function(){
console.log("touchend");
},
//长按触发
lpress:function(){
console.log("longpress")
},

特别注意

绑定事件时不能带参数不能带括号以下为错误写法

<input bindinput="handleInput(100)" />

事件传值通过标签自定义属性的方式和 value

<input bindinput="handleInput" data-item="100" />

事件触发时获取数据

handleInput: function(e) {
// {item:100}
console.log(e.currentTarget.dataset)
// 输入框的值
console.log(e.detail.value);

6. 深入了解事件机制--catch与bind

bind会应用到冒泡机制，catch会阻止事件冒泡
阻止冒泡：

<view class="box" bindtap="containerTap">
<text catchtap="txtTap">小程序</text>
</view>

捕获阶段的capture-bind与capture-catch,绑定事件需要加上冒号

capture-bind:tap(绑定事件)
capture-catch:tap(绑定事件)（阻止捕获）

7. 样式导入

wxss中直接就支持样式导入功能
也可以和 less中的导入混用
使用 @import 语句可以导入外联样式表，只支持相对路径
···
@import "common.wxss";
.middle-p {
padding:15px;
}
···