前言

我们交流、支付都会用到微信，依托于微信的小程序迅速崛起速度是相当可观的。今天我们就从最基础的开始一步步了解小程序的构成，让我们一起编写自己的第一个微信小程序吧~

一、宿主环境

1. 什么是宿主环境？

宿主环境指的是 程序运行所必须的依赖环境，例如：

Android 系统和 IOS 系统是两个不同的宿主环境
安卓版的微信 App 是不能在 IOS 环境下运行的。所以 Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的

2. 小程序的宿主环境

手机微信是小程序的宿主环境，如图所示：

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：

微信扫码、微信支付、微信登录、地理定位、ETC 等等

小程序宿主环境包含的内容
- 通信模型
- 运行机制
- 组件
- API

3. 小程序的通信主体

小程序中通信的主体是 渲染层 和 逻辑层，其中：

WXML 模板和 WXSS 样式工作在渲染层
JS 脚本工作在逻辑层

4. 小程序的通信模型

小程序中的通信模型分为两个部分

渲染层 和 逻辑层 之间的通信由微信客户端进行转发
逻辑层 和 第三方服务器 之间的通信由微信客户端进行转发

5. 运行机制

小程序启动的过程
- 把小程序的代码包下载到本地 - 从缓存中拿代码包
- 解析 app.json 全局配置文件
- 执行 app.js 小程序入口文件，调用 App() 创建小程序实例
- 渲染小程序首页
- 小程序启动完成
页面渲染的过程
- 加载解析页面的 .json 配置文件
- 加载页面的 .wxml 模板和 .wxss 样式
- 执行页面的 .js 文件，调用 Page() 创建页面实例
- 页面渲染完成

二、小程序中的组件

1. 常用的视图组件

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是： ① 视图容器 ② 基础内容 ③ 表单组件 ④ 导航组件 ⑤ 媒体组件 ⑥ map 地图组件 ⑦ canvas 画布组件 ⑧ 开发能力 ⑨ 无障碍访问
常用的视图容器类组件
- view 组件普通视图区域，类似于 HTML 中的 div 是一个块级元素常用来实现页面的布局效果
- scroll-view 组件可滚动的视图区域常用来实现滚动列表效果
- swiper 和 swiper-item 组件轮播图容器组件和轮播图 item 组件

2. view组件

相当于HTML中的div

简单使用：代码如下（示例）： .wxml中书写结构代码

<view class="container">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

.wxss中书写样式代码

.container {
  display: flex;
  justify-content: space-around;
}
.container view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container view:nth-child(1) {
  background-color: lightgreen;
}

.container view:nth-child(2) {
  background-color: lightskyblue;
}

.container view:nth-child(3) {
  background-color: lightcoral;
}

3. sroll-view组件

应用场景：在外卖小程序中常见的左侧菜单栏/右侧商品滑动效果

简单使用：代码如下（示例）： wxml中书写结构代码

<!-- scroll-x 属性：允许横向滚动 -->
<!-- scroll-y 属性：允许纵向滚动 -->
<!-- 注意：使用竖向滚动时，必须给 scroll-view 一个固定的高度 -->
<scroll-view class="container" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

wxss中书写样式代码

.container {
  width: 100px;
  height: 120px;
}

.container view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container view:nth-child(1) {
  background-color: lightgreen;
}

.container view:nth-child(2) {
  background-color: lightskyblue;
}

.container view:nth-child(3) {
  background-color: lightcoral;
}

4. 轮播图组件

小程序中集成了轮播图效果的标签swiper，但是swiper标签需要和swiper-item标签搭配使用。其中还有很多实用的属性，看下方代码了解一下吧~

简单使用：代码如下（示例）： wxml中书写结构代码

<!-- 轮播图区域 -->
<!-- indicator-dots 属性：显示面板指示点 -->
<swiper indicator-dots class="swiper-container">
  <!-- 第一项 -->
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <!-- 第二项 -->
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <!-- 第三项 -->
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

wxss中书写样式代码

.swiper-container {
  /* 轮播图容器的高度 */
  height: 150px;
}

.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}

swiper-item:nth-child(2) .item{
  background-color: lightskyblue;
}

swiper-item:nth-child(3) .item{
  background-color: lightcoral;
}

常用属性速查表格 swiper 组件的常用属性文档

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

5. 文本组件

常用的文本组件有以下两种：

text 文本组件类似于 HTML 中的 span 标签，是一个行内元素
rich-text 富文本组件支持把 HTML 字符串渲染为 WXML 结构

text组件简单使用：通过 text 组件的 selectable 属性，实现长按选中文本内容的效果

<!-- 常用的基础内容组件 text 和 rich-text 的用法 -->
<view>
  手机号支持长按选中效果
  <text selectable>18222222222</text>
</view>

rich-text组件的基本使用：通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构

<!-- 应用场景 -->
<rich-text nodes="<h4 style='color: red'>rich-text组件</h4>"></rich-text>

6. 按钮组件

和HTML中的按钮标签一样，但是小程序中的按钮组件功能更加丰富。

常用其他组件

button 按钮组件通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
image 图片组件 image 组件默认宽度约为 300px 、高度为 240px
navigator 页面导航组件类似于 HTML 中的 a 标签

按钮组件常用属性速查表 Button 组件的详细文档

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称是否带 loading t图标

按钮组件简单使用：

<!-- 通过 type 指定按钮类型 -->
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>


<!-- size="mini" 小尺寸按钮 -->
<button size="mini">默认按钮</button>
<button size="mini" type="primary">主色调按钮</button>
<button size="mini" type="warn">警告按钮</button>

<!-- plain 镂空效果 -->
<button plain size="mini">默认按钮</button>
<button plain size="mini" type="primary">主色调按钮</button>
<button plain size="mini" type="warn">警告按钮</button>

7. 图片组件

小程序中的图片标签是image,HTML中是img

image组件简单使用

src -- 支持本地和网络上的图片
mode -- 指定图片的裁剪、缩放的模式

<!-- 2. 使用 src 指向图片路径 -->
<image src="/images/xxx.jpg" mode="widthFix"></image>

图片组件mode属性常用属性值

mode 值	说明
scaleToFill	默认值，缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变，这里的宽度是指 image 宽度，不在是默认值
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变，这里的高度是指 image 高度，不在是默认值

三、数据绑定

1. 数据绑定原则

与vue类似，小程序数据绑定的基本原则是：

在 data 中定义数据
在 wxml 中使用数据

定义：页面需要的数据，在与页面对应的js文件中data对象中定义即可。

data: {
  num: 0
}

使用：在wxml中，使用 Mustache 语法 (双大括号) 将变量包起来即可.

<view>{{ num }}</view>

2. 动态绑定属性

Mustache 语法的应用场景：

绑定内容
绑定属性
运算(三元运算、算术运算符)

如果你对vue已经有了了解，那么可以理解为在vue的插值表达式中可以书写的，在Mustache语法中也是可以书写的。

四、事件绑定

在小程序里，事件的绑定与vue相比还是有一定区别的。

1. 什么是事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染成产生的行为，反馈到逻辑层进行业务的处理

2. 常用的事件

bindtap、bindinput、bindchange

bind:tap、bind:input、bind:chage

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 click 事件
input	bindinput 或者 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

事件对象的属性列表 当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下

属性	类型	说明
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
`target`	Object	`触发事件的组件的一些属性值集合`
currentTarget	Object	当前组件的一些属性值集合
`detail`	Object	`额外的信息`
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

3. target 和 currentTarget 的区别

target 是触发该事件的源头组件
currentTarget 则是当前事件所绑定的组件

点击内部的按钮时，点击事件以 冒泡 的方式向外扩散，也会触发外层 view 的 tap 事件处理程序此时，对于外层的 view 来说：

e.target 指定的是触发事件的源头组件，因为 e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件，因此 e.currentTarget 是当前的 view 组件

4. bindTab

小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为

通过 bindtap，可以为组件绑定 tap 触摸事件
在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event(一般简写为 e) 来接收

示例代码：

data: {
  count: 0
}
// 按钮 tap 事件处理函数
btnTapHandle (e) {
  // 事件参数对象 e
  console.log(e)
  // 可以使用setData来给data中的数据赋值
  // 可以通过事件对象e中dataset中获取到传给事件处理函数的参数
  this.setData({
  	count: this.data.count + e.target.dataset.num
  })
}

wxml代码

<view>
  <button type="primary" data-num="{{ 2 }}" bindtap="btnTapHandle">+2</button>
</view>

5. bindinput

给输入框绑定一个输入事件，这里我们主要实现一下文本框和data数据的双向绑定。

示例代码（如下）： wxml书写结构代码

<view>
  <input value="{{ msg }}" bindinput="setMsg" />
</view>

对应的js文件中书写逻辑代码

data: {
  msg: ``
},
// 实现文本框和 data 之间数据的同步
setMsg (e) {
  this.setData({
    msg: e.detail.value
  })
}

wxss中书写样式代码

input {
 border: 1px solid lightcoral;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}

五、条件渲染

在vue中使用到的条件渲染语句是v-if和v-show，而在小程序当中与之类似，是wx:if,通常和wx:elif、wx:else搭配使用

1. wx:if

示例代码（如下）：

<!-- 条件渲染 -->
<view wx:if="{{ type === 1 }}">男</view>
<view wx:elif="{{ type === 2 }}">女</view>
<view wx:else>保密</view>

如果要对一个整体进行条件判断渲染，又不愿使用view组件增加无用标签嵌套，可以使用block标签，这个标签类似于vue中的template，既可以完成条件判断，也不会渲染至页面上。

2. hidden

在小程序框架中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏

示例代码（如下）：

<view hidden="{{ false }}">条件为 true 隐藏，条件为 false 显示</view>

3. wx:if和hidden区别

运行方式不同

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden 以切换样式的方式(display: none/block)，控制元素的显示和隐藏

使用建议

频繁切换时，建议使用 hidden
控制条件复杂时，建议使用 wx:if 搭配 wx:elif 、wx:else 进行展示与隐藏的切换

六、列表渲染

1. wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构。渲染时：直接将data中的变量名放在双花括号中即可默认item为数据中的每一项，index为每一项的索引

示例代码（如下）：在js文件的data对象中定义一个数组

data: {
  arr: ['亚瑟', '妲己', '蒙恬']
}

在wxml中渲染数组中数据

<view wx:for="{{ arr }}">
  索引是: {{ index }}，数组的每一项是：{{ item }}
</view>

2. 修改默认

使用 wx:for-item 可以指定数组当前元素的变量名使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{ arr }}" wx:for-index="idx" wx:for-item="itemName">
  索引是: {{ idx }}，数组的每一项是：{{ itemName }}
</view>

3. wx:key

类似于 Vue 列表渲染中的 :key ，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而添加渲染的效率

总结

A good book is your best friend.

微信小程序入门必看①

前言

一、宿主环境

1. 什么是宿主环境？

2. 小程序的宿主环境

3. 小程序的通信主体

4. 小程序的通信模型

5. 运行机制

二、小程序中的组件

1. 常用的视图组件

2. view组件

3. sroll-view组件

4. 轮播图组件

5. 文本组件

6. 按钮组件

7. 图片组件

三、数据绑定

1. 数据绑定原则

2. 动态绑定属性

四、 事件绑定

1. 什么是事件

2. 常用的事件

3. target 和 currentTarget 的区别

4. bindTab

5. bindinput

五、条件渲染

1. wx:if

2. hidden

3. wx:if和hidden区别

六、 列表渲染

1. wx:for

2. 修改默认

3. wx:key

总结

四、事件绑定

六、列表渲染