使用wordpress手把手教你搭建一个QQ微信小程序，小白也能学得会！

移动开发 2025-04-08 06:19
0 阅读

使用wordpress手把手教你搭建一个QQ微信小程序，小白也能学得会！

最近搭建了一个微信小程序，顺便记录一下。感兴趣的朋友可以看一看。

展示

image-20210131153520139image-20210703224633040

image-20210131153724262image-20210131153745104

废话少说! 直接开干！

准备工作（百度部分）

  1. 首先需要备案的域名和服务器。

    • 阿里云服务器购买教程链接：https://jingyan.baidu.com/article/8275fc864257cb46a03cf625.html
    • 阿里云域名教程：https://jingyan.baidu.com/article/11c17a2cd708c2f446e39d02.html
    • 阿里云域名服务器如何备案：https://jingyan.baidu.com/article/eb9f7b6d8980a4869364e8a5.html

  2. 下载安装微信开发者工具，QQ开发者工具和HBuilder X工具

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

  3. 安装宝塔面板

    • 阿里云服务器安装宝塔面板教程：https://yq.aliyun.com/articles/685978?type=2
    • 宝塔官网安装教程：https://www.bt.cn/download/linux.html

  4. 注册一个微信/QQ小程序，不会的百度。

  5. 下载WordPress和小程序源码包

    • 小程序文件说明：文件夹后会有4个文件：小程序源码，pods.html（数据字段），小程序插件，pods插件
    • 源码下载链接：https://taoxiaoxin.lanzoux.com/iL8cFl5a5ne
      密码:i851

图文教程

WordPress配置

1.上传安装WordPress博客程序文件到网站根目录下。

2.宝塔后台设置wordpres伪静态，SSL证书

image-20210131164013823

image-20210131164228666

3.在wordpress后台设置—-》点固定链接—-》自定义结构—-》选择post id

星宿UI v1.0 ：wordpress开源微信小程序激励视频阅读资源下载 3

4.wodpress后台设置—-》找到媒体—-》自动裁剪—-》设置为（因为wp自动裁剪会导致啊特色图片模糊）

星宿UI v1.0 ：wordpress开源微信小程序激励视频阅读

5.wordpress后台安装小程序插件，wp-china-yes-master插件，以及pods插件，后台设置pods菜单,点击pods—-》点击组件—-》安装Migrate: Packages

6.用HBuilder X打开PODS21118.html文件复制所有内容。

image-20210131165814359

image-20210131170434487

在点击migrate packages，点击导入粘贴我们的代码。

image-20210131170821233

image-20210131171025274

7.随后左边菜单就会多出一个基本配置—-点开是一个关于我们（没有的话手动创建一个）

image-20210131171235837

然后选择编辑，就可以编辑我们关于界面的内容，下滑就是其他配置的字段；资源下载总开关（小程序上线审核需要关闭小程序资源下载）和小程序logo等等

image-20210131171924153

注意
  • 新注册的小程序数没有激励视频等相关配置的，后面有了再填上去，就可以靠流量主赚money了。

image-20210131172541351

小程序运行环境配置

1.填好小程序基本信息，在小程序后台配置服务器基本信息，域名等信息

image-20210131173952092

image-20210131174059116

基本配置格式如下：

  • request合法域名:以https://开头+你的域名
  • socket合法域名：以wss://开头+你的域名
  • uploadFile合法域名：以https://开头+你的域名
  • downloadFile合法域名：其中https://thirdwx.qlogo.cn;https://wx.qlogo.cn;为必填字段，最后以https://开头+你的域名
  • udp合法域名：以udp://开头+你的域名

2.打开下载好的hbuilder ，将小程序前端文件夹拖入到hbuilder，然后找到工具—–》点击—-》配置微信、QQ开发工具路径。

image-20210131175755479

找到找到微信/qq开发者工具路径（找到其桌面快捷方式—>右键----》属性------》复制目标路径）

image-20210131180310638

分别填入QQ开发者路径和微信开发者路径。

image-20210131180443539

找到manifest.json文件，配置应用名称版本号等相关信息

image-20210131181047847

首先获取小程序AppID(小程序ID)，在小程序后台点击开发管理—》开发者ID-----》AppID(小程序ID)，然后将其复制。

image-20210131182128997

然后在manifest.json文件里面配置（点击微信/QQ小程序配置）将复制的AppID(小程序ID)填入即可。

image-20210131181801837

image-20210131181840497

修改域名配置在components / api.js文件中，将https://txran.cn修改为你的域名。

export const API = 'https://txran.cn';

image-20210131183205278

接下来打开微信/QQ开发者工具，先扫码登录，开启端口（设置-安全设置-安全）

image-20210131183758846

最后，点击运行—-运行小程序模拟器—-微信/qq小程序开发者工具，就可以看到代码基本运行结果了。

image-20210131184338362

最后的最后，上传代码。

微信小程序

点击发行，点击发布到小程序-微信，然后点发布。

image-20210131184822991

image-20210131185111862

在微信开发者工具里面点击上传即可。

image-20210131185403379

QQ小程序

点击发行，点击发布到小程序-QQ，然后点发布。

image-20210131185813794

image-20210131185911162

这里需要说明一下，QQ小程序比较奇葩，它不会自动打开展示代码运行结果，需要手动输入。

首先复制HBuilder X控制台编译小程序的路径。

image-20210131190152221

然后点击新建项目，将刚复制的路径粘贴

image-20210131190418148

image-20210131190650112

最后点击上传即可。

奥。对了，记得上传上去去微信QQ小程序后台点击提交审核，最后审核通过后点发布奥！

拓展说明

修改小程序顶部小程序名

image-20210131195033946

  • 找到pages.json文件，将代码中的淘小欣科研社替换为你的小程序名

    image-20210131201243490

修改小程序底部信息

image-20210131200212861

  • 在pages文件夹下面，about/about.vue修改相关信息，将下图中的所示信息修改为自己的。

image-20210131201608826

小程序设置关联微信公众号

公众号关注组件。当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内，前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。注：设置的公众号需与小程序主体一致

星宿UI v1.0 ：wordpress开源微信小程序激励视频阅读资源下载 7

注意：

  • 修改代码请不要在微信开发者工具修改，应该在HBuilder X里面修改源代码。

PS：还不会就来找我吧，欢迎来撩！

想让我帮忙搭建的也可以来奥~~

好了，说了这么多，WordPress和小程序源码我己经打包好了，链接下载如下：

源码下载链接：https://taoxiaoxin.lanzoux.com/iL8cFl5a5ne
密码:i851

猜你喜欢

目录

热门文章