写个小程序01 | 注册微信小程序

出于兴趣和学习目的，我想自己做一个基于“子弹笔记（Bullet Journal）”的小程序。由于个人开发经验很有限，只在课程作业中写过 web 前端，所以也不知道多久能写出来（逃）。因此想通过博客记录一下开发过程、学习资料、踩过的坑等等。

本系列文章主要计划用于个人学习总结，如果恰好对你有帮助那真是太好了！

PS：文中提到的各种平台规则均截至 2021.1.12，如果存在疏漏或后续出现变化敬请在评论区指出！

0 微信小程序

微信小程序是什么想必不需要过多解释。小程序的开发与普通的 web 开发较为相似，使用 JS 作为前端（即微信中的小程序）开发语言、根据需要配合后端完成相应功能。根据官方开发文档，小程序与普通网页主要有以下区别：

网页开发渲染线程和脚本线程是互斥的；
小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中。因此，小程序缺少相关的 DOM/BOM API ，进而导致 jQuery、Zepto 等常用库无法使用。同时，一些 NPM 的包（需要 NodeJS 环境）也无法运行。
网页开发者需要面对的环境是各式各样的浏览器；
小程序开发过程中需要面对的是 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具。小程序的三大运行环境也有所区别。
开发网页只需要使用到浏览器和编辑器；
开发小程序需要申请小程序帐号、安装小程序开发者工具、配置项目等等额外过程。

小程序的接入流程为：

注册
小程序信息完善
开发小程序
提交审核和发布

本篇中重要完成开发之前的准备工作。

1 注册小程序

首先要通过微信公众平台申请一个小程序账号。

1.1 填写账号信息

只需要一个邮箱。需要注意：

每个邮箱只能注册一个小程序，可以考虑为小程序新注册一个专用邮箱。不过之后每个月有一次机会修改绑定邮箱
邮箱需要激活验证，所以要保证邮箱是可用的

1.2 邮箱激活

点击“注册”之后会自动给对应邮箱发一封激活邮件。点击邮件中的激活链接会自动跳转到注册的下个阶段。

1.3 信息登记

根据需要选择主体类型并填写对应的信息，主体信息确认之后不可更改。

部分 API 对个人用户不开放（例如支付），如果有需求需要申请企业类账号；不涉及敏感信息之类的个人就可以
个人主体需要认证姓名+身份证号，每个身份证号只能关联5个小程序
其他账号类型权限更多，需要各自的认证程序。例如企业账号需要使用公司对公账号汇款（金额很小），或交300元认证费。更多信息详见文档

填写信息后用微信扫描一个二维码，扫码的这个微信账号就自动成为这个小程序的管理员，之后登陆、设置管理员权限之类的操作都需要用管理员的微信扫码。每个小程序有且只有一个管理员（绑定微信），管理员可以更换。

2 小程序信息完善

填写认证信息之后小程序注册就成功了。个人账号立即可以使用，其他类型账号完成认证之后才能使用完整功能。确认信息之后会自动跳转到小程序主页（我当时弹出一个没有权限的页面，刷新一下就好了）：

2.1 小程序信息

填写小程序名称、简称、头像、介绍、服务类目。注意这些项目提交之后再修改都存在限制，要慎重提交。对于个人主体的账号：

小程序名称：发布前可修改2次，发布后一年内可修改2次
小程序简称：一年内可修改2次
头像：一年内可修改5次（初始提交也算1次，所以还剩4次；只有头像算初始提交）
介绍、服务类目：一个月内可修改5次

2.2 添加开发者

项目成员：如果有多人共同开发一个小程序，管理员可以给小程序添加（或删除）多个开发者，这样其他人也能拥有部分开发权限。除了管理员（只有1个）外可以添加15个项目成员；每个成员可以拥有3种角色（运营者、开发者、数据分析者，分别有各自的权限）中的一个或多个。

体验成员：正式发布和审核之前，只有项目成员能够试用小程序，其他人是搜不到的；如果想邀请非开发人员试用正式发布之前的体验版小程序，可以把对应的微信号添加到体验成员。所有项目成员都可以添加或删除体验成员。

3 开发者工具

如上文提到的，开发微信小程序必须用官方提供的开发工具（虽然他长得和 VS Code 完全一致）。

首先在这里下载需要的版本并安装（安装包130MB左右，安装大概两三分钟）。

安装好之后运行，先用微信扫码登录。登录后出现打开项目界面：

如果已有项目代码从右上角导入
打开过的项目可通过卡片快捷打开

3.1 创建新项目

如果还没有项目代码，点“+”卡片创建一个新的（小程序和小游戏是分别创建的，流程一样）。创建新项目的表单如下：

项目名称：只是代码项目的名称，与小程序名称无关，可以随便起
AppID：在管理平台中开发-开发管理-开发设置-开发者ID中可查看小程序对应的 AppID
云服务：微信提供的原生云端支持，无需自己搭建服务器。基础版免费，也有性能更高的多个收费订阅版。当然比自己搭建服务器多出一些限制，但显然方便很多；对后端要求不高或想快速上线的可以使用，后期也可以迁移到自己的服务器。更多信息参见云开发文档。（我没选云开发单纯是为了学习一下怎么正常地写后端和部署，老前端人了，对这些一窍不通）

3.2 打开项目

新建的项目是一个默认的demo小程序，点击按钮获取用户的头像昵称。

编辑器和正常的IDE区别不大：

左侧多了一个手机屏幕模拟器（有几个手机型号可以选择，也可以自定义分辨率；可以预览几种字号）。
预览（run）和真机调试（debug）有两种启动方法：手机扫描二维码，自动发送到登录的微信账号。我用别人的手机扫码试了一下，打不开；不清楚是只有登录开发工具的账号能扫码预览，还是项目人员能扫码预览。（还是单纯我用的那个手机有问题。）
集成可视化Git版本管理