哈喽大家好最近折腾了一个小程序然后刚好有人在问博客怎么转小程序的今天就给大家分享一下。如果你本来就有一个 WordPress 博客或者准备搭建一个自己的个人网站那么完全可以顺手再做一个微信小程序 / QQ 小程序。这样一来你的文章不仅可以在网页上展示也可以通过小程序的方式展示出来。说白了就是把你的 WordPress 博客直接变成一个微信小程序。对于个人博客、资源网站、技术博客、教程站来说还是挺有用的。今天就手把手教大家如何用 WordPress 搭建一个微信 / QQ 小程序。小白也可以跟着操作基本照着步骤来就行。一、最终效果展示先来看一下最终效果。搭建完成以后小程序大概就是下面这种样子整体就是一个博客类小程序可以展示文章、分类、具体内容等。如果你本身就有 WordPress 站点那么这个方案还是比较适合的。二、准备工作正式开始之前需要先准备好下面这些东西。1. 域名和服务器首先你需要一个已经备案的域名和服务器。如果你只是自己本地测试可以先不用太纠结但是如果后面要上线微信小程序域名备案基本是绕不开的。这里建议直接用阿里云、腾讯云这些国内服务器。需要准备一台国内云服务器一个已备案域名如果你还没有服务器和域名可以先自行购买和备案可以通过如下链接购买腾讯或者阿里服务器。# 腾讯云服务器购买链接如下腾讯云服务器首年 38老用户一年99188不等续费同价https://cloud.tencent.com/act/cps/redirect?redirect6544cps_key2f4fe1626c8745bb78e64d11034157acfromconsole# 阿里云服务器购买链接如下一年99起步https://www.aliyun.com/benefit?source5176.29345612userCodeizmoik21# 京东云服务器购买链接如下一年68起步https://daili.jd.com/s?linkNoM7HWSFYXTE3OXN5FSFBQUWPP7PD27RK72MBSVXIB47UUVKM5PLA5RO5REIPFQG52QGOLYY6ZQZIO4FJFPWNHNL2ZFI2. 开发工具接下来需要安装几个工具微信开发者工具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-sSLhttps://resource.fit2cloud.com/1panel/package/v2/quick_start.sh)选择简体中文输入2回车。输入安装目录默认/opt输入后回车即可。修改设置默认端口号设置访问入口用户名和密码安装完成后。终端里会显示 1Panel 的访问地址、用户名和密码。最后在服务器控制台防火墙放开你的端口。然后在浏览器中打开http://你的服务器IP:面板端口登录 1Panel 后台。注意如果打不开 1Panel 后台记得检查服务器安全组和防火墙端口有没有放行。四、配置域名解析在域名解析控制台添加域名解析并且绑定服务器IP。五、安装 WordPress1. 下载WordPress准备工作完成以后我们先来安装 WordPressWordPress 可以从官网下最新的也可以或者使用我提供的。https://cn.wordpress.org/download/2. 创建网站运行环境登录 1Panel 后台以后先进入应用商店 → 搜索如下程序四个程序安装OpenRestyMySQLPHPRedis按照提示选择最新版本安装即可需要耐心等待一会儿。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.zipfengrui-xingshu_EDDrk.zippods.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 → lmport/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.小程序认证由于目前微信官方限制必须要认证后才能使用微信搜索和分享功能个人认证需要花费30每次一年有效期并且只有3次修改机会不管认证是否通过该费用都不会被退回建议先通过备案审核后再去提交认证。打开小程序后台→账号设置→点击去认证。十三、几个注意事项这里再总结几个容易踩坑的地方。1. 域名必须 HTTPS微信小程序请求接口必须使用 HTTPS 域名。2. 合法域名要填完整小程序后台的 request、uploadFile、downloadFile 等合法域名要配置正确。不然小程序前端会请求失败。3. 不要直接在微信开发者工具里改源码如果要修改代码建议在 HBuilder X 里面改。不要直接在微信开发者工具里面改。因为重新编译以后微信开发者工具里面的代码可能会被覆盖。十四、总结总的来说用 WordPress 搭建微信 / QQ 小程序其实并不复杂。核心流程就这几步准备服务器和备案域名安装 1Panel 面板通过 1Panel 安装 WordPress配置 SSL 和 WordPress 伪静态设置 WordPress 固定链接安装小程序相关插件导入 Pods 配置修改小程序前端域名和 AppID用 HBuilder X 运行项目上传微信 / QQ 小程序提交审核并发布如果你本身就有 WordPress 博客这种方式还是挺适合的。不用重新开发后端也不用单独写一套文章管理系统。WordPress 负责内容管理小程序负责前端展示。这样一套下来个人博客、小型资源站、教程站都可以快速做成小程序。相比宝塔1Panel 的界面更加简洁应用商店安装 WordPress 也比较方便新手用起来会更直观一点。当然这套方案也不是完全没有门槛。比如服务器、备案、SSL、小程序后台配置这些地方对于新手来说可能会有点绕。但是只要一步一步跟着来问题不大。源码我已经打包好了需要的朋友可以自行下载源码下载https://txx.lanzoue.com/iDcnJ3prxjle好了今天的分享就到这里。如果你也想把自己的 WordPress 博客做成小程序可以动手试一试。配置过程中遇到问题欢迎在评论区留言我看到会及时回复。别忘了点赞、收藏、转发我们下期见~