## 微信小程序开发基础
### 一、账号申请及管理后台介绍

- 如果您没有小程序开发者账号，需要你注册一个小程序开发者账号。访问[网址](https://mp.weixin.qq.com/wxopen/waregister?action=step1)注册小程序账号，填写邮箱、密码、验证码、勾选协议后即可注册一个小程序开发者账号。

- 如果你有开发者账号，可以访问[网址](https://mp.weixin.qq.com/)，然后使用微信扫码登录。

- 登录完成后，可以进入开发管理--->开发设置--->开发者ID，可以查看您的APP ID。这个APP ID在创建、启动工程的时候会用到。

### 二、成员管理
在管理--->成员管理中，可以新增、修改小程序访问的成员。小程序成员管理包括对小程序项目成员及体验成员的管理。
项目成员：表示参与小程序开发、运营的成员，可登陆小程序管理后台，包括运营者、开发者及数据分析者。管理员可在“成员管理”中添加、删除项目成员，并设置项目成员的角色。
体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。

**不同角色的成员权限区别如下所示**：
- 开发者权限：可使用小程序开发者工具及开发版小程序进行开发
- 体验者权限：可使用体验版小程序
- 登录：可登录小程序管理后台，无需管理员确认
- 数据分析：使用小程序统计模块功能查看小程序数据
- 微信支付：使用小程序微信支付（虚拟支付）模块
- 推广：使用小程序流量主、广告主模块
- 开发管理：小程序提交审核、发布、回退
- 开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
- 暂停服务设置：暂停小程序线上服务
- 解除关联公众号：可解绑小程序已关联的公众号
- 小程序插件：可进行小程序插件开发管理和设置
- 游戏运营管理：可使用小游戏管理后台的素材管理、游戏圈管理等功能

**每个小程序账号添加的体验、项目成员的数量有限，具体如下：**
### 三、版本管理
进入管理--->版本管理，可以查看**开发版本、审核版本、线上版本**。它们的区别如下：

1. **开发版本：**
使用开发者工具，可将代码上传到开发版本中。 开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。
2. **审核版本：**
只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。
3. **线上版本：**
线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。

可以选择不同的开发的版本作为体验版本（只能有一个）。体验版本可以通过扫码二维码访问。同时，可以提交任何一个开发版本进行审核。
可以访问小程序助手小程序，在手机端进行成员管理、体验版设置、不同开发版本访问等操作。

### 四、IDE介绍

首先，访问[网址](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，根据您的操作系统下载对应的开发工具。安装好后，启动开发者工具，创建一个项目，需要您依次填写项目名称、选择工程目录、APPID、开发语言（Javascript、TypeScript）等信息。
**创建好工程后，可以在IDE的模拟器中打开小程序。**
**编译模式：**
辅助调试区中，可以选择**小程序调试模式**和**插件调试**模式。小程序每次编译后会回到首页，所以在调试区中，可以添加编译模式，从而每次编译后到指定的页面，以节约进入页面的时间。

- **预览：**
如果您开发的时候想查看真机效果，可以点击预览生成二维码，然后手机扫描访问。

- **真机调试：**
如果小程序在模拟器上访问正常，但是在真机上访问出现一些问题，这个时候可以通过真机调试生成二维码，然后手机扫描进行真机调试，从而定位问题。

- **清缓存：**
开发的时候，经常需要对本地缓存进行操作，或者改了某个问题，不生效，这个时候可以试试清除缓存的功能了。

**在模拟器的上方，可以：切换不同的模拟器机型**
**切换模拟器网络状态、事件模拟、深色模式切换**

**在模拟器的右上方，上传：将代码到微信后台从而得到开发版本**

**版本管理：**
提交代码到代码仓库中

**详情：**
可以查看小程序的名称、发布状态、使用的APP ID、本地存放目录、文件系统的目录、本地代码的大小、上次预览的大小、上次上传的大小。

**本地设置：**

**基础库的版本：** 基础库版本的分布可以查看。越低的版本覆盖的用户越多，但是部分高级特性就不能用了。选择哪个基础库版本，可以根据您的项目实际情况定。

**ES6转ES5：** 将ES6的语法编译成ES5的语法

**增强编译：** ES6转ES5只能 将ES6的语法编译成ES5的语法，如果您使用了ES7、8、9、10的语法，该选项必须勾选上。建议开发的时候该选项一定勾选上。

**使用npm模块：** 如果您使用了npm包，该选择必须勾选上。

**上传代码时样式自动补全：** 补充CSS样式的浏览器前缀。

**上传代码时自动压缩：** 上传压缩代码，减小小程序包的体积。

**上传代码时进行代码保护：** 防止恶意解码小程序代码。

小程序访问的接口及H5的链接域名，需要后台配置。配置后，可以在IDE中看到。
### 五、TS开发
**使用TS开发小程序有两种方式：**
1. 在创建项目工程中，默认的开发语言是Javascript，也可以切换成Typescript.
2. 可以通过安装指定的TypeScript版本。通过 npm 安装或者通过版本号指定一个基础库版本：

```
npm install miniprogram-api-typings@2.4.1
```

使用TypeScript开发小程序，每次改了ts文件需要手动点击编译，效率比较低，可以运行以下脚本监听ts文件的改变，从而自动编译提高开发效率。

```
const exec = require("child_process").exec;
const watch = require("node-watch");
const chalk = require("chalk");

watch([
process.cwd()
], {
recursive: true
}, function (event, name) {
if (name.split('.').pop() === 'ts') {
console.log(chalk.green("监听到TS文件修改，重新编译中..."));
exec("npm run tsc");
console.log(chalk.green("监听到TS文件修改，重新编译完成..."));
}
})
```

### 六、使用Less编写wxss
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改，具体扩充和修改的地方可以参见：[（详情）](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html)。同时，也可以使用Less编写wxss，具体方法如下：
- **全局安装wxss-cli工具：**

```
$?npm?install?-g?wxss-cli
```
- **运行命令：**

```
wxss ./minicode
```

其中，minicode为项目工程的根目录。
这样可以使用less文件编写样式，当less文件改动的时候，会自动将less文件编译成wxss文件，实现实时刷新。

### 七、调试
在IDE调试区中，可以点击预览生成二维码，通过微信扫码在真机上访问。点击真机调试生成二维码，通过微信扫码进行真机调试。