微信小程序入门速览

一、小程序概述

1、建立一个小程序项目

1、注册小程序

在开发之前我们需要先来注册一个小程序账号，进入“微信公众平台”（ https://mp.weixin.qq.com ）进行注册。

2、获取 AppID

在左侧菜单栏中找到“开发”选项，点击进入该栏后进行点击“开发设置”就可以看到自己的 AppID，这是微信公众平台上的小程序 ID。微信通过它来确定小程序“身份”及提供相应的功能接口。

3、下载安装开发者工具

下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ，打开后选择适合自己电脑系统版本的进行下载（这里我用的是 Windows 64），双击运行下载好的软件，一直点“下一步”安装到底即可

4、打开开发者工具，新建项目

安装完开发者工具后会自动在桌面添加“微信开发者工具”快捷图标，点击“微信开发者工具”图标打开微信小程序开发工具。

这里就需要前面获取的 AppID 了，填入就可以新建项目了。

2、文件结构

通过观察我们新建的小程序项目，可以发现小程序由描述整体程序的 app 文件和小程序页面组成。描述整体程序的 app 文件包含 app.js 、app.json、app.wxss 三个文件；而每个小程序页面都由 .js、.json、.wxml、.wxss 四个文件组成，如图所示。

注：这里生成的页面文件的文件名不一定是weekly，但文件结构应该是相同的。

3、全局文件

全局文件是描述整体程序的三个文件，分别为 app.js、app.json、app.wxss，我们可以通过这几个文件为小程序进行一些全局配置。

app.js

是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，调用框架提供丰富的 API。

app.json

是对整个小程序的全局配置。我们可以在这个文件中配置小程序由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。（pages：注明该小程序下面所有的页面；window：默认页面的窗口标题、样式等信息）

app.wxss

整个小程序的公共样式表。在所有的小程序页面上可以直接使用该文件里面的样式。这个里面样式的写法和CSS3 样式的写法基本是一致的，也支持 CSS3 的一些特性。

4、页面文件

前面介绍了小程序中的每个页面都由4个文件组成，它们分别为 index.js、index.json、index.wxml、index.wxss。当我们创建一个小程序页面时，会自动生成这 4 个文件，这四个文件就是小程序的页面文件。

index.wxml

页面的结构文件。该文件主要负责向小程序添加页面元素。小程序页面的编写方式和网页的 HTML 类似。不过里面的标签种类不是很多。常用的就是 view 标签（和 HTML 中 的 div 类似）。

基本上是组件

index.wxss

当前页面使用的样式表文件，它只对当前页面生效，我们可以在此文件中添加当前页面的特有样式而不会影响其它页面。

index.js

页面的脚本文件。它主要负责小程序中的运行逻辑部分，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

index.json

页面的配置文件。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相关的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

5、页面生命周期

请在小程序中，通过 Page()来注册一个页面。页面生命周期函数就是一组每当你进入/离开一个页面的时候都会调用的函数。

小程序的生命周期函数的调用顺序为：onLoad>onReady>onShow。

onLoad：小程序加载页面时触发 onLoad 函数，一个页面只会调用一次；

onReady：首次显示页面时，会触发 onReady 函数，渲染页面和样式，一个页面只会调用一次；

onShow：页面载入后会触发 onShow 函数，显示页面，每次打开页面都会调用一次；

onHide：当小程序后台运行或跳转到其他页面时，会触发 onHide 函数；

onUnload：当使用 wx.readirectTo(OBJECT)或关闭当前页返回上一页 wx.navigateBack()，会触发 onUnload 函数，监听页面卸载。

6、小程序概念

**微信小程序经常被简称为小程序。**小程序其实是运行在微信平台之上的一种轻量级应用程序。小程序不同于app，app 需要下载后进行安装才可以使用，而小程序是一种不需要下载安装就可以使用的手机应用，用户扫一扫或者搜一下即可打开应用，体现了“用完即走”的理念。

近两年消费习惯和生活趋势慢慢在改变，吃饭排队可以用小程序，买火车票、飞机票可以用小程序，甚至酒店住宿也可以用小程序，我们生活的方方面面已经被小程序包围了。小程序随时可用，但又无需安装的特点，促进了它的普及。

小程序的技术体系源自web技术。web技术在互联网时代已经建立起极为广泛的生态，非常有利于人们创建出更多更好的应用。在2017年腾讯推出了微信小程序之后，支付宝、百度、京东等互联网公司以及华为、苹果等手机厂家也都推出了自己的小程序。小程序已经得到了用户和企业的广泛认可。

