微信小程序基础(二)

7. 模板语法

WXML（WeiXin Markup Language）是框架设计的一套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。

7.1. 数据绑定

7.1.1. 普通写法

<view> {{ message }} </view>

Page({ 
	data: {
		message: 'Hello MINA!' 
	}
})

7.1.2.组件属性

<view id="item-{{id}}"> </view>

Page({ 
	data: {
		id: 0
	}
})

7.1.3.bool类型

注意:不要直接写checked=“false”,其计算结果只是一个字符串

<checkbox checked="{{false}}"> </checkbox>

7.2. 运算

7.2.1. 三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

7.2.2. 算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({ 
	data: {
		a: 1, b: 2, c: 3
	}
})

7.2.3. 逻辑判断

<view wx:if="{{length > 5}}"> </view>

7.2.4. 字符串运算

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

Page({ 
	data:{
		name: 'MINA' 
	}
})

7.2.5.注意

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

7.3.列表渲染

7.3.1.wx:for

项的变量名默认为 item wx:for-item=“item” 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index=“index” 可以指定数组当前下标的变量名

wx:key ⽤来提⾼数组渲染的性能

wx:key 绑定的值 有如下选择

1. string 类型，表⽰ 循环项中的唯一属性 如:

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id

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

list:[1,2,3,4,5]

wx:key="*this"

代码：

<view wx:for="{{array}}" wx:key="id">
	 {{index}}: {{item.message}}
</view>

Page({ 
	data: {
		array: [
			{id:0, message: 'foo'},
			{id:1, message: 'bar'}
		]
	}
})

7.3.2. block

渲染一个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
<view> {{index}}: </view>
<view> {{item}} </view>
</block>

7.4. 条件渲染

7.4.1. wx:if

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{false}}">1</view>

<view wx:elif="{{true}}">2</view>

<view wx:else>3</view>

7.4.2. hidden

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

类似 wx:if

频繁切换 ⽤ hidden

不常使⽤ ⽤ wx:if

8. ⼩程序事件的绑定

⼩程序中绑定事件，通过bind关键字来实现。如: bindtap , bindinput , bindchange 等
不同的组件⽀持不同的事件，具体看组件的说明。

8.1. wxml

<input bindinput="handleInput" />

8.2. page

Page({
// 绑定的事件
	handleInput: function(e){
		console.log(e); 
		console.log("值被改变了");
	}

})

8.3. 特别注意

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

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

2. 事件传值 通过标签⾃定义属性的⽅式 和 value

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

3. 事件触发时获取数据

handleInput: function(e) {
// {item:100} 
	console.log(e.currentTarget.dataset)

// 输入框的值
	console.log(e.detail.value);
}

9. 样式 WXSS

WXSS( WeiXin Style Sheets )是一套样式语⾔，⽤于描述 WXML,
与 CSS 相⽐，WXSS 扩展的特性有：
响应式⻓度单位 rpx样式导⼊

9.1. 尺⼨单位

rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在

iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
使⽤步骤：

1. 确定设计稿宽度 pageWidth

2. 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。

3. 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

9.2. 样式导⼊

wxss中直接就⽀持，样式导⼊功能。也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。⽰例代码：

/** common.wxss **/
.small-p { 
	padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p { padding:15px;
}

9.3.选择器

9.3. 选择器

特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！

*{

margin:0; padding:0;
box-sizing:border-box;

}

⽬前⽀持的选择器有：

9.4. ⼩程序中使⽤less

原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue ， taro 等。但是仅仅因为一个less功能，⽽去引⼊一个框架，肯定是不可取的。所以可以⽤以下⽅式来实现

1. 编辑器是 vscode
2. 安装插件 easy less
   
3. 在vs code的设置中加⼊如下，配置

"less.compile": {
"outExt":	".wxss"
}

4. 在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。

10. 常⻅组件

重点说明⼩程序中常⽤的布局组件

view,
text,
rich-text,
button,
image,
navigator,
icon,
swiper,
radio,
checkbox。

等

10.1. view

代替 原来的 div 标签

<view hover-class="h-class">

点击我试试
</view>

10.2. text

1. ⽂本标签
2. 只能嵌套text
3. ⻓按⽂字可以复制（只有该标签有这个功能）
4. 可以对空格 回⻋ 进⾏编码
   

10.2.1. 代码

<text selectable="{{false}}" decode="{{false}}">

普&nbsp;通
</text>

10.3. image

1. 图⽚标签，image组件默认宽度320px、⾼度240px
2. ⽀持懒加载
   
   mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
详细的官网链接,点击跳转到官网

总结:

今天上述了它最基本的模板语法{{}}显示,数据绑定,几种运算方法,列表渲染wx:for,block,条件渲染v-if和hidden以及他们的区别,还有基础的事件绑定,WXSS文件的编码,及常见的组件(今天只讲述4个,明天会继续更新),今天的讲解到此结束,感谢你的观看