# 基础篇 1：小程序开发基础知识

# 准备工作

小程序开发要先注册小程序账号，有了小程序账号才可以使用开发者工具。小程序是一种特殊的开发形式，里面的 API 和组件都是自己定制的，因此在普通的浏览器中不能预览，要预览功能和页面就需要使用开发者工具。

# 注册小程序账号

先准备一个没有注册过公众号的邮箱，然后访问小程序介绍页面并点击底部的「前往注册」按钮，再按照提示填写个人信息，最后进入邮箱激活账号即可。

详细流程请参考官方文档。

# 安装开发者工具

小程序有自己的开发者工具，可以编写代码，实时查看页面和功能效果，还能在开发者工具中进行 debug。小程序开发者工具是使用 NW.js 编写的。

开发者工具下载地址：微信开发者工具

# 使用开发者工具演示 WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式组件。

WeUI 有两个版本，一个是普通的 HTML5 版本，另外是小程序版本。本节我们通过 WeUI 来简单学习开发者工具的使用。

首先下载 WeUI 源码：

# https 方式（推荐）
git clone https://github.com/Tencent/weui-wxss.git
# 或者 ssh 方式
git clone git@github.com:Tencent/weui-wxss.git

@前端进阶之旅: 代码已经复制到剪贴板

打开开发者工具，使用注册时绑定的微信账号扫码登录，这时在进入的界面中选择「小程序项目」，如果是初次使用小程序开发者工具，没有创建过小程序项目，就会进入下面的页面：

在这个页面，先选择我们 clone 下来的 WeUI 项目的 dist 文件夹。对于 AppID 选项，如果已经有了小程序账号，可以在账号后台找到 AppID 并填写上；若还没有注册小程序账号，可以直接在「或使用测试号：」后面单击「小程序」，就会自动填好。然后给项目起个名字，比如「WeUI 演示」，点击确定后就打开了 WeUI 项目。这时候看到的是开发者工具的开发界面，如下图所示，开发界面主要由三部分组成：模拟器、编辑器和调试器。

模拟器：提供小程序的运行环境，模拟小程序在手机上的界面效果
编辑器：简单 IDE 功能，点击左侧树形菜单可以打开多个文件直接编写保存，做到实时预览效果，但是开发者工具的编辑器做得比较简单，而且使用体验并不好，建议选择自己顺手的 IDE 增加 WXML 和 WXSS 的语法高亮插件等来编辑代码
调试器：订制版的 Chrome 开发者工具，提供从页面结构到网络请求等多个面板支持，会用 Chrome DevTools 就很容易上手该工具

Tips： 常用 IDE 推荐

VS Code + minapp 插件

Sublime Text 3 + Sublime wxapp 插件

Vim + wxapp

除了三个重要组成部分之外，在开发者工具的顶部还有各种操作按钮。左侧主要是模拟器、编辑器、调试器和小程序云开发控制台的视图开关，可以控制对应视图的开启关闭。

中间部分是跟开发、编译、测试和上线相关的各种按钮，我们在开发和测试小程序中会经常使用，最常用的有：

预览、远程调试：是可以在手机上直接预览效果，开启远程 debug 功能的
清缓存：对于一些授权登录、缓存、数据之类的操作，我们需要清理状态和数据，可以通过这个按钮操作
上传：如果是创建项目的时候填写了 AppID，那么会出现这个按钮，小程序开发完毕后可以通过这个来上传，上传之后可以在小程序后台申请测试版和审核，审核通过后就可以正式上线了

最后介绍的是开发者工具右上角的「详情」。

详情下面主要有三个 Tab：项目设置、域名信息和腾讯云状态。

项目设置：这个是用得比较多的，可以指定上传代码时候的编译情况，比如支持 ES6 语法、支持 css autoprefixer、代码压缩等
域名信息：小程序的 request 等访问的域名采用了白名单形式，在这里可以看到小程序管理后台设置的域名白名单
腾讯云状态：可以看到小程序账号和腾讯云的绑定情况

# 小程序开发语言

小程序的开发语言跟前端开发者比较熟悉的 HTML5 非常相似（甚至相同），小程序的视图层由 WXML 和 WXSS 组成，分别对应 HTML 和 CSS，逻辑层则跟 HTML5 一样，也是 JavaScript 语言实现。

WXML：小程序自己发明的 XML 语法描述，用来构造小程序的页面结构
WXSS：小程序的页面的样式表语言，描述 WXML 的样式
JavaScript：小程序 JS 的执行环境并不是普通的 WebView 浏览器，也不是 Node.js 环境，它执行在微信 App 内上下文，跟 Node.js 一样，也不能像在浏览器内一样对页面 DOM 进行操作

微信小程序运行在三端：iOS、Android 和用于调试的开发者工具

在 iOS 上，小程序的 JavaScript 代码运行在 JavaScriptCore 中

在 Android 上，小程序的 JavaScript 代码通过 X5 内核来解析

在开发工具上，小程序的 JavaScript 代码运行在 NW.js（Chromium 内核）中

除了普通的 JavaScript，小程序还支持一种类似 JS 的 WXS 语言，WXS 对于小程序开发不是必需的，它的主要目的是为了增强 WXML 的数据处理能力而新引入一种技术实现，其实际解析的语言规范还是 JS，并没有引入新的语法，仅仅对 JS 做了上层的封装和限制，所以学习上基本没什么成本，大致了解下开发文档马上就能上手。本小册实战部分也会涉及简单的 WXS 编写。

