微信小程序搭建

本章详细讲述如何从零部署SciMusic_wxapp（小程序代码）。

1. 从GitHub Repo上拉取代码

后台代码的名称为SciMusic_wxapp，代码仓库地址：https://github.com/2horse9sun/SciMusic_wxapp

该仓库为私有仓库，访问仓库前，先请负责的同学把你添加到仓库成员中。

使用命令行进入合适的文件夹中，运行以下命令，clone整个项目：

git clone https://github.com/2horse9sun/SciMusic_wxapp.git

2. 导入项目

下载并安装微信开发者工具，扫码登录，点击添加新的小程序：

目录为刚刚拉取的项目文件根目录，不使用云开发：

AppID为小程序的唯一标识，通过如下方式获取。扫码登录微信公众平台，登录前，先请负责的同学把你添加到微信公众平台的小程序开发成员中。点击左侧“设置”，在最底部可以看到小程序的AppID：

导入成功后，进入小程序开发界面，先无视所有报错信息。

3. 安装依赖

根据Vant Weapp - 快速上手配置组件库。配置成功后，小程序应当能正常显示：

如果后台服务正在服务器上运行，那么模拟器中的所有功能均应当能够正常使用。

4. 前后端联调

前端开发一般都采用本地开发的模式。前端调用的后台接口可以是本地运行的服务，也可以是服务器上运行的服务。打开config/config.js：

// 配置测试环境或生产环境的ip/域名

// 本地
const baseUrlDev = "http://127.0.0.1:8000";
// 服务器
const baseUrlProd = "https://ai-music.xyz:8000";

module.exports = {
  baseUrl: baseUrlProd
}

在这里可以自由选择/修改后台接口的服务器地址。

环境配置工作到此完成，现在可以进行小程序代码的开发与测试。

6. 小程序测试

有三种测试方法，越靠后的方法越接近真实体验。

1. 直接在微信开发者工具左侧的模拟器中测试，比较接近真实情况。
2. 点击微信开发者工具上侧panel中的“真机调试”按钮，使用手机扫码测试，很接近真实情况。
3. 点击微信开发者工具右上侧panel中的“上传”按钮，上传为体验版本，在微信公众平台>版本设置中扫码体验。使用体验版需请管理者将你添加到小程序体验成员中（微信公众平台>成员管理）。

7. 使用Git

每次成功开发并测试好一个功能，先使用git commit提交代码，commit的message内容必须清晰地表明所做的功能改动/添加/删除。使用git push将本地代码推送至远程仓库前，记得先用git pull拉取远程仓库代码，以防代码有更新。

8. 小程序审核与上线

小程序上线第一步：点击微信开发者工具右上侧panel中的“上传”按钮，上传为体验版本。

第二步，也是最重要的一步，在微信公众平台>版本设置中点击“提交审核”按钮，等待1-7天的人工审核。

有时，审核会不通过，可以查看审核原因，做出修改后/提出反驳后继续审核，直至审核通过。

我们小程序审核不通过的主要原因是：含社交功能，不能由个人开发。但是我认为，我们的小程序只能分享音乐，无法传达有效信息，不会导致不良信息的传播。所以，因为这个审核不通过时，建议坚持重新提交审核并反驳。遇到善解人意的审核人员时，就会通过。

审核通过后，需要登录微信公众平台到这个页面，手动点击上线。

上线成功后，可以直接在微信搜一搜里搜索“SciMusic”，体验小程序。

Author: 冯旭

Create Time: 2022-02-19

Update Time: 2022-02-19