分类
使用文档

WordPress小程序(WP-APP)-使用文档(5)-快速搭建QQ小程序

快速搭建QQ小程序,假设您已经有QQ小程序账号,并已获得了QQ小程序的 APP IDAPP SECRET,若不知道怎么申请QQ小程序账号及获取APP IDAPP SECRET 请参考 QQ小程序申请设置指南

1.wordpress后台上传启用插件

将获取到的插件zip文件包(文件名称 wp-app.zip),通过wordpress后台直接上传启用插件,启用插件后,大部分选项设置已经自动设置好默认值,有需要参考后可自行再修改(比如需要开启的组件及显示样式)。

2.wordpress后台插件小程序管理菜单设置 APP IDAPP SECRET

进入wordpress后台”QQ小程序”管理菜单页面,设置好 APP IDAPP SECRET

3.下载QQ小程序开发者工具安装后新建项目导入前端代码

下载地址:https://q.qq.com/wiki/tools/devtool/

解压获取到的QQ小程序前端代码(文件名wp-app-mp-qq.zip)到本地计算机上
比如解压到本地 D:\app_qq\wp-app-mp-qq

安装好QQ小程序开发者工具,打开工具后点击新建项目,项目目录选择wp-app-mp-qq文件夹目录,比如 D:\app_qq\wp-app-mp-qq 并填入你申请小程序的AppID,项目名称随意

4.修改前端代码域名配置信息

导入项目成功后,在该文件下 common/main.js,找到该段代码(前端代码已做压缩优化)

n.default.prototype.serverUrl="https://your_wordpress_url"

将 your_wordpress_url 替换为您的wordpress网站主页地址

比如:

n.default.prototype.serverUrl="https://wp-autoblog.net"

n.default.prototype.serverUrl="https://wp-autoblog.net/wordpress"

5.修改小程序主色调颜色

在该文件下 common/main.qss,找到该段代码

page{ --mainColor:#00b3db;
      --mainColorLight:#01c5f1;
      --mainColorShadow:rgba(0,179,219,0.2)
     }

可修改小程序主色调颜色
--mainColor 为主色调颜色 --mainColorLight 为主色调浅色系颜色 --mainColorShadow 为主色调阴影颜色

6.修改小程序名称,底部导航栏信息等

在该文件下 app.json,可对QQ小程序进行全局配置,更多详细配置可参考https://q.qq.com/wiki/develop/miniprogram/frame/dispose.html

比如,修改小程序名称

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "有云WordPress",
    "navigationBarBackgroundColor": "#FFFFFF"
  },

7.上传前端代码包,等待审核通过后上线

基本信息修改完毕,开发工具左边小程序预览正常后即可上传代码,上传代码后,登陆小程序管理后台,https://q.qq.com/ 提交审核,等待审核通过后登陆小程序管理后台布上线即可。

快速过审技巧

保证小程序标题和注册的小程序名称保持一致,选择的服务类目和网站主题保持一致,wordpress后台本插件选项菜单可先设置关闭评论功能,等审核通过上线后再开启评论功能即可。

发表评论

邮箱地址不会被公开。 必填项已用*标注