对于 WXS 和 JavaScript 的性能比较，官方给出的数据是：由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 Android 设备上二者运行效率无差异。

# 小程序项目相关知识

# 小程序目录结构

小程序项目由配置文件、页面文件、静态资源和其他相关（比如组件、小程序云函数等）内容组成，一般小程序会由四类文件组成：

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

小程序项目的目录结构组成没有严格的要求，按照前端项目的经验，一般会分为：配置、页面、静态资源、基础库、组件等多个目录，例如下面的目录结构：

├── app.js            小程序全局app相关js
├── app.json          小程序配置文件
├── app.wxss          小程序全局app样式
├── cloud-functions   云函数目录
│   ├── decrypt
│   ├── geocoder
│   ├── he-air
│   ├── he-weather
│   ├── jscode2session
│   └── weather
├── components        组件库
│   └── icon
├── images            图片等静态资源
│   └── cloud.jpg
├── pages             页面目录
│   ├── diary
│   └── weather
└── project.config.json  工具项目配置文件

@前端进阶之旅: 代码已经复制到剪贴板

当然根据不同的项目，可能目录结构不同，但是小程序必需的 app.json 和页面组成是必不可少的。另外，在开发复杂的项目时，我们会用到开发框架或者编译工具，这时候目录结构只需要保证编译之后的目录结构符合规范即可。

# 小程序的配置

小程序有三个重要的配置，分别放在三个 JSON 文件内：project.config.json（工具项目配置）、app.json（小程序配置）、page.json（单页面配置）

project.config.json：这个是配置项目工具相关的，比如开发者工具的编译设置（是否使用 ES6 语法等）、界面设置，以及云函数相关的 cloudfunctionRoot，详细可以参考项目配置文件
app.json：小程序的全局配置，包括了所有页面路径、界面表现、网络超时时间、底部 tab、插件等，常用的两个配置是 window 和 pages，详细配置参考全局配置
page.json：是相对于 app.json 更细粒度的单页面配置，详细参考页面配置

# 组件和插件

小程序页面是由各种组件组成的，组件可以类比成原生 HTML5 的标签。

# 组件

小程序内部定义了很多组件，可以对应 HTML5 的标签和基础能力来理解，小程序的组件根据实现不同，可以分为 Web 组件和 Native 组件，Web 组件是由 HTML5 原生 Web 组件封装的组件，比如 view、image 等；Native 组件是为了增强小程序的体验，用客户端技术实现的组件，包括一些交互复杂、原生 Web 组件性能不高的组件，例如 input、map、canvas、video 等。

小程序一共提供 8 大类 30 多个组件：

视图容器：主要是实现页面布局的，对常见的布局形式进行了封装，比如滚动 sroll-view 等
基本内容：类似 HTML5 中内容相关的 p、em 等
表单相关：要比 HTML5 的 form 表单丰富一些
导航：类似 a 标签
媒体：类比 HTML5 中的 video、audio 和 img 等，但是提供更标准的界面和更丰富的 API 支持
画布：Native 实现的 Canvas
地图：结合腾讯地图数据 Native 实现的组件
开放能力：这部分组件偏通用和小程序业务

# 自定义组件

小程序本身支持很多组件，比如地图、按钮等，开发者也可以自己做项目内公共组件，比如我们后面实战部分会介绍做一个 icon 组件，放在 components 目录下面，这样此小程序的任何页面如果要使用这个 icon 公共组件，只需在自己的 page.json 中添加如下字段：

"usingComponents": {
  "icon": "../../components/icon/index"
}

@前端进阶之旅: 代码已经复制到剪贴板

添加完成之后，在页面代码中就可以直接使用 <icon> 的 tag 了。官方文档有更加详细的介绍。

# 插件

插件是对一组 JS 接口、自定义组件或页面的封装，用于提供给第三方小程序调用。简单来说，插件是组件的升级版本，组件只能在自己项目中使用，插件则更独立，是可以发布到全网，供其他开发者使用的。例如实战中，笔者使用了一款日历插件，则需要在 app.json 中增加 plugins 字段：

"plugins": {
  "calendar": {
    "version": "1.1.3",
    "provider": "wx92c68dae5a8bb046"
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

如果想开发一个插件，则可以参考官方文档。

# 小程序开发基础

微信小程序是由数据驱动的开发框架，本小节主要介绍小程序开发中的基础概念和知识。

# 数据驱动

微信小程序是数据驱动模型，在 WXML 中可以对页面的数据进行绑定，小程序的 WXML 内使用的是 Mustache 语法，在 {{}} 内可以将变量名包裹起来。例如：

<view>{{ message }}</view>

@前端进阶之旅: 代码已经复制到剪贴板

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

@前端进阶之旅: 代码已经复制到剪贴板

但是小程序不支持复杂的表达式，目前支持简单的三元、加减和逻辑判断，如果要使用形如 {{parseInt(num)}} 的函数调用语法，需要 WXS 支持：

WXML 内容：

WXS 内容：

记住：修改页面数据，只能使用 this.setData 修改！

# 事件绑定和处理

事件名称

说明

tap

基础篇 1_小程序开发基础知识|小程序开发专题

基础篇 1_小程序开发基础知识|小程序开发专题