WP-App wordpress小程序套件使用说明

WP-App wordpress小程序套件使用说明


快速搭建微信小程序

<p>快速搭建微信小程序,假设您已经有微信的小程序账号,并已获得了微信小程序的 <strong>APP ID</strong> 和 <strong>APP SECRET</strong>,若不知道怎么申请微信小程序账号及获取<strong>APP ID</strong> 和 <strong>APP SECRET</strong> 请参考文档 <a href="https://www.showdoc.cc/wpapp?page_id=3849324952971763" title="微信小程序申请设置指南">微信小程序申请设置指南</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后台&quot;微信小程序&quot;管理菜单页面,设置好 <strong>APP ID</strong> 和 <strong>APP SECRET</strong></p> <p><img src="https://wpapp-cdn.wp-autoblog.net/manual/1.png" alt="" /></p> <h4>3.下载微信开发者工具安装后新建项目导入前端代码</h4> <p>下载地址:<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html">https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</a></p> <p>解压获取到的微信小程序前端代码(文件名wp-app-mp-weixin.zip)到本地计算机上 比如解压到本地 <code>D:\wechat_app\wp-app-mp-weixin</code></p> <p>安装好微信开发者工具后新建小程序项目,选择 &quot;导入项目&quot;,填写项目名称,AppID,选择目录路径<code>D:\wechat_app\wp-app-mp-weixin</code></p> <p><img src="https://wpapp-cdn.wp-autoblog.net/manual/2.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.wxss</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>,可对微信小程序进行全局配置,更多详细配置可参考https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html</p> <p>比如,修改小程序名称</p> <pre><code class="language-json"> "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "修改为您的小程序名称", "navigationBarBackgroundColor": "#FFFFFF", "backgroundColor": "#F8F8F8" },</code></pre> <h4>7.上传前端代码包,等待审核通过后上线</h4> <p>基本信息修改完毕,开发工具左边小程序预览正常后即可上传代码,上传代码后,登陆小程序管理后台,<a href="https://mp.weixin.qq.com/">https://mp.weixin.qq.com/</a> 提交审核,等待审核通过后登陆小程序管理后台布上线即可。</p> <p><img src="https://wpapp-cdn.wp-autoblog.net/manual/3.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>

页面列表

ITEM_HTML