那么,承接上一篇的内容,我们继续来学习微信小程序。需要一提的是,在微信小程序的开发和学习过程,不断地查阅文档是非常重要的,小程序的官方文档写的非常详细,所以我在很多地方没有过多介绍,而是附上了文档链接,希望读者能养成自行查阅文档的习惯。话不多说,今天的学习之旅就要开始了,各位看官准备好了吗?
四、组件
内置组件就是微信定义的具有特殊功能的标签,在wxml中只能使用微信提供的组件标签
1. 常用组件
-
<view>
用于页面布局的块级组件,类似于html中的div -
<text>
用于页面布局的行级组件,类似于html中的span -
<scrollview>
可滚动的块级组件 -
<swiper>
实现轮播的块级组件 -
<icon>
图标(开发工具自带的图标有限,更多可以去阿里巴巴矢量图标库下载,把下载来的icon font.css文件中应用外部文件的url删除只剩下一项base64编码的url,然后把文件名的后缀改成wxss,复制到开发工具的项目中,然后直接使用text标签引入外部样式) -
<rich-text>
富文本(用来展示HTML和CSS代码) -
<表单组件>
表单 -
<navigator>
导航,类似于html中的a -
<image>
图 片 -
<map>
地图
参考 https://developers.weixin.qq.com/miniprogram/dev/component
注:在微信的调试器中有个Wxml,其作用相当于浏览器中的elements,我们可以在其中查看页面元素及其样式
2. 组件样式
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式
WXSS 具有 CSS 大部分特性,同时对 CSS 进行了扩充以及修改
参考 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
注:
-
WXSS同样具有行内样式、外部样式,不过因为WXSS文件名前面都是一样的,所以不需要引入
-
当然如果不同名,比如about.wxml中要导入index.wxss的样式,那么要使用
@import
语句导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。 -
WXSS同样可以写类选择器、标签选择器、ID选择器
-
WXSS与CSS相比,尺寸单位变化,WXSS中常用的尺寸为rpx,它可以根据屏幕宽度进行自适应
-
实际上我们每个页面的wxml文件中写的内容都包在一对page标签中,所以我们可以对page设置样式,就能对整个页面设置样式
-
WXSS不能指定本地图片,无法加载本地资源
五、WXML语法
1. 数据绑定
将页面Page的数据data绑定显示在页面中
语法:{{ 变量 }}
由两对大括号组成,称为“Mustache”语法,也称为插值表达式
作用:用于在页面中插入值,进行数据的绑定显示,且当值发生变化时页面会重新渲染加载,称为***响应式特性***,即数据状态同步操作
注意:
- 插值表达式不仅可以在标签中或标签外使用,也可以为标签的属性绑定值
<view id='{{name}}'>姓名</view>
-
用插值表达式指定自定义对象时会展示object,但对象.属性是可以展示出来的
-
值为null就直接展示null,值为undefined或变量不存在时,会以空字符串输出显示
-
插值表达式中可以做简单的运算
-
在插值表达式中直接定义对象时两边一定要有空格
-
微信小程序中插值表达式中不能调用JS内置对象
//微信小程序中插值表达式中不能调用JS内置对象 <view>{{ new Date() }}</view>
2. 条件/列表渲染
条件渲染:
-
使用
wx:if=""
来判断是否需要渲染组件,取值可以为any任意类型,会转换为boolean结果 -
会根据boolean结果,执行元素的创建和删除操作,控制元素的显示隐藏
<view wx:if="{{condition}}"> True </view>
列表渲染:
- 使用
wx:for=""
来循环多次渲染组件,取值为 Array | Object | number | string - 会基于数据重复渲染组件,用于循环数据
- 在循环时默认使用
index
和item
表示当前元素的下标变量名和元素变量名
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
注意:条件/列表渲染值不能直接写,一定要从数据仓库中取值,即一定要写插值表达式
3. 模板
可以使用模板template定义代码片段,然后在不同的地方多次调用,实现页面代码结构的复用
使用步骤:
- 定义模板,通过name属性指定模板的名字
- 调用模板,通过is属性指定要调用的模板
使用 name 属性,作为模板的名字。然后在<template/>
内定义代码片段,如:
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
注意:模板样式的加载
- 加载全局样式
- 加载引用模板的页面的局部样式
- 对于独立的外部模板样式文件,可以在引用该模板的页面中通过import进行导入
4. 事件绑定
分类:
- 普通事件
- 组件内置事件
绑定事件的两种方式:
bind事件名="函数名"
或bind:事件名="函数名"
,会触发事件冒泡catch事件名="函数名"
或catch:事件名="函数名"
,阻止事件冒泡
参数传递:
- 在组件标签上,以
data-参数名="参数值"
进行事件参数的传递 - 在事件回调函数中,接收
event
事件对象为参数,通过event.currentTarget.dataset
获取传递的参数变量
参考 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
参数命名的两种方式:
- 驼峰式命名会自动转换为小写字符
- 连字符会转换为驼峰式
5. WXS语法
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML ,可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
简单来说,可以在wxml页面中完成JS脚本嵌套,为插值表达式提供脚本方法调用,实现数据的包装处理(由于微信小程序中不能在插值表达式中调用JS内置对象,所以无法在页面上直接对数据进行包装处理)。
两种用法:
-
局部脚本
定义在对应微信页面的wxml文件中,只能在当前页面中使用wxs标签要给module属性赋值,即给模块起名
wxs区域是一个封闭的语法环境,默认定义成员都是私有的,只能在wxs区域内调用
必须使用
module.exports = {}
向外暴露要共享的变量和函数对外共享的成员,将存储于module属性所指定的模块对象中
为了语法兼容,wxs不支持ES6语法,且只支持部分ES5语法
-
全局脚本
使用独立的.wxs
文件进行定义,在需要使用的页面中进行导入导入方法
<wxs src="" module=""></wxs>
导入时src中只能写相对路径,这种方法是在导入时起模块名