接入微信公众号
<h1>简述</h1>
<ul>
<li>本文档介绍了如何将家长端程序自行对接微信公众号</li>
</ul>
<h4>玩瞳伴读家长端URL：</h4>
<ul>
<li><code>http://operation.51wanxue.com/picturebook-m/#/home</code></li>
</ul>
<h4>参数：</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">必选</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">openId</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>用户唯一标识</td>
</tr>
<tr>
<td style="text-align: left;">wx</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>签名接口地址(需经过BASE64编码)</td>
</tr>
<tr>
<td style="text-align: left;">action</td>
<td style="text-align: left;">否</td>
<td style="text-align: left;">string</td>
<td>对于无屏设备，请务必传入此参数，并将其值设为 <code>noScreen</code></td>
</tr>
</tbody>
</table>
<h4>访问样例地址：</h4>
<p>[ <code>http://operation.51wanxue.com/picturebook-m/#/home?wx=aHR0cDovL3d3dy5zdGFud2luZC5jb20vd3gvc2lnbmF0dXJlLnBocA%3D%3D&amp;openId=8d339aa8399a11e9b222d89ef3491b79</code>]( <a href="http://operation.51wanxue.com/picturebook-m/#/home?wx=aHR0cDovL3d3dy5zdGFud2luZC5jb20vd3gvc2lnbmF0dXJlLnBocA%3D%3D&openId=8d339aa8399a11e9b222d89ef3491b79">http://operation.51wanxue.com/picturebook-m/#/home?wx=aHR0cDovL3d3dy5zdGFud2luZC5jb20vd3gvc2lnbmF0dXJlLnBocA%3D%3D&openId=8d339aa8399a11e9b222d89ef3491b79</a> " <code>http://operation.51wanxue.com/picturebook-m/#/home?wx=aHR0cDovL3d3dy5zdGFud2luZC5jb20vd3gvc2lnbmF0dXJlLnBocA%3D%3D&amp;openId=8d339aa8399a11e9b222d89ef3491b79</code>")</p>
<h2>openId参数获取</h2>
<ul>
<li>openId用于区分用户，是用户唯一标识
获取方式见[这里](<a href="https://www.showdoc.com.cn/visiontalk?page_id=2028843162295491">https://www.showdoc.com.cn/visiontalk?page_id=2028843162295491</a> "获取玩瞳openId")</li>
</ul>
<h2>wx参数获取</h2>
<h4>此参数的意义</h4>
<ul>
<li>此参数是经过base64编码过后的一个接口地址，将用于获取微信凭证进行签名的结果（参数要求见下文 <strong>搭建应用授权签名接口</strong>）</li>
</ul>
<h4>一、申请微信公众号</h4>
<ul>
<li>首先需要申请一个<strong>微信公众号</strong>，下文均以微信测试号为例
[微信测试号申请地址](<a href="https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index">https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index</a> "微信测试号申请地址")
<a href="https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&amp;lang=zh_CN&amp;token=">微信公众号、服务号等申请地址</a></li>
</ul>
<h4>二、配置微信公众号</h4>
<ul>
<li>登录<strong>微信公众平台</strong>
[微信公众平台](<a href="https://mp.weixin.qq.com">https://mp.weixin.qq.com</a> "微信公众平台")</li>
<li>
<p>申请成为开发者
在后台页面点击左侧菜单栏依次点击<strong>开发->基本配置</strong>可以进入开发者申请页面
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/a77c3f159facd290e849b3a0fe63a78c?showdoc=.jpg" alt="" /></p>
</li>
<li>
<p>启用并获取AppSecret
在<strong>开发->基本配置</strong>页面点击启用开发者密码，根据提示进行验证后可拿到AppSecret
一定要妥善保管AppSecret，之后<strong>不能再次查看</strong>，只能重新生成
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/a85ae887afab05fdb762c9ef1167b8df?showdoc=.jpg" alt="" />
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/2575a9246a404ad055c1c368809d22c6?showdoc=.jpg" alt="" /></p>
</li>
<li>
<p>配置服务器IP到IP白名单
获取完AppSecret之后会提示你继续配置IP白名单，或者直接在界面上点击<strong>查看</strong>IP白名单，然后点击修改
此白名单列表为搭建签名服务的服务器IP
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/1c6e162edda3646d155ee7a6e8476a1a?showdoc=.jpg" alt="" />
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/7f3ed7465d4b00115430ac4ac507cf86?showdoc=.jpg" alt="" /></p>
</li>
<li>配置weixin-js-sdk授权域名
在后台页面点击左侧菜单栏依次点击<strong>设置->公众号设置->功能设置</strong>可以进入<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/153d3b22b1c5a64317d02be888e1b61f?showdoc=.jpg" alt="" />
点击<strong>设置</strong>来配置JS接口安全域名
<strong>配置域名为绘本馆域名<code>operation.51wanxue.com</code></strong>(也可以反向代理绘本馆地址，即这里的授权域名为你的域名)
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/a6a4ef127865ab52b3192020dcf6d1cf?showdoc=.jpg" alt="" />
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/3449578abe4277a61e0b029519ffe97f?showdoc=.jpg" alt="" /></li>
</ul>
<h4>三、搭建应用授权签名接口</h4>
<ul>
<li>
<p>接口服务Demo源码 (自行开发签名接口见下文 <strong>微信签名接口自行开发要求</strong>)
PHP版本： [<code>https://gitee.com/sense7/signature-wx-js-sdk</code>](<a href="https://gitee.com/sense7/signature-wx-js-sdk">https://gitee.com/sense7/signature-wx-js-sdk</a> "<code>https://gitee.com/sense7/signature-wx-js-sdk</code>")</p>
<h5>搭建PHP环境后访问入口为: <code>http://xxxx.com/signature.php</code></h5>
<h5>则绘本馆wx参数应为:</h5>
<p>Base64(<a href="http://xxxx.com/signature.php">http://xxxx.com/signature.php</a>) => <strong>aHR0cDovL3h4eHguY29tL3NpZ25hdHVyZS5waHA=</strong></p>
</li>
<li>签名接口测试请求样例：
<code>http://xxxx.com/signature.php?url=http://operation.51wanxue.com/picturebook-m/</code></li>
<li>返回样例：
<pre><code class="language-json">{
appId: &quot;wxd0803523dcadc007&quot;,
timestamp: 1551237888,
nonceStr: &quot;wantongtest&quot;,
signature: &quot;565194473ed71928f8ac9ac7e40561ae31bff993&quot;,
ticket: &quot;LIKLckvwlJT9cWIhEQTwfC_L_JPglkNAJ6HDVuhbwpN-RbVVBcZib8sfe0I3to39DU1LiO5V4hwqIE3cepb51g&quot;,
url: &quot;http://operation.51wanxue.com/picturebook-m/&quot;,
code: 0
}</code></pre></li>
</ul>
<h2>微信签名接口自行开发要求</h2>
<ul>
<li>要求请求参数：</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">必选</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">url</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>请求授权的地址(绘本馆地址)</td>
</tr>
</tbody>
</table>
<ul>
<li>要求返回参数:</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">必选</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">appId</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>公众号Appid</td>
</tr>
<tr>
<td style="text-align: left;">timestamp</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">long</td>
<td>签名时间戳</td>
</tr>
<tr>
<td style="text-align: left;">nonceStr</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>随机字符串</td>
</tr>
<tr>
<td style="text-align: left;">signature</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>签名结果</td>
</tr>
<tr>
<td style="text-align: left;">code</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">int</td>
<td>状态码</td>
</tr>
<tr>
<td style="text-align: left;">url</td>
<td style="text-align: left;">否</td>
<td style="text-align: left;">string</td>
<td>被授权的地址</td>
</tr>
</tbody>
</table>
<ul>
<li>
<p>时序图
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/4a458c547eaaf281714f1e3f039fd9d5?showdoc=.jpg" alt="" /></p>
</li>
<li>signature计算方式参考微信文档 附录1：
[微信js-sdk签名文档](<a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115">https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115</a> "微信js-sdk签名文档")</li>
</ul>
<p>[1]: <a href="https://www.showdoc.com.cn/visiontalk?page_id=2028843162295491">https://www.showdoc.com.cn/visiontalk?page_id=2028843162295491</a> "good"
[1]: <a href="https://www.showdoc.com.cn/visiontalk?page_id=2028843162295491">https://www.showdoc.com.cn/visiontalk?page_id=2028843162295491</a> "这里"</p>