7、小程序技术架构基础

小程序包含视图层功能和逻辑层功能。

视图层负责界面显示的控制，由WXML文件和WXSS构成。其中，WXML规定了页面上呈现的内容，WXSS规定了呈现效果。视图层也叫渲染层。真正的渲染实现，是靠微信浏览器内核的排版渲染引擎来完成。排版渲染引擎能够根据WXML和WXSS文件的描述，在手机屏幕上实现出编程者希望出现的显示效果。

逻辑层负责数据处理以及与视图层进行通信，采用JavaScript语言编写和实现，包含一系列的方法或API。例如，小程序在基本JavaScript的基础上新增了App()方法和Page()方法， 分别用于小程序和页面的注册；还提供了丰富的微信原生API，可以通过这些API调用微信支付、微信运动、微信扫码等微信的功能以及本地存储、加速度传感器等手机上的功能。同样的，小程序只是给出了JavaScript程序，而程序的执行依靠在微信运行环境中的JavaScript引擎来执行。

小程序的技术是在web网页技术基础上进行了一些特殊的修改，因此其技术风格与web网页相近。WXML对应于web中的HTML、WXSS对应于web中的CSS，有一些小的改动。小程序的JavaScript与web中的JavaScript基本一致。

二、小程序代码结构

1、WXML代码

wxml全称是WeiXin Markdown Language，是一种标记语言。如果把微信小程序的页面比作一个宿舍的话，wxml代码就是构成宿舍的房间，一个宿舍必须拥有一个房间，因此wxml代码也是构成小程序页面的必须代码。wxml代码写在小程序中的.wxml为后缀的文件中，主要由标签、属性和一些特殊语法构成，它们就像宿舍的床、桌子、椅子等物品，共同构建了整个宿舍房间的外貌。这就是wxml代码的主要作用。

2、JavaScript代码

依然使用宿舍的例子，如果说wxml代码是宿舍的房间，那么js代码就是控制宿舍的人，宿舍中灯的开关，门的开关、抽屉的推拉，宿舍何时进入睡眠时间、何时可以进入等等一切事件都需要宿舍的成员来控制，没有这些事件的控制，就无法构成宿舍的日常运作，因此js代码也是小程序必须的代码。js代码对应的是小程序中的.js为后缀的文件，这些文件通过JavaScript语言编写完成，就像前面所比喻的，js代码主要负责一些逻辑、事件的控制，以给予小程序页面更丰富的动态变化及用户体验。

3、WXSS代码

wxss全称是WeiXin Style Sheets，是一套样式语言，同样是宿舍的例子，wxss代码在小程序中的作用相当于可以决定宿舍中各类物品的形状、颜色、摆放位置，放在小程序中就是决定wxml中各种标签的形状、颜色、位置、动画效果等。当然，如果没有wxss代码，这些标签也会有其默认的形状、颜色等，因此wxss代码并不是小程序开发中必须使用的，但要开发出精美的、有吸引力的小程序，wxss代码是必不可少的。

4、JSON代码

不同与前面介绍的wxml、js以及wxss代码，json代码不是一种编程语言，而是一种数据格式，就像wxml中介绍的数组类型的概念一样，json是另一种存储数据的形式。在小程序的页面中，json代码的作用是静态配置，这相当于是宿舍中很少变化的东西，比如宿舍号、宿舍墙壁的颜色、床位号等等。小程序页面中也有许多不变的配置，如页面的tab名称、背景颜色、字体，页面中用到的组件名称等，这些都会写在以json代码的形式写入以.json为后缀的文件中。与wxss相同，如果不写入任何配置，页面也会有其默认的配置，因此json代码也是小程序开发中非必须的。

三、信息呈现类组件

1、view组件

在小程序中使用最多的就是 view 组件，它是一个容器，可以装一些东西，然后通过布局可以构建一个很美的小程序页面。使用方法十分简单，就是使用开始标签和结束标签将内容包起来就行，如：

<view>打算显示的内容</view>

扩展属性

属性

类型

默认值

说明

hover-class

string

none

指定按下去的样式类。当hover-时，没有点击态效果

hover-stop-propagation

boolean

false

指定是否阻止本节点的祖先节点出现点击态

hover-start-time

number

50

按住后多久出现点击态，单位毫秒

hover-stay-time

number

400

手指松开后点击态保留时间，单位毫秒

2、image组件

