运行

我们假设你已经完成了 准备工作，这一篇教程主要讲解如何编译项目并运行到微信小程序开发工具。

需要准备

  • AppID：即小程序的 AppID。
  • 一个正在运行的 Halo 站点，可以是线上的，也可以是本地的。

需要注意的是，我们虽然已经默认将小程序的 urlCheck 设置为 false，但是如果你是在本地运行的 Halo，是无法在手机上预览小程序的。

修改项目配置

  1. 使用你熟悉的开发工具打开项目

你可以发现在项目根目录有一个 .env 文件，这个文件即 Node 的环境变量配置文件，此小程序的大部分配置项都在这里完成，我们建议复制一个副本进行修改，即 .env.local。后续运行项目会优先使用 .env.local 中的配置，这样主要是方便后续更新代码减少冲突。当然，你也可以直接修改 .env。

  1. 修改配置项

此篇教程我们主要讲解部分必须修改的配置，其他个性化的配置我们会专门写一篇文档。其中必须修改的配置有：

# 默认页面标题
VUE_APP_MP_TITLE = 默认标题

# 小程序描述或者个人描述
VUE_APP_MP_DESCRIPTION = 你的描述

# Halo 站点地址，结尾不带 /
VUE_APP_API_URL = https://yourdomain.com

# API 请求 api_access_key
VUE_APP_API_ACCESS_KEY = your_api_access_key
  • VUE_APP_MP_TITLE：小程序的标题，这是小程序页面上方状态栏的默认标题，你可以随意修改为你期望的样子。
  • VUE_APP_MP_DESCRIPTION：个人描述，此配置目前仅用于 博主页面 头像旁边的描述。
  • VUE_APP_API_URL：Halo 站点的地址，可以是你当前线上的地址，或者是本地运行的地址。
  • VUE_APP_API_ACCESS_KEY：API 请求的秘钥，下面会讲解如何获得这个秘钥。

进入到 Halo 后台，打开菜单上的博客设置，在此页面的右上方会看到 切换到高级设置，如下图：

截屏2021-06-06 下午12.12.21

进入高级设置后，切换到 API 设置 标签，打开 API 服务 选项，并手动设置 Access key，这个可以随意设置，建议随机生成一些字符串，如下图：

截屏2021-06-06 下午12.15.55

最后，复制这个字符串到 .env 配置文件中的 VUE_APP_API_ACCESS_KEY 配置项即可。

设置 AppID

AppID 为小程序的唯一标识，所以我们需要修改项目中的 AppID 为自己小程序账号的 AppID。

  1. 打开项目中的 src/manifest.json 文件。

  2. 找到 mp-weixin 节点，修改 appid 的值即可，如下片段：

"mp-weixin": {
  "appid": "wx787221c97e197b90",
  "cloudfunctionRoot": "static/cloudfunctions/",
  "setting": {
    "urlCheck": false,
    "postcss": true,
    "minified": true,
    "es6": true
  },
  "usingComponents": true,
  "optimization": {
  	"subPackages": true
  }
},

至此，必要修改的配置已经完成，下面将讲述如何运行项目。

在开发环境下运行项目

  1. 安装依赖

使用终端进入到项目根目录，执行：

npm install

或者

yarn install

以开发环境运行：

npm run dev

或者

yarn dev

运行完毕之后会在 dist/dev 目录产生一个 mp-weixin 目录。

  1. 使用微信开发者工具打开此目录

使用微信开发者工具打开此目录即可运行，如下图：

截屏2021-06-06 下午12.50.44

点击此界面右上角的 导入 按钮选择项目内的 dist/dev/mp-weixin 目录即可。如果你是第一次打开微信小程序工具，可能会让你登录微信，使用你注册小程序账号的管理员微信扫码即可。运行成功如下图：

截屏2021-06-11 上午1.25.36-tuya

生产环境构建

当我们调试好小程序需要上线的时候，我们还需要构建一个生产包，虽然通过上方的开发环境运行构建出的产物也可以上传到微信小程序进行审核和上线，但是我们非常不推荐，因为通过开发模式运行得到的产物没有经过代码压缩等操作，会导致包比较大，而且性能比较不好。

  1. 构建生产包
npm run build

或者

yarn build

执行完毕之后会在 dist/build 目录产生另外一个 mp-weixin 目录。

  1. 使用微信开发者工具打开此目录

使用微信开发者工具打开此目录即可运行生产环境的包，调试完毕后，点击开发者工具右上角的 上传 按钮即可。