1.2　上手前的准备工作

“工欲善其事，必先利其器”。在介绍完了小程序后，我们再来了解一下想要开发小程序前需要准备什么。本节我们分别对需要掌握的基础技术、安装必备的工具和如何申请小程序账号进行讲解。

1.2.1　需要掌握的技术

微信小程序的WXML、WXSS、WXS与前端的那一套很像，所以读者至少需要掌握HTML、CSS、JS的基础知识，如果对这些还不太了解，建议先花几天时间学习一下。在此基础之上，如果有某些前端框架（如Angular、React、Vue等）的使用经验，则学习起小程序来会更加游刃有余。

1.2.2　申请小程序

申请小程序和公众号一样，要去微信公众平台，网站地址为https://mp.weixin.qq.com。

（1）在首页单击右上角的“立即注册”按钮，打开选择页面。需要注意的是，账号类型后期无法更改，本例选择“小程序”选项，之后填写自己的邮箱进行注册并激活就可以了，如图1.2所示。

图1.2　账号类型选择

（2）根据账号主体类型不同，还需要进行信息登记，好消息是个人可以申请（不一定必须是企业）。同样，主体类型也是不可改变的，如果填错就需要换一个邮箱重新注册。不同主题类型说明如图1.3所示。

图1.3　账号主题类型选择说明

（3）申请完毕之后即可进入小程序管理页面，将信息填写完毕会显示已完成。内容基本上都是小程序名、小程序头像、简介等。这里还要提示一下，名称、头像等大多数设置项基本都有修改次数限制，所以要考虑好了再填。完成后的界面如图1.4所示。

（4）到这里，申请微信小程序可以说是告一段落了。此时，需要把小程序ID找出来，之后的开发过程中会用到。单击左侧列表的“开发→开发设置”选项，即可看到小程序ID，如图1.5所示。

图1.4　微信小程序管理页面

图1.5　微信小程序ID

1.2.3　安装Node.js和NPM

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，而NPM（Node Package Manager，node包管理器）是Node.js默认的以JavaScript编写的软件包管理系统。安装方法十分简单，打开Node.js中文网的网址http://nodejs.cn/download/，选择对应自己操作系统版本的Node.js安装包即可下载，如图1.6所示。

图1.6　Node.js与NPM下载

在安装Node.js的过程中，NPM会随着自动安装到系统中。在命令行中输入“npm --version”“node --version”可以检测是否成功安装，如图1.7所示。

图1.7　查看当前操作系统安装的Node.js、NPM版本

如果在使用NPM安装第三方库时经常失败，可以选择使用CNPM。在安装或升级完Node.js后，运行以下命令可以安装淘宝提供的NPM软件包库的镜像CNPM：

     npm install -g cnpm --registry=https://registry.npm.taobao.org

安装命令的成功输出如图1.8所示。

图1.8　使用NPM安装CNPM

命令成功执行完毕以后，使用NPM命令的地方就都可以用CNPM来代替了。接下来文中的内容依然使用NPM命令。安装了CNPM的读者可以自行替换。

到目前为止，Node.js和NPM的安装就算完成了。最后，读者可以检查本地的版本号，尽量保证所使用的版本大于或等于笔者的版本。

1.2.4　安装Git

Git是一个开源的分布式版本控制系统，由Linux之父Linus Torvalds所开发。目前基本所有的开源项目都发布在使用Git的Github网站上，包括Angular这个开源项目也上传到了该平台，其Github的网址为https://github.com/angular/angular。

在使用开发微信小程序的过程中，如果要使用第三方UI库，就需要在操作系统中安装好Git。对于Git的安装首选，当然是从官方网站获取，打开官方网站，选择对应的操作系统下载即可，如图1.9所示。

图1.9　Git的官方下载网站

安装完毕后输入以下指令，验证Git是否成功安装并检查安装的版本，如图1.10所示。

     git -–version

图1.10　验证Git是否成功安装以及被安装的版本

1.2.5　微信开发者工具的安装

微信小程序官方推出了自己的开发工具。官方上的工具一般功能都会比较全面，所以本书的开发工具就直接选择它了。首先打开浏览器，下载地址是https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，如图1.11所示。

图1.11　微信开发者工具下载

微信开发者工具分为多个版本，本书以稳定版作为教学工具，读者也可以根据自己的需求进行选择。