image 是在页面上显示一张照片的组件，它可以支持 JPG、PNG、SVG、WEBP、GIF 等格式。小程序中所有的标签都是两两成对的，有开始标签就要有闭合标签，所以他的正确使用方法是：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IlXNnlln-1628317814174)(https://www.ourspark.org/point/602df4b15165a14f347bb48b,0,2)]，其中 src 的引号中是你要显示的照片路径，可以是相对路径也可以是绝对路径。

wxml 代码：

<image src="../../1.png"></image>

运行结果：

扩展属性

属性

类型

默认值

说明

src

string

图片资源地址

mode

string

scaleToFill

图片剪裁、缩放的模式

webp

boolean

false

默认不解析webP格式，只支持网络资源

lazy-load

boolean

false

图片懒加载，在即将进入一定范围（上下三屏）时开始加载

show-menu-by-longpress

boolean

false

开启长按图片显示识别小程序码菜单

binderror

eventhandle

当错误发生时触发，event.detail = {errMsg}

bindload

eventhandle

当图片载入完毕时触发，event.detail = {height,width}

3、text组件

text 是一个文本组件，将我们要展示的一些文字包起来，也就是这里是要显示的文字，它默认是在一行显示的，也就是说它是一个行内元素，宽高都是由里面的内容来决定的，如果里面没有文字的话，就不会显示任何东西了。

wxml 代码：

<text>hello world</text>

运行结果：

扩展属性

属性

类型

默认值

说明

selectable

boolean

false

文本是否可选

space

string

显示连续空格

decode

boolean

false

是否解码

space的合法值

值

说明

ensp

中文字符空格一半大小

emsp

中文字符空格大小

nbsp

根据字体设置的空格大小

4、最简组件体验

在小程序中，view、image、text、video、audio、progress、icon 等组件的功能，都是呈现某一类信息，我们将这些组件归纳为信息呈现类组件。这一类组件虽然功能相对简单，但用途很广泛。

在下面的学习中， 我们先来迅速了解一下各个组件的最简形态，再观察它们每一个组件如何进行功能扩展。

5、process组件

progress 用于显示进度状态，比如资源加载、用户资料完成度、媒体资源播放进度等。使用方法

WXML代码：

<progress percent="80"/>

运行结果：

6、icon组件

icon 组件是小程序提供的一个常用图标库，，它提供了一个 type 属性，只要提供有效值，便能在页面中显示出一个与有效值对应的图标（有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear）。在小程序中，图标是经常出现的东西。图标也是图，当然也可以用image组件来实现。但如果每个图标都要去找图，然后写 wxss 样式来达到我们的需求，会感觉十分复杂。icon组件的出现，能够让常用的图标变得规范，也变得简单。

WXML代码：

<icon type="success"></icon>

运行结果：

四、人机交互类组件

1、button组件

button组件正如它的名字所示，代表的是一个按钮。button是小程序中最基础的交互组件，几乎每一小程序中都会存在着button组件。可以通过电灯的例子来理解button组件，当你在尝试要开一盏灯时，一定会使用到开关，按下开关，灯泡的状态就会发生变，从关闭到开启，从亮度一到亮度二等等。在小程序中也是类似，button组件的作用就是去改变页面上某些元素的状态，如果你的想象力足够丰富，你可以使用button组件完成很多不可思议的操作。下面来看看button组件的基础用法。

button组件在WXML中的定义代码如下：

<button> button 组件 </button>

也可以=通过以下属性快速设置一些简单样式。

属性

类型

默认值

说明

size

string

default

按钮的大小

type

string

default

按钮的样式类型

plain

boolean

false

按钮是否镂空，背景色透明

disabled

boolean

false

是否禁用

loading

boolean

false

名称前是否带loading图标

可以通过 bindtap 属性为按钮绑定触摸后的事件，从而实现交互。

关于 button 组件的更多用法可以参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2、事件绑定机制

不同于上一节的信息呈现类组件，交互类组件不仅需要用到WXML文件，也需要JavaScript文件的配合，那么在小程序中，是如何联系起WXML和JavaScript这两个文件的呢？答案是事件绑定机制。在了解事件绑定机制之前，先来介绍一下什么是事件。在小程序中，事件主要有以下四个特点：

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

简单理解，信息呈现类组件可以让你完成一个静态的页面，但事件机制加上交互类组件就可以让你的页面动起来，根据你的操作呈现不同的效果。接下来看看如何使用事件机制。

在组件中绑定一个事件处理函数。如 bindtap，当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

在相应的 Page 定义中写上相应的事件处理函数，参数是 event。

Page({  tapName: function(event) {    console.log(event)  }})

关于事件响应机制的更多用法可以参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

3、switch组件

switch 是小程序中的开关组件，常用该组件控制并显示某一功能的开关状态。相较于button组件，switch组件的功能更加具体，你当然可以用button组件实现于swtich组件相同的效果，但那样会浪费你的大量时间，并且会增加你的代码量，所以如果你需要完成的效果比较只是简单的两种状态间的切换，可以考虑使用switch组件

下面是使用 switch 组件时的基本代码格式以及常用属性。

<switch/> switch 组件

属性

类型

默认值

说明

checked

boolean

false

是否选中

disabled

boolean

false

是否禁用

type

string

switch

样式，有效值：switch, checkbox

color

string

#04BE02

switch 的颜色，同 css 的 color

bindchange

eventhandle

checked 改变时触发 change 事件，event.detail={ value}

关于 switch 组件的更多用法可以参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/switch.html

4、人机交互类组件

上一节介绍的信息呈现类组件，如text或icon组件，其主要功能就是单纯的将指定信息通过程序呈现出来。另外的一些组件，如button（按钮）、switch（开关）或radio（单选框）等组件的功能要复杂一些。这些允许用户通过触摸屏进行点击，并根据点击的位置不同，组件呈现的形态也会发生一些变化，因此给人的感觉是这些组件具有人机交互功能。我们将这一类组件划分成一个新的类别，就是人机交互类组件。在微信小程序中，这样的组件有button、switch、radio、checkbox、form、input等，用户可以通过这些组件实现改变某一变量的值或者输入某些数据等操作。

5、radio 组件

radio单选组件,常在小程序中用来实现单项选择，它的使用代码格式及常用属性如下：

<radio checked="true"/>选中

属性

类型

默认值

说明

value

string

radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value

checked

boolean

false

当前是否选中

disabled

boolean

false

是否禁用

color

string

#09BB07

radio的颜色，同css的color

关于 radio 组件的更多用法可以参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

6、checkbox组件

请在此输入知识点内容checkbox 是微信小程序中的多选组件，我们常用用该组件实现一些多项选择题。使用时的基本代码格式如下：

<checkbox> checkbox 组件 </checkbox>

checkbox 组件的常用属性如下：

属性

类型

默认值

说明

value

string

checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value

disabled

boolean

false

是否禁用

checked

boolean

false

当前是否选中，可用来设置默认选中

color

string

#09BB07

checkbox 的颜色，同 css 的 color

关于 checkbox 组件的更多用法可以参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

7、input组件

input 是小程序的输入框组件。其使用时的基本格式是：

<input placeholder="请在此输入内容"/>

可以通过以下属性设置 input 输入框的初始状态：

属性

类型

默认值

说明

value

string

输入框的初始内容

password

boolean

false

是否为密码类型

placeholder

string

输入框为空时占位符

placeholder-style

string

指定 placeholder 的样式

disabled

boolean

false

是否禁用

maxlength

number

140

最大输入长度，设置为 -1 的时候不限制最大长度

auto-focus

boolean

false

启用自动聚焦

placeholder-class

string

input-placeholder

指定 placeholder 的样式类

input 组件的常用事件有：

属性

类型

说明

bindinput

eventhandle

键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值

bindconfirm

eventhandle

点击完成按钮时触发，event.detail = {value: value}

其中 bindinput 事件每当输入框中内容改变后都会触发，而 bindconfirm 事件只会在点击完成按钮后触发。

还可以通过 input 组件的 type 属性为组件设置不同的输入内容格式，启用不同的键盘。type 组件的可选值有：

值

说明

text

文本输入键盘

number

数字输入键盘

idcard

身份证输入键盘

digit

带小数点的数字键盘

placeholder

string

输入框为空时占位符

placeholder-style

string

指定 placeholder 的样式

disabled

boolean

false

是否禁用

maxlength

number

140

最大输入长度，设置为 -1 的时候不限制最大长度

auto-focus

boolean

false

启用自动聚焦

placeholder-class

string

input-placeholder

指定 placeholder 的样式类

input 组件的常用事件有：

属性

类型

说明

bindinput

eventhandle

键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值

bindconfirm

eventhandle

点击完成按钮时触发，event.detail = {value: value}

其中 bindinput 事件每当输入框中内容改变后都会触发，而 bindconfirm 事件只会在点击完成按钮后触发。

还可以通过 input 组件的 type 属性为组件设置不同的输入内容格式，启用不同的键盘。type 组件的可选值有：

值

说明

text

文本输入键盘

number

数字输入键盘

idcard

身份证输入键盘

digit

带小数点的数字键盘

关于 input 组件的更多用法可以参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/input.html