源站网干货教程 2020-10-12

搭建 WordPress 版微信小程序详细教程

本文将为大家介绍如何搭建一个自己的 WordPress 版微信小程序，实现 WordPress 网站和小程序之间的数据同步……

一、准备工作

1、首先，你的需要一个通过了 ICP 备案且安装了 SSL 证书的 WordPress 网站，这是微信小程序基本要求，不可以跳过哦。

2、你需要创建一个微信小程序，如果还没有，可以到微信公众平台注册一个。

微信小程序注册地址：https://mp.weixin.qq.com/

3、下载安装微信开发者工具；

微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4、下载守望轩的小程序源码和插件。

微慕 WordPress 小程序开源版下载地址：：https://github.com/iamxjb/winxin-app-watch-life.net

配套 WordPress 插件地址：https://wordpress.org/plugins/rest-api-to-miniprogram/

考虑到国内的网络原因，有些朋友从 Github 中可能下载失败，这里另外提供百度网盘的下载地址：

下载链接：https://pan.baidu.com/s/1BsEpYtfpbVmGptmRDLJYbQ

提取码：rc15

二、安装

1、我们将守望轩的微信小程序解压后，打开文件夹中的 project.config.json 文件，将代码中的小程序 appid 替换成你自己的（大概在 29 行，如图所示），小程序 appid 可以在微信小程序后台菜单的“开发——>开发设置”中找到。（代码编辑器推荐：VS Code、Hbuilder、Notepad++）

2、安装打开微信开发者工具，主菜单中选择”项目——>导入项目”导入你的小程序项目，其中项目名称可以自定义，中英文都可以自己喜欢就好，目录选择第一步中解压出来的小程序源码文件夹，appid 和第一步骤中一样，替换为你的 appid，选择导入。这时我们的第一个小程序便创建成功了，但是你会发现模拟器显示的内容还是守望轩博客的内容，这是因为小程序还没和你的 WordPress 网站建立链接。

3、这一步需要建立 WordPress 网站和小程序的连接：将前面下载的 REST API 插件解压后上传到你的网站/wp-content/plugins 插件目录下，登录你的 WordPress 网站后台，安装插件。然后进入插件设置页面，填写你的 AppID(小程序 ID)和 AppSecret(小程序密钥)。（注：密钥非常重要，只显示一次，如果忘记了，下次只能选择重置，所以建议电脑上新建个文本，保存起来。）

4、接着，回到微信开发者工具，打开 utils 文件夹下的 config.js 文件，根据提示填写你的网站域名和名称等信息。

其中 var DOWNLOADFILEDOMAIN 这一项，如果你小程序所有内容都由网站主域名直接提供，则直接填写网站主域名即可，如果你像我使用了第三方的对象存储服务，那么也需要填写对象存储所使用的域名，否则网站图片等内容可能无法正常显示。最后，打开微信小程序后台，“开发——>开发设置”，将这里的域名填写到小程序后台 downloadFile 合法域名中即可。其中 https://wx.qlogo.cn 是微信官方的头像域名，当访客需要登录我们的小程序，需要调用用户头像，所以合法域名中需要包含这个域名。
4、这时，微信开发者工具中，选择“编译”，如果在模拟器中看到你网站内容，那么小程序和网站就已经连接成功了。如果没有，看下面的常见问题的解决办法能不能帮到你。

常见问题

1、小程序没有加载任何内容，显示错误。

解决方法：请检查上一步中的网站域名有没有配置正确，检查网站是否设置了伪静态，如果没有，请在 WordPress 后台设置伪静态。

2、小程序可以加载网站内容，但是缩略图没有显示。

解决方法：如果你的图片和网站程序是在同一个域名下的，请检查网站是不是开启了懒加载，如果开了，关闭即可。如果你的图片外链到第三方的图床（如七牛云、又拍云等服务商的对象存储服务器），请到服务商的后台看是否开启了图片防盗链，将小程序的官方域名 https://servicewechat.com/添加到白名单中。

下一步，我们需要根据我们网站内容，对小程序进行个性化修改。