快速搭建QQ小程序
<p>快速搭建QQ小程序，假设您已经有QQ小程序账号，并已获得了QQ小程序的 <strong>APP ID</strong> 和 <strong>APP SECRET</strong>，若不知道怎么申请QQ小程序账号及获取<strong>APP ID</strong> 和 <strong>APP SECRET</strong> 请参考 <a href="https://www.showdoc.cc/wpapp?page_id=3849344315890594" title="QQ小程序申请设置指南">QQ小程序申请设置指南</a>。</p>
<h4>1.wordpress后台上传启用插件</h4>
<p>将获取到的插件zip文件包（文件名称 wp-app.zip），通过wordpress后台直接上传启用插件，启用插件后，大部分选项设置已经自动设置好默认值，有需要参考后可自行再修改（比如需要开启的组件及显示样式）。</p>
<h4>2.wordpress后台插件小程序管理菜单设置 <strong>APP ID</strong> 和 <strong>APP SECRET</strong></h4>
<p>进入wordpress后台"QQ小程序"管理菜单页面，设置好 <strong>APP ID</strong> 和 <strong>APP SECRET</strong></p>
<p><img src="https://wpapp-cdn.wp-autoblog.net/manual/13.png" alt="" /></p>
<h4>3.下载QQ小程序开发者工具安装后新建项目导入前端代码</h4>
<p>下载地址：<a href="https://q.qq.com/wiki/tools/devtool/">https://q.qq.com/wiki/tools/devtool/</a></p>
<p>解压获取到的QQ小程序前端代码（文件名wp-app-mp-qq.zip）到本地计算机上
比如解压到本地 <code>D:\app_qq\wp-app-mp-qq</code></p>
<p>安装好QQ小程序开发者工具，打开工具后点击新建项目，项目目录选择wp-app-mp-qq文件夹目录，比如 <code>D:\app_qq\wp-app-mp-qq</code> 并填入你申请小程序的AppID，项目名称随意</p>
<p><img src="https://wpapp-cdn.wp-autoblog.net/manual/14.png" alt="" /></p>
<h4>4.修改前端代码域名配置信息</h4>
<p>导入项目成功后，在该文件下 <code>common/main.js</code>，找到该段代码(前端代码已做压缩优化)</p>
<pre><code class="language-javascript">n.default.prototype.serverUrl="https://your_wordpress_url"</code></pre>
<p>将 your_wordpress_url 替换为您的wordpress网站主页地址</p>
<p>比如：</p>
<pre><code class="language-javascript">n.default.prototype.serverUrl="https://wp-autoblog.net"</code></pre>
<p>或</p>
<pre><code class="language-javascript">n.default.prototype.serverUrl="https://wp-autoblog.net/wordpress"</code></pre>
<h4>5.修改小程序主色调颜色</h4>
<p>在该文件下 <code>common/main.qss</code>，找到该段代码</p>
<pre><code class="language-css">page{ --mainColor:#00b3db;
--mainColorLight:#01c5f1;
--mainColorShadow:rgba(0,179,219,0.2)
}</code></pre>
<p>可修改小程序主色调颜色
<code>--mainColor</code> 为主色调颜色 <code>--mainColorLight</code> 为主色调浅色系颜色 <code>--mainColorShadow</code> 为主色调阴影颜色</p>
<h4>6.修改小程序名称，底部导航栏信息等</h4>
<p>在该文件下 <code>app.json</code>，可对QQ小程序进行全局配置，更多详细配置可参考https://q.qq.com/wiki/develop/miniprogram/frame/dispose.html</p>
<p>比如，修改小程序名称</p>
<pre><code class="language-json"> "window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "有云WordPress",
"navigationBarBackgroundColor": "#FFFFFF"
},</code></pre>
<h4>7.上传前端代码包，等待审核通过后上线</h4>
<p>基本信息修改完毕，开发工具左边小程序预览正常后即可上传代码，上传代码后，登陆小程序管理后台，<a href="https://q.qq.com/">https://q.qq.com/</a> 提交审核，等待审核通过后登陆小程序管理后台布上线即可。</p>
<p><img src="https://wpapp-cdn.wp-autoblog.net/manual/15.png" alt="" /></p>
<h5>快速过审技巧</h5>
<p>保证小程序标题和注册的小程序名称保持一致，选择的服务类目和网站主题保持一致，wordpress后台本插件选项菜单可先<strong>设置关闭评论功能</strong>，等审核通过上线后再开启评论功能即可。</p>
<div style="text-align:center;">
<img src="https://wpapp-cdn.wp-autoblog.net/manual/4.png" />
</div>