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

观看视频 https://www.bilibili.com/video/BV1GX4y1G73o?share_source=copy_web

使用wordpress手把手教你搭建一个QQ微信小程序,小白也能学得会!
最近搭建了一个微信小程序,顺便记录一下。感兴趣的朋友可以看一看。

展示

%title插图%num

废话少说! 直接开干!

准备工作(百度部分)
首先需要备案的域名和服务器。

阿里云服务器购买教程链接:https://jingyan.baidu.com/article/8275fc864257cb46a03cf625.html
阿里云域名教程:https://jingyan.baidu.com/article/11c17a2cd708c2f446e39d02.html
阿里云域名服务器如何备案:https://jingyan.baidu.com/article/eb9f7b6d8980a4869364e8a5.html
下载安装微信开发者工具,QQ开发者工具和HBuilder X工具

微信开发者工具下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
HBuilder X工具下载:https://www.dcloud.io/hbuilderx.html
安装宝塔面板

阿里云服务器安装宝塔面板教程:https://yq.aliyun.com/articles/685978?type=2
宝塔官网安装教程:https://www.bt.cn/download/linux.html
注册一个微信/QQ小程序,不会的百度。

下载WordPress和小程序源码包

小程序文件说明:文件夹后会有4个文件:小程序源码,pods.html(数据字段),小程序插件,pods插件
源码下载链接:https://taoxiaoxin.lanzous.com/iL8cFl5a5ne
密码:i851
图文教程
WordPress配置
1.上传安装WordPress博客程序文件到网站根目录下。

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

%title插图%num
%title插图%num

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

%title插图%num

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

%title插图%num

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

%title插图%num

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

%title插图%num

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

%title插图%num
%title插图%num

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

%title插图%num
%title插图%num

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

%title插图%num
%title插图%num

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

%title插图%num

小程序运行环境配置
1.填好小程序基本信息,在小程序后台配置服务器基本信息,域名等信息

基本配置格式如下:

request合法域名:以https://开头+你的域名
socket合法域名:以wss://开头+你的域名
uploadFile合法域名:以https://开头+你的域名
downloadFile合法域名:其中https://thirdwx.qlogo.cn;https://wx.qlogo.cn;为必填字段,最后以https://开头+你的域名
udp合法域名:以udp://开头+你的域名
2.打开下载好的hbuilder ,将小程序前端文件夹拖入到hbuilder,然后找到工具—–》点击—-》配置微信、QQ开发工具路径。

%title插图%num

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

%title插图%num

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

%title插图%num
%title插图%num

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

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

%title插图%num
%title插图%num

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

%title插图%num

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

export const API = ‘https://txran.cn’;

%title插图%num


1

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

%title插图%num

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

%title插图%num

最后的最后,上传代码。

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

%title插图%num

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

%title插图%num
%title插图%num

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

%title插图%num

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

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

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

最后点击上传即可。

%title插图%num
%title插图%num
%title插图%num

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

拓展说明
修改小程序顶部小程序名

%title插图%num
%title插图%num

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

修改小程序底部信息

%title插图%num

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

%title插图%num

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

%title插图%num

注意:
修改代码请不要在微信开发者工具修改,应该在HBuilder X里面修改源代码。
PS:还不会就来找我吧,欢迎来撩!
想让我帮忙搭建的也可以来奥~~

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

HBuilderX.3.1.7.20210330.zip下载链接https://hx81.lanzous.com/ilF47nmcndi

%title插图%num
© 版权声明
评论 抢沙发
的头像-IT趣味分享

昵称

取消
昵称表情代码图片