手把手教你个人博客秒变微信/QQ 小程序，新手 10 分钟上手！

哈喽，大家好！

最近折腾了一个小程序，然后刚好有人在问博客怎么转小程序的，今天就给大家分享一下。

如果你本来就有一个 WordPress 博客，或者准备搭建一个自己的个人网站，那么完全可以顺手再做一个微信小程序 / QQ 小程序。

这样一来，你的文章不仅可以在网页上展示，也可以通过小程序的方式展示出来。

说白了就是：

把你的 WordPress 博客，直接变成一个微信小程序。

对于个人博客、资源网站、技术博客、教程站来说，还是挺有用的。

今天就手把手教大家，如何用 WordPress 搭建一个微信 / QQ 小程序。

小白也可以跟着操作，基本照着步骤来就行。

一、最终效果展示

先来看一下最终效果。

搭建完成以后，小程序大概就是下面这种样子：

整体就是一个博客类小程序，可以展示文章、分类、具体内容等。

如果你本身就有 WordPress 站点，那么这个方案还是比较适合的。

二、准备工作

正式开始之前，需要先准备好下面这些东西。

1. 域名和服务器

首先你需要一个已经备案的域名和服务器。

如果你只是自己本地测试，可以先不用太纠结，但是如果后面要上线微信小程序，域名备案基本是绕不开的。

这里建议直接用阿里云、腾讯云这些国内服务器。

需要准备：

• 一台国内云服务器

• 一个已备案域名

如果你还没有服务器和域名，可以先自行购买和备案，也可以通过下面的链接购买腾讯云、阿里云或京东云服务器。

# 腾讯云服务器购买链接如下，具体活动以页面显示为准
https://cloud.tencent.com/act/cps/redirect?redirect=6544&cps_key=2f4fe1626c8745bb78e64d11034157ac&from=console
# 阿里云服务器购买链接如下，具体活动以页面显示为准
https://www.aliyun.com/benefit?source=5176.29345612&userCode=izmoik21
# 京东云服务器购买链接如下，具体活动以页面显示为准
https://daili.jd.com/s?linkNo=M7HWSFYXTE3OXN5FSFBQUWPP7PD27RK72MBSVXIB47UUVKM5PLA5RO5REIPFQG52QGOLYY6ZQZIO4FJFPWNHNL2ZFI

2. 开发工具

接下来需要安装几个工具：

• 微信开发者工具

• QQ 小程序开发者工具

• HBuilder X

下载地址如下：

微信开发者工具：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
​
HBuilder X：
https://www.dcloud.io/hbuilderx.html

这里主要用 HBuilder X 来修改和运行前端源码。

微信开发者工具和 QQ 小程序开发者工具主要用于预览、上传和提交审核。

3. 注册小程序账号

然后你还需要注册一个微信小程序账号，如果想同时发布 QQ 小程序，也可以注册 QQ 小程序账号。

这个就不展开讲了，直接去微信公众平台注册即可。

注册完成以后，后面会用到小程序的 AppID。

4. 下载源码和插件

这套方案需要用到 WordPress 后端和小程序前端源码。

我这里已经打包好了相关文件，包括 WordPress 后端和小程序前端源码。

下载地址：

https://txx.lanzoue.com/iDcnJ3prxjle

三、安装 1Panel 面板

服务器和域名准备好以后，我们先安装 1Panel 面板。

1Panel 是一个现代化的 Linux 服务器运维管理面板，界面比较简洁，安装网站、数据库、SSL 证书这些都比较方便。

这里建议使用干净的 Linux 系统，我这里使用的是 Ubuntu 系统。

服务器系统装好以后，用 SSH 连接服务器，然后执行 1Panel 官方安装命令，按提示完成安装。

bash -c "$(curl -sSL https://resource.fit2cloud.com/1panel/package/v2/quick_start.sh)"

选择简体中文，输入 2 后回车。

输入安装目录，默认 /opt，输入后回车即可。

设置默认端口号：

设置访问入口、用户名和密码，确认后等待安装完成。

终端里会显示 1Panel 的访问地址、用户名和密码。

最后在服务器控制台和防火墙中放行你的面板端口。

然后在浏览器中打开：

http://你的服务器IP:面板端口

登录 1Panel 后台。

注意：如果打不开 1Panel 后台，记得检查服务器安全组和防火墙端口有没有放行。

四、配置域名解析

在域名解析控制台添加解析记录，并绑定服务器 IP。

五、安装 WordPress

1. 下载 WordPress

准备工作完成以后，我们先来安装 WordPress。你可以从官网下载最新版，也可以使用我提供的源码包。

https://cn.wordpress.org/download/

2. 创建网站运行环境

登录 1Panel 后台以后，先进入：

应用商店 → 搜索并安装下面四个程序：

1. OpenResty

2. MySQL

3. PHP

4. Redis

按照提示选择最新版本安装即可，需要耐心等待一会儿。

3. 创建站点

运行环境安装好以后，点击：网站 → 创建

运行环境选择 PHP，PHP 版本选择刚刚安装的版本，域名填入刚刚配置解析的域名，比如 www.weixin.com，代号填写你的网站文件夹目录名称。

4. 安装 WordPress

站点创建好以后，点击站点目录

上传 WordPress 程序。

点击解压主程序。

解压后进入 wordpress 目录，点击名称旁边的全选，再点击更多 → 移动。

选择和压缩包同级的目录，然后点击粘贴。

依次点击覆盖 → 替换 → 确认。

在浏览器打开你的域名：

https://你的域名

如果出现 WordPress 初始化页面，就说明安装成功了。

5. 创建数据库

点击数据库 → 创建。

给自己的站点起个数据库名称，然后点击确认，其他配置不用改。

6. 完成 WordPress 初始化

打开 WordPress 初始化页面以后，根据提示填写：

• 刚刚创建的数据库名称

• 数据库用户名

• 数据库密码

点击数据库连接信息。

点击复制连接 URL 信息。

点击复制连接地址以及端口：

最后组合成 连接地址:端口号，比如 127.0.0.1:3306，然后点击提交。

出现如下提示，就说明数据库连接成功了。

打开 WordPress 初始化页面以后，根据提示填写：

• 网站标题

• 管理员用户名

• 管理员密码

• 管理员邮箱

安装完成后，进入 WordPress 后台：

https://你的域名/wp-admin

输入刚刚设置的管理员账号和密码登录，到这里，WordPress 就安装好了。

六、配置 WordPress 网站

WordPress 安装好以后，还需要配置几个关键地方。

1. 配置 SSL 证书

微信小程序要求接口域名必须是 HTTPS，所以 SSL 证书一定要配置好。

在 1Panel 后台进入：

网站 → 证书 → 申请证书

选择从网站中获取 → 验证方式选 HTTP → 勾选自动续期 → 确定

证书申请成功后，开启 HTTPS，进入：

网站 → 网站列表 → 选择你的网站 → HTTPS。

选择 ACME 账户后，系统会自动填充刚刚申请的域名证书。

2. 配置 WordPress 伪静态

接着需要配置 WordPress 伪静态。

在 1Panel 后台进入：

网站 → 网站列表 → 选择你的网站 → 配置文件 / 伪静态

找到伪静态配置，选择 WordPress 规则。

这一步主要是为了让 WordPress 固定链接正常访问。

3. 设置固定链接

进入 WordPress 后台：

设置 → 固定链接 → 自定义结构

这里选择 post_id，或者设置成下面这种结构：

/%post_id%/

这一步主要是为了让文章链接结构更稳定，后面接口读取文章内容时也更方便。

4. 关闭媒体自动裁剪

进入 WordPress 后台：

设置 → 媒体

把自动裁剪相关的媒体尺寸全部设置为 0。因为 WordPress 默认可能会裁剪图片，导致特色图片变模糊。

七、安装 WordPress 插件

接下来需要安装几个插件。

主要包括：

• 小程序卡密导入 V1.0.zip

• 微信小程序订阅积分 2.0.0.zip

• 微信小程序码生成器 V1.0.zip

• fengrui-xingshu_EDDrk.zip

• pods.3.3.8.zip

进入 WordPress 后台：

插件 → 安装插件 → 上传插件

上传过程中可能会遇到如下问题：

这时需要打开网站目录文件夹，选择 wp-content 目录，并增加写入权限。

回到上传插件页面重新上传，如果又提示如下问题：

找到站点目录下的 wp-config.php。

修改 wp-config.php 文件。

define("FS_METHOD", "direct");
define("FS_CHMOD_DIR", 0777);
define("FS_CHMOD_FILE", 0777);

在 wp-config.php 文件最后添加上面三行。

之后重新上传插件应该就正常了，把源码包里的插件全部上传、安装并启用。

安装完成以后，进入 WordPress 后台左侧菜单，找到 Pods。

点击：

Pods → Import/Export packages

选择导入 pods-package.json 文件。

导入完成以后，左侧菜单会多出来一个 基本配置 → 添加 about。

接着点击发布。

发布后点击 编辑 → 元框，就可以配置小程序里的关于页面、资源下载开关、小程序 Logo 等内容，按自己的需求修改即可。

八、配置小程序运行环境

WordPress 后端配置好以后，接下来开始配置小程序前端。

1. 配置小程序服务器域名

进入微信小程序后台，找到服务器域名配置。

这里要填你自己的 HTTPS 域名。

格式大概如下：

request 合法域名：https://你的域名

socket 合法域名：wss://你的域名

uploadFile 合法域名：https://你的域名

downloadFile 合法域名：https://你的域名

另外，downloadFile 合法域名里面还有两个头像相关域名建议加上：

https://thirdwx.qlogo.cn
https://wx.qlogo.cn

配置页面如下，这个地方一定要认真填：

如果域名没配置对，小程序前端就请求不到 WordPress 数据

2. 用 HBuilder X 打开源码

打开 HBuilder X，把小程序前端源码文件夹拖进去。

3. 修改 manifest.json

接下来找到项目里的 manifest.json 文件。

这里需要配置应用名称、版本号、小程序 AppID 等信息。

AppID 可以在小程序后台找到。

路径是：

开发管理 → 开发者 ID → AppID

复制 AppID。

然后回到 HBuilder X，在 manifest.json 里面找到微信小程序配置，把 AppID 填进去。

4. 修改接口域名

接下来找到这个文件：

utils/http.js

里面有一行接口地址：

const baseUrl = 'https://blog.taoxiaoxin.club';

把 https://blog.taoxiaoxin.club 修改成你自己的域名。

比如：

const baseUrl = 'https://你的域名';

九、运行小程序

上面的配置都完成以后，就可以运行小程序了。

在 HBuilder X 中点击：

运行 → 运行到小程序模拟器 → 微信开发者工具

或者选择 QQ 小程序开发者工具。

如果配置没问题，就可以在开发者工具里面看到小程序运行效果。

到这里，基本就说明前后端已经打通了。

十、上传微信小程序

如果你要发布微信小程序，点击 HBuilder X 里的：

发行 → 小程序 – 微信

然后点击发布。

发布完成以后，打开微信开发者工具，点击上传。

上传成功后，回到微信小程序后台，提交审核。

审核通过以后，再点击发布即可。

十一、常见修改位置

小程序跑起来以后，肯定还需要改成你自己的内容。

下面这几个地方比较常用。

1. 修改小程序顶部名称

如果你想修改小程序顶部显示的名称，找到：

pages.json

然后把里面的默认名称替换成你自己的小程序名称。

比如把 淘小欣的博客 改成你自己的名字。

2. 修改小程序底部信息

如果你想修改关于页面或者底部信息，找到：

pages/about/about.vue

然后把里面的内容改成自己的。

比如可以改成：

• 小程序名称

• 作者介绍

• 联系方式

• 公众号信息

• 版权信息

这些都可以根据自己的情况调整。

十二、小程序备案与认证

1. 备案

根据《工业和信息化部关于开展移动互联网应用程序备案工作的通知》要求，小程序必须要备案才能使用。

点击账号设置 → 去备案。

备案审核一般两周之内就能完成。

2. 小程序认证

由于目前微信官方限制，必须认证后才能使用微信搜索和分享功能。个人认证需要支付认证服务费，有效期一年，并且只有 3 次修改机会。不管认证是否通过，服务费都不会退回，建议先通过备案审核后再提交认证。

打开小程序后台 → 账号设置 → 去认证。

十三、几个注意事项

这里再总结几个容易踩坑的地方。

1. 域名必须 HTTPS

微信小程序请求接口，必须使用 HTTPS 域名。

2. 合法域名要填完整

小程序后台的 request、uploadFile、downloadFile 等合法域名要配置正确。

否则小程序前端会请求失败。

3. 不要直接在微信开发者工具里改源码

如果要修改代码，建议在 HBuilder X 里面改。

不要直接在微信开发者工具里面改。

因为重新编译以后，微信开发者工具里面的代码可能会被覆盖。

十四、总结

总的来说，用 WordPress 搭建微信 / QQ 小程序，核心就是先把网站环境配置好，再把小程序前端和接口域名对接起来。

如果你本身就有 WordPress 博客，这种方式还是挺适合的，不用重新开发后端，也不用单独写一套文章管理系统。

中间可能会涉及服务器、备案、SSL、小程序后台配置这些步骤，新手跟着流程一步一步操作就行。

源码我已经打包好了，需要的朋友可以自行下载：

源码下载：https://txx.lanzoue.com/iDcnJ3prxjle

好了，今天的分享就到这里。

如果你也想把自己的 WordPress 博客做成小程序，可以动手试一试。

配置过程中遇到问题，欢迎在评论区留言，我看到会及时回复。

别忘了点赞、收藏、转发，我们下期见~