搭建 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/添加到白名单中。

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