微信小程序开发

一. 开发环境介绍

微信小程序是一种不需要下载安装即可运行在微信环境中的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可。简单说，就是把手机上的APP搬到微信里面，不需要下载安装就可以直接使用。
用户可以在微信的“发现”栏找到“小程序”的入口，从该入口可以打开需要的小程序。

(一) 基本结构分析

视图层来实现页面结构，由WXML和WXSS编写，并由组件进行展示。
逻辑层来实现后台功能，由JavaScript编写，逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内方便地获取和传播，同时具有出色的使用体验。

• 不用安装，用完即走。
• 开发成本低，可以跨平台。
• 使用方便，推广简单。

当然，除了上述的一些优点外，到目前为止小程序发展过程中也面临一些问题。

• 小程序不能分享朋友圈，只能分享给朋友、群；
• 小程序没有推送功能，不能给用户推送消息。

---

(二) 小程序开发软件下载，安装

1. 软件下载

微信小程序开发软件下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2. 软件安装，入门

1. 下载完成后，双击运行安装包。一般情况下按照安装向导提示，保持默认设置，单击“下一步”按钮，一直到安装完成即可。
   

2. 运行微信开发者工具，用自己的微信账号扫描登录。
   

3. 登录后可以选择开发小程序、小游戏或公众号等。
   

4. 点击+号，新建一个小程序项目，可以更改本地路径。可以申请注册AppID，或使用测试号。
   

5. 选择JavaScript后开发工具主界面

---

---

框架分析

---

---

一. 目录结构介绍

目录结构可以分为3个部分：框架全局文件，框架页面文件，工具类文件

(一) 全局文件

文件	作用
app.js	该文件是小程序项目的启动入口文件，主要处理小程序生命周期中的一些方法。不能为空
app.json	该文件是小程序的全局配置文件，主要用于设置导航条的颜色、字体大小、tabBar等。不能为空
app.wxss	该文件是小程序的公共样式文件，主要用于全局美化设计界面。可以为空

1. app.js

app.js:用来定义全局数据和函数的使用，它可以在App() 函数里完成小程序的注册以及指定生命周期函数。

当用户首次打开小程序，触发onLaunch( )方法，该方法全局只触发一次；
当小程序初始化完成后，触发onShow( )方法，该方法用于监听小程序显示；
当小程序从前台进入后台(如按设备的Home键)，触发onHide( )方法，该方法用于监听小程序隐藏；
当小程序从后台进入前台(如再次打开小程序)，触发onShow( )方法；
当小程序在后台运行一定时间，或者系统资源占用过高，才会被真正销毁。

函数	解析
onLaunch( )	监听小程序初始化
onShow( )	监听小程序显示
onHide( )	监听小程序隐藏
onError( )	监听小程序出错

2. app.json

app.json:全局配置文件，配置页面路径，配置窗口表现，配置标签导航，配置网络超时，配置debug模式等。

1) pages

pages：用于描述当前小程序所有页面路径。

在当前页面直接定义需要创建的页面路径，就可以直接生成相关文件，无需自己创建。

2) window

• window：用于设置小程序顶部导航条，背景色，标题文字等。

配置项	功能
navigationBarBackgroundColor	导航条背景颜色（#000）
navigationBarTextStyle	导航条标题颜色，仅支持white / black
navigationBarTitleText	导航条标题内容
navigationStyle	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundColor	设置窗体下拉刷新或上拉加载时露出的背景色，需要将enablePullDownRefresh 属性值设置为 true
enablePullDownRefresh	设置是否开启当前页面的下拉刷新，默认值为false
backgroundTextStyle	设置窗体下拉 loading 的样式，仅支持dark / light，默认值为 dark

3) tabBar

• tabBar：用于设置小程序tab标签的显示样式、切换时的对应页面。
  

Iconfont：图标素材下载。将素材拷贝到项目文件images中即可。https://www.iconfont.cn/

配置项	功能
color	设置 tab 上文字的颜色
selectedColor	设置 tab 上文字选中时的颜色
backgroundColor	设置 tab 的背景色
borderStyle	设置 tabBar 上边框的颜色，仅支持 black / white，默认为 black
list	设置 tabBar 上 tab 的列表数组，该数组元素最少2个，最多5个
position	设置 tabBar 的位置，仅支持 bottom(底部)top(顶部)，默认为bottom

• list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	说明
pagePath	页面路径，必须在pages中先定义
text	tab 上按钮文字
iconPath	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
selectedIconPath	选中时的图片路径

---

(二) 工具类文件

目录中有一个“utils”文件夹，它用来存放工具栏的js 函数，如放置日期格式化函数，时间格式化函数，等一些常用的函数。定义完这些函数后， 要通过module.exports将定义的函数名称注册进来，在其他的页面才可以使用，如图所示为时间格式化工 具类文件。

---

(三) 页面文件

页面文件由4个文件组成，分别是js页面逻辑、wxml页面结构、wxss页面 样式表和json页面配置。

文件类型	作用
.js	页面逻辑
.wxml	页面结构
.wxss	页面样式表
.json	页面配置

---

---

二. 注册程序应用

App.js文件不仅可以定义全局函数和数据，还可以注册一个小程序。在App()函数里可以完 成小程序的注册以及指定其生命周期函数。

如表所示为生命周期函数的定义。

• onLaunch生命周期函数。它用来监听小程序初始化，一旦初始化完成，就会触发该函数， 这个生命周期函数只会触发一次。
• onShow生命周期函数。它用来监听小程序显示。微信小程序有前后台定义。当用户单击左上角的“关闭”按钮或者按“Home”键关闭或者突然来电话时，微信小程序都没有销毁， 而是进入后台；当再次进入微信或者小程序的时候才会触发onShow生命周期函数。只要程序启动或者从后台进入到前台都会触发该函数。
• onHide生命周期函数。它用来监听小程序隐藏，一旦微信小程序从前台进入到后台，就会 触发该函数。
• onError生命周期函数。它用来监听小程序脚本或者API是否发生错误，发生错误时返回错 误信息。

---

---

三. 注册页面的使用

在.js文件里的Page() 函数用于注册一个页面。 接受一个object 参数，其指定页面的初始数据、生命周期函数、 事件处理函数等页面的所有业 务逻辑处理都放在这个文件里。

object参数说明如表所示。

(一) 页面初始化数据

• data页面初始化数据：初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由 逻辑层传至渲染层，所以其数据必须可以转换成 JSON 的格式——字符串、数字、布尔值、对 象或数组。渲染界面可以通过 WXML 对数据进行绑定。

---

(二) 生命周期函数

• onLoad页面加载。一个页面只会调用一次，接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的query。
• onShow页面显示。每次打开页面都会调用一次。
• onReady页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视 图层进行交互，对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
• onHide页面隐藏。当navigateTo或底部Tab切换时调用。
• onUnload页面卸载。当redirectTo或navigateBack时调用。

---

(三) 页面相关事件处理函数

• onPullDownRefresh下拉刷新。监听用户下拉刷新事件，需要在config的window选项中开 启enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当 前页面的下拉刷新。
• onShareAppMessage用户分享。只有定义了此事件处理函数，右上角菜单才会显示“分 享”按钮，用户单击“分享”按钮的时候会调用，此事件需要 return 一个 Object，用于 自定义分享内容。分享参数说明如表所示。
  

---

(四) 页面路由管理

小程序的页面路由都是有微信小程序框架来管理的，路由的触发方式及页面生命周期 函数如表所示。

---

(五) 自定义函数

除了初始化数据和生命周期函 数，Page 中还可以定义一些特殊 的函数：事件处理函数。在渲染层 可以在组件中加入事件绑定，当达 到触发事件时，就会执行 Page 中 定义的事件处理函数。

<view bindtap="clickMe"> click me view>

Page({
	clickMe: function() {  
		console.log('view tap')
	}
})

---

(六) setData设值函数

• Page.prototype.setData()设值函数：setData 函数用于将数据从逻辑层发送到视图层，同时 改变对应的 this.data 的值。
• setData() 参数格式：接受一个对象，以 key、value 的形式表示将 this.data 中的 key 对应的 值改变成 value。
• 其中， key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不 需要在this.data 中预先定义。

---

---

四. 绑定数据

WXML页面里的动态数据都是来自js 文件Page的data，数据绑定就是通过双大 括号（{{}}）将变量包起来，在WXML页面 里将数据值显示出来。

index.wxml
<view> {{ message }} view>

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

(一) 组件属性绑定

组件属性绑定是将data里的数据绑定 到微信小程序的组件上。

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

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

---

(二) 控制属性绑定

控制属性绑定用来进行if语句条件 判断，如果满足条件，则执行，否则 不执行，示例代码如下。

<view wx:if="{{condition}}"> view>

Page({
	data：{  
		condition: true
	}
})

---

(三) 关键字绑定

关键字绑定常用于组件的一些关键字，像复选框组件一样。checked关键字如果等于true 则代表选中复选框，false则代表不选中复选框。

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

---

(四) 运算

可以在 {{}} 内进行简单的运算， 支持以下几种方式的运算。

1. 三元运算
2. 数学院算
3. 逻辑判断
4. 字符串运算
5. 数据路径运算

---

---

五. 条件渲染

(一) wx:if 判断单个条件

在微信小程序框架里，使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块，示例代码 如下。

<view wx:if="{{condition}}"> True view>

使用 wx:elif 和 wx:else 来添加一个 else 块，示例代码如下。

<view wx:if="{{length > 5}}"> 1 view>
<view wx:elif="{{length > 2}}"> 2 view>
<view wx:else> 3 view>

---

(二) block wx:if 判断多个组件

因为 wx:if 是一个控制属性，需要 将它添加到一个标签上。但是，如果 我们想一次性判断多个组件标签，则 可以使用一个 标签将多个组 件包装起来，并在其上使用 wx:if 控制 属性。

<block wx:if="{{true}}">
	<view> view1 view>
	<view> view2 view>
block>

---

---

六. 列表渲染

(一) wx:for 列表渲染单个组件

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前 下标的变量名，示例代码如下。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
	{{idx}}: {{itemName.message}}
view>

---

(二) block wx:for 列表渲染多个组件

wx:for应用在某一个组件上，但 是如果想渲染一个包含多节点的结构 块，wx:for就需要应用在标签 上，示例代码如下。

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

---

(三) wx:key 指定唯一标识符

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己 的特征和状态（如 中的输入内容、 的选中状态），需要使用 wx:key 来指定列表中项 目的唯一标识符。
wx:key 的值有以下两种形式:

1. 字符串。字符串代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列 表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字。 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字 符串或者数字，当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确 保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时 的效率。

---

---

七. 定义模板

(一) 定义模板

在