1 Star 0 Fork 1.5K

沐瑶 / LearningNotes

forked from 陌溪 / LearningNotes 
Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
README.md 6.04 KB
Copy Edit Web IDE Raw Blame History

蘑菇博客QQ小程序发布指南

前言

这阵子使用 uniappColorUI 搭建了蘑菇博客的移动端应用,uniapp是使用vue.js开发的前端应用框架,可以做到开发一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台,下面演示一下uniapp打包成QQ小程序后的效果图。

uniapp

下载HbuildX

我们首先下载uniapp推荐的编辑器 HbuildX

导入项目

下载完成后,我们将uniapp_mogu_web项目导入到我们的HbuildX编辑器中,然后点击上方的发布按钮

image-20200814161009006

然后选择 chrome,等待一段时间后,就会弹出页面

tip:需要注意,我们启动uniapp项目的时候,必须确保我们的后台服务已经成功启动了

同时我们还需要打开 index/ index页面

运行成功后的页面如下所示

image-20200814161424623

这个时候,我们就需要打开F12的页面,然后点击手机端,这个时候就能够看到项目已经成功运行了

image-20200814161914608

QQ小程序

uniapp可以打包成QQ小程序、微信小程序、APP等,但是因为微信小程序需要交费 300元,本着省钱的原则,决定就发布成QQ小程序,因为小程序支持个人发布

下载QQ小程序开发者工具

因为uniapp需要转换成QQ小程序的代码,因此我们首先需要下载 QQ小程序开发工具

image-20200814164442612

修改配置

如果我们发布一个QQ小程序体验版本,这个时候就可以使用 IP+端口的方式,如下我们首先找到config文件,修改里面的配置,改成自己的线上的ip

export const appConfig = {

    tokenKey: 'Authorization',
	
	// 开发环境
    // WEB_API: 'http://localhost:8603',
	// PICTURE_API: 'http://localhost:8602',
	
	// 演示环境
	WEB_API: 'http://120.78.126.96:8603',
	PICTURE_API: 'http://120.78.126.96:8602',
	
	// 正式环境
	// WEB_API: 'https://apiweb.moguit.cn',
	// PICTURE_API: 'https://apipicture.moguit.cn',
}

如果你想发布项目的话,那么就需要拥有域名 和 配置对应的https了,关于如何配置,可以参考这篇博客

Linux下通过nginx配置https

打包

下载完成后,我们回到HbuildX页面,然后点击 发行 -> 小程序-QQ

image-20200814164605313

然后填写小程序名称和小程序AppID

image-20200814164729544

关于AppId的获取,我们需要到 https://q.qq.com/ 页面进行申请,然后完成后,我们找到AppID

image-20200814165006063

复制到对应的AppID到我们的HbuildX中,点击发行

image-20200814165139237

下面就得到了我们QQ小程序开发工具,然后打开我们的上面路径中的程序

image-20200814165321545

打开程序后,我们选择详情,然后点击不校验域名

image-20200814165614236

然后在看左边的项目,就能够成功运行项目了

image-20200814165649487

这个时候,我们就需要点击右上角的上传

image-20200814165747527

然后在到我们的QQ小程序页面,找到刚刚的QQ小程序页面,选择设为体验版本,扫描即可进行体验

image-20200814165838142

发布QQ小程序

我们点击开发版本上的提交审核按钮,即可发布小程序。但是在发布小程序的时候,我也遇到了好几个坑,首先是第一次发布的时候

image-20200814172123614

也就是因为申请的是个人小程序,因此不支持打赏和评论的功能,所以为了解决这个问题,我们将增加开关语句用来控制小程序的评论和打赏模块的显示,我们到 系统配置 -> 网站配置 -> 评论&打赏

image-20200814172412680

然后在看我们的小程序端,这个时候就没有评论和打赏相关功能了

image-20200814172448046

我们对比之前的页面,发现已经将评论和打赏功能给关闭了,达到审核的要求

image-20200814172640019

当我修改完上述的问题后,再次提交代码

image-20200814173026185

提示小程序还需要支持QQ授权登录,这个时候我们就需要去申请QQ授权,我们到QQ互联

然后创建我们的小程序,在这之前,我们需要进行审核,按照要求完成QQ互联的审核即可

image-20200814173203070

然后我们点击查看按钮,点击申请unionid

image-20200814173328196

完成这一系列的操作后,我们回到QQ小程序页面

image-20200814173521763

最后到我们的nacos页面,http://localhost:8848/nacos/#/login,找到 mogu-web-dev.yaml配置,然后修改 appid 和 secret,也就是上面我们复制的

# uniapp相关配置
uniapp:
  qq:
    appid: XXXXXXXXXXXXXX  # 改成自己的
    secret: XXXXXXXXXXXXXX  # 改成自己的
    grant_type: authorization_code

修改完成后,我们到我们的小程序登录页面,进行QQ一键登录

image-20200814173940059

如果能够成功登录,代表配置已经正常

image-20200814173917783

这个时候我们就可以重新打包程序了,然后点击发布,最后在提交审核

Comment ( 0 )

Sign in for post a comment

1
https://gitee.com/muyao_vip/LearningNotes.git
git@gitee.com:muyao_vip/LearningNotes.git
muyao_vip
LearningNotes
LearningNotes
master

Search

102255 3a0e046c 1850385 102255 7aaa926c 1850385