最近很多人问
mini-blog
的部署,确实第一次部署小程序有点繁琐,有些是小程序本身的限制,有些是迭代过程中的变化造成,这里统一汇总下。
关于本地环境
- 确保小程序
IDE
是最新的版本。 - 本地已安装
nodejs
环境(小程序云开发有相关依赖) - 确保已开通小程序云开发环境,并了解一些基本概念。
关于云函数上传
第一次下载源码加载后,优先安装云函数本地依赖「每个云函数都需要」
右击相应的云函数,选择在终端打开
:

通过命令安装相应的依赖:
npm install wx-server-sdk@latest

安装完成后,右击相应的云函数,选择创建并部署:所有文件

关于云环境配置
在运行小程序前,需要对云环境进行配置,首先找到自己的云环境ID
,云开发控制台右上角就有。

接着进行配置,配置包含两部分,小程序端和云函数端。「这两部分是独立的,可以理解为前后端了」
首先是云函数端,为每个云函数进行环境变量的配置,配置的key为Env
「注意大小写」,对应value就是你的云环境ID

然后是小程序端,小程序端在utils
下的config.js
中

关于云数据库
数据库的集合数量没有变,还是这几个:
//缓存小程序or公众号的accessToken
access_token
//小程序文章集合
mini_posts
//小程序评论内容集合
mini_comments
//小程序用户操作文章关联(收藏、点赞)
mini_posts_related
//小程序博客相关配置集合
mini_config
//小程序博客相关操作日志
mini_logs
//小程序博客用户FormID(用于模板消息推送)
mini_formids
在创建完之后,一定修改下集合的权限,不然小程序端是没有权限读取集合中的数据的

关于公众号文章同步
目前最新版与原教程[mini-blog]基于云开发的博客小程序使用教程说明的有点出入
同步文章的云函数已经从adminService
变更为syncService
,所以相应的AppId
和AppSecret
要配置在syncService
这个云函数下面

如果手动执行同步文章云函数报错,皆是由于配置问题导致,请仔细核对AppId
和AppSecret
是否配置正确「注意大小写,再次强调」
另外检查公众号对应的白名单是否配置和确认是否存在多处获取access_token
的地方「access_token
会抢占,其他地方获取过,那小程序端获取的access_token
就失效了,影响文章同步」。
关于后台管理
后台管理是通过配置openId
来实现权限管控的,具体是在adminService
云函数下配置对应的环境变量,key名为author
,value为相应的openId,可以配置多个,逗号分隔即可。

openId
的获取,可以直接看控制台日志,已经打印出来了,在app.js
第30行

关于海报组件
如果发现文章详情页报错包含wxa-plugin-canvas
的错误时,那是说明你本地没有安装海报组件。
相关教程可以参考基于云开发的小程序海报功能的实现,已经写的很详细了。
额外说明下,如果npm
安装组件过程中报错,可以尝试将小程序中的package.json
和lock.json
删除后再进行安装

如果海报组件都已经按照上述步骤完成,但发现会报如下错误
fail invalid page hint....

不要激动,程序本身没有问题,是正常的,报错是因为小程序没有发布过线上环境,找不到相应的page地址。
原因是在生成海报组件时,会生成当前文章页的小程序码,小程序码中包含的跳转页面的校验是根据你线上环境页面来的「如果页面不存在就会报该错误」。
所以,等小程序上线后可以再尝试点击试下。
最后
基本上所有遇到的问题都是上面所提到的导致,后续遇到类似问题不再一一说明了。
另外碰到错误可以看对应的日志「小程序看控制台,云函数看云函数的日志」,日志中都有对应的行数,找到相应的代码行数看下,基本上就能定位到问题了。
最后,还是建议根据时间轴看下我的文章,mini-blog
期间的迭代变化,文章中基本都有体现。
最后的最后,遇到问题还是需要学会独立去解决,这也是一种能力。
Ps.GitHub开源地址:
https://github.com/CavinCao/mini-blog
网友评论