微信小程序轻松入门（二）

​ 那么，承接上一篇的内容，我们继续来学习微信小程序。需要一提的是，在微信小程序的开发和学习过程，不断地查阅文档是非常重要的，小程序的官方文档写的非常详细，所以我在很多地方没有过多介绍，而是附上了文档链接，希望读者能养成自行查阅文档的习惯。话不多说，今天的学习之旅就要开始了，各位看官准备好了吗？

---

四、组件

​ 内置组件就是微信定义的具有特殊功能的标签，在wxml中只能使用微信提供的组件标签

1. 常用组件

• <view>用于页面布局的块级组件，类似于html中的div

• <text>用于页面布局的行级组件，类似于html中的span

• <scroll­view>可滚动的块级组件

• <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

​ 注：

1. WXSS同样具有行内样式、外部样式，不过因为WXSS文件名前面都是一样的，所以不需要引入

2. 当然如果不同名，比如about.wxml中要导入index.wxss的样式，那么要使用@import语句导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

3. WXSS同样可以写类选择器、标签选择器、ID选择器

4. WXSS与CSS相比，尺寸单位变化，WXSS中常用的尺寸为rpx，它可以根据屏幕宽度进行自适应

5. 实际上我们每个页面的wxml文件中写的内容都包在一对page标签中，所以我们可以对page设置样式，就能对整个页面设置样式

6. WXSS不能指定本地图片，无法加载本地资源

五、WXML语法

1. 数据绑定

​ 将页面Page的数据data绑定显示在页面中

​ 语法：{{ 变量 }}由两对大括号组成，称为“Mustache”语法，也称为插值表达式

​ 作用：用于在页面中插入值，进行数据的绑定显示，且当值发生变化时页面会重新渲染加载，称为***响应式特性***，即数据状态同步操作

​ 注意：

1. 插值表达式不仅可以在标签中或标签外使用，也可以为标签的属性绑定值

<view id='{{name}}'>姓名</view>

2. 用插值表达式指定自定义对象时会展示object，但对象.属性是可以展示出来的

3. 值为null就直接展示null，值为undefined或变量不存在时，会以空字符串输出显示

4. 插值表达式中可以做简单的运算

5. 在插值表达式中直接定义对象时两边一定要有空格

6. 微信小程序中插值表达式中不能调用JS内置对象

   //微信小程序中插值表达式中不能调用JS内置对象
   <view>{{ new Date() }}</view>
   

2. 条件/列表渲染

​ 条件渲染：

• 使用wx:if=""来判断是否需要渲染组件，取值可以为any任意类型，会转换为boolean结果

• 会根据boolean结果，执行元素的创建和删除操作，控制元素的显示隐藏

  注意：值不能直接写true/false,一定要从数据仓库中取值

<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定义代码片段，然后在不同的地方多次调用，实现页面代码结构的复用

​ 使用步骤：

1. 定义模板，通过name属性指定模板的名字
2. 调用模板，通过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'
    }
  }
})

​ 注意：模板样式的加载

1. 加载全局样式
2. 加载引用模板的页面的局部样式
3. 对于独立的外部模板样式文件，可以在引用该模板的页面中通过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中只能写相对路径,这种方法是在导入时起模块名