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

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

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

0 微信小程序

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

• 网页开发渲染线程和脚本线程是互斥的；

• 小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中。因此，小程序缺少相关的 DOM/BOM API ，进而导致 jQuery、Zepto 等常用库无法使用。同时，一些 NPM 的包（需要 NodeJS 环境）也无法运行。

• 网页开发者需要面对的环境是各式各样的浏览器；

• 小程序开发过程中需要面对的是 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具。小程序的三大运行环境也有所区别。

• 开发网页只需要使用到浏览器和编辑器；

• 开发小程序需要申请小程序帐号、安装小程序开发者工具、配置项目等等额外过程。

小程序的接入流程为：

1. 注册
2. 小程序信息完善
3. 开发小程序
4. 提交审核和发布

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

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版本管理

结束语

本文记录了开发微信小程序的前置准备工作：注册账号、完善信息、安装开发者工具。

下一篇计划是关于我自己想开发的这个小程序的需求分析和原型设计的内容，敬请期待！

参考资料

微信官方文档·小程序

微信公众平台