5.微信公共页面解决方案
<p>[TOC]</p>
<h2>1.开发背景</h2>
<p>微信开发中JS-SDK的调用（自定义分享）需要基于对应公众号的安全域名，支付调用需要处在对应的支付目录中。安全域名和支付目录各自最多只能绑定三个，无法满足项目开发的需求。</p>
<h2>2.开发要求</h2>
<p>要求实现一个"壳"页面，放在安全域名和支付目录下，通过iframe加载对应的项目地址；
可以做到所有微信相关的功能在壳页面中实现，项目页面通过iframe跨域通信向壳页面中提供必要的数据；</p>
<h2>3.微信公共页面意义</h2>
<p>解决项目域名与安全域名冲突的问题，项目开发中仅需要调用既定接口就可以实现微信网页开发的相关功能；
包括：</p>
<ul>
<li>自定义分享；</li>
<li>调起微信支付；</li>
<li>微信网页授权（获取用户信息）；</li>
<li>其他微信相关功能；</li>
</ul>
<h2>4.微信公共页面使用方法</h2>
<h4>公共页面</h4>
<h6>Demo</h6>
<pre><code class="language-html">http://g.tcy365.com/weixin.html?iframe=http%3A%2F%2Fstatic.tcy365.org%3A1505%2Fmobile%2Fshell%2Fchild2.html</code></pre>
<h5>使用说明</h5>
<ul>
<li>g.tcy365.com/weixin.html为壳页面所在地址</li>
<li>iframe参数对应地址为实际的项目地址，需要encodeURIComponent编码</li>
</ul>
<h4>项目页面</h4>
<h6>Demo</h6>
<pre><code class="language-html">http://g.tcy365.com/weixin.html?iframe=http%3A%2F%2Fstatic.tcy365.org%3A1505%2Fmobile%2Fshell%2Fchild.html</code></pre>
<p>引入组件文件</p>
<pre><code class="language-javascript"> <script src="//static.tcy365.com/mct/weixin/tcy365-g/weixin/js/messenger.js"></script>
<script src="//static.tcy365.com/mct/weixin/tcy365-g/weixin/js/tcywxpaysdk.js"></script></code></pre>
<p>使用：</p>
<pre><code class="language-javascript"> <script>
//1.TCYWXPAYSDK接口：向外部页面发送信息；
function redirectUrl() {
TCYWXPAYSDK.redirectUrl('http://www.baidu.com');
}
//2.TCYWXPAYSDK接口：刷新页面
function reFresh() {
TCYWXPAYSDK.reFresh();
}
//3.TCYWXPAYSDK接口：设置自定义分享
var shareData = {
title: '子页面自定义标题',
desc: '子页面自定义简介',
imgUrl: 'https://static.tcy365.com/mct/action/tcy365-actspt/assets/img/weixin-share.jpg',
href: 'http://activitysupport.tcysys.uc108.net/Static/SpecialAct/Common/test/weixin/shell/parent.html?redirect=http%3A%2F%2Fwww.baidu.com'
};
function share() {
TCYWXPAYSDK.share(shareData);
}
// {"Data":{"PayInfo":{"ActualPayOrderExists":true,"OrderNo":"U2018083103275801872830066982","Url":"http://paygate.tcy365.com/h5pay.aspx","WeiXinOaOrderInfo":"{\"app_id\":\"wx3df697c72d97a798\",\"nonce_str\":\"88c61889d403459b8d99f0d738d9a2ea\",\"package\":\"prepay_id=wx31152759269102209098f17e2028607638\",\"pay_sign\":\"8365589DF74E2E6C5D24177D3A947C3E\",\"sign_type\":\"MD5\",\"signature\":\"139aa1cb10d57a7adb42f4cdc6a5df58bc73489e\",\"timestamp\":\"1535700467\"}"}},"Status":false,"Message":"成功","Code":0}
//4.TCYWXPAYSDK接口：调起支付
var testData = {
app_id: 'wx3df697c72d97a798',
order_no: '2419180815487753286272',
return_url: 'http://paygateinner.uc108.com/return.aspx',
notify_url: 'http://www.google.com/',
back_url: 'http://paygateinner.uc108.com/back.aspx',
operation_code: 'submit_pay',
timestamp: 1535700467,
version: 1,
sign: '8365589DF74E2E6C5D24177D3A947C3E'
};
function pay() {
TCYWXPAYSDK.pay(testData, function (d) { console.log('支付结果回调方法', d); alert(d.act); });
}
//5.TCYWXPAYSDK接口：获取父级页面网址
function getParentUrl() {
TCYWXPAYSDK.getParentUrl(function (d) {
// console.log('获取父级页面url',d);
$('#output').text('获取父级页面url:' + d);
});
}
</script>
</code></pre>
<h2>5.微信公共页面原理说明</h2>
<p><img src="http://doc.uc108.org:8002/Public/Uploads/2018-09-05/5b8fa54b7126a.png" alt="" /></p>
<h3>5.1本地开发测试设置</h3>
<p><del>1.修改电脑host文件(位置：C:\windows\system32\drivers\etc)，将g.tcy365.com配置到本地ip</del></p>
<pre><code class="language-javascript">192.168.7.155 g.tcy365.com
</code></pre>
<p>~~2.启动Fiddler，设置网络代理，让手机连接到电脑网络；
3.在手机微信中访问对应网址，测试相关功能；~~~~</p>
<ul>
<li>开发说明
1.页面放在g.tcy365.com，是因为该域名既是同城游公众号的安全域名，也是支付目录；
2.壳页面与项目页面通过messagener.js实现跨域通信；
3.壳页面和项目页面可以相互发送数据，不同的数据参数驱动不同方法调用，实现对应的功能（详见页面上上方的API）；</li>
</ul>
<h3>5.2 TCYWXPAYSDK API</h3>
<hr />
<h4>TCYWXPAYSDK.redirectUrl</h4>
<p><strong>接口说明：</strong>
TCYWXPAYSDK.redirectUrl(string)
驱动页面跳转至对应的网址</p>
<p><strong>参数说明：</strong>
网址</p>
<p><strong>示例代码：</strong></p>
<pre><code class="language-javascript">TCYWXPAYSDK.redirectUrl('http://www.baidu.com');</code></pre>
<hr />
<h4>TCYWXPAYSDK.reFresh</h4>
<p><strong>接口说明：</strong>
TCYWXPAYSDK.reFresh()
刷新页面</p>
<p><strong>参数说明：</strong>
无</p>
<p><strong>示例代码：</strong></p>
<pre><code class="language-javascript">TCYWXPAYSDK.redirectUrl();</code></pre>
<hr />
<h4>TCYWXPAYSDK.share</h4>
<p><strong>接口说明：</strong>
TCYWXPAYSDK.share(object)
设置自定义分享数据</p>
<p><strong>参数说明：</strong>
数据对象，包括各种自定的分享的各种参数；</p>
<pre><code class="language-javascript"> {
title: '',
desc: '',
imgUrl: '',
href: ''
};</code></pre>
<p><strong>示例代码：</strong></p>
<pre><code class="language-javascript">var shareData = {
title: '子页面自定义标题',
desc: '子页面自定义简介',
imgUrl: 'https://static.tcy365.com/mct/action/tcy365-actspt/assets/img/weixin-share.jpg',
href: 'http://activitysupport.tcysys.uc108.net/Static/SpecialAct/Common/test/weixin/shell/parent.html?redirect=http%3A%2F%2Fwww.baidu.com'
};
TCYWXPAYSDK.share(shareData);</code></pre>
<hr />
<h4>TCYWXPAYSDK.pay</h4>
<p><strong>接口说明：</strong>
TCYWXPAYSDK.pay(object,function)
调用支付接口，接收支付结果回调</p>
<p><strong>参数说明：</strong>
object：支付相关参数；</p>
<pre><code class="language-javascript"> {
app_id: 100001,
order_no: '2419180815487753286272',
return_url: 'http://paygateinner.uc108.com/return.aspx',
notify_url: 'http://www.google.com/',
back_url: 'http://paygateinner.uc108.com/back.aspx',
operation_code: 'submit_pay',
timestamp: 1534311180,
version: 1,
sign: '44e191d120191af3cc5bc7b93cddcd12'
};</code></pre>
<p>function：支付结果的回调函数；</p>
<p><strong>示例代码：</strong></p>
<pre><code class="language-javascript">var testData = {
app_id: 100001,
order_no: '2419180815487753286272',
return_url: 'http://paygateinner.uc108.com/return.aspx',
notify_url: 'http://www.google.com/',
back_url: 'http://paygateinner.uc108.com/back.aspx',
operation_code: 'submit_pay',
timestamp: 1534311180,
version: 1,
sign: '44e191d120191af3cc5bc7b93cddcd12'
};
TCYWXPAYSDK.pay(testData, function (d) { alert(d.act); });</code></pre>
<hr />
<h4>TCYWXPAYSDK.getParentUrl</h4>
<p><strong>接口说明：</strong>
TCYWXPAYSDK.getParentUrl(function)
获取外部嵌套页面当前的url地址参数；</p>
<p><strong>参数说明：</strong>
function：获取网址成功后的回调</p>
<p><strong>示例代码：</strong></p>
<pre><code class="language-javascript">TCYWXPAYSDK.getParentUrl(function (d) {
console.log('获取父级页面url',d);
});</code></pre>
<h3>5.3壳页面开发说明</h3>
<ul>
<li>页面位置</li>
</ul>
<pre><code class="language-javascript">//g.tcy365.com/parent.html</code></pre>
<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;">redirect</td>
<td style="text-align: left;">检测有此参数，页面立即跳转至对应的页面地址；</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">iframe</td>
<td style="text-align: left;">检测有此参数，页面通过iframe加载的方式加载该网址</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">wxopenid</td>
<td style="text-align: left;">微信用户openid</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">wxnickname</td>
<td style="text-align: left;">微信用户昵称</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">wxavatar</td>
<td style="text-align: left;">微信用户头像</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">tcyid</td>
<td style="text-align: left;">同城游userid</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">tcynickname</td>
<td style="text-align: left;">同城游用户昵称</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">tcyavatar</td>
<td style="text-align: left;">同城游用户头像</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">ext</td>
<td style="text-align: left;">随机数，放在参数最末</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">其他参数</td>
<td style="text-align: left;">视项目情况来设置</td>
<td style="text-align: left;">encodeURIComponent编码参数</td>
<td>-</td>
</tr>
</tbody>
</table>
<ul>
<li>示例Demo</li>
</ul>
<pre><code class="language-javascript">http://g.tcy365.com/weixin.html?iframe=http%3A%2F%2Fstatic.tcy365.org%3A1505%2Fmobile%2Fshell%2Fchild2.html</code></pre>
<p><img src="http://doc.uc108.org:8002/Public/Uploads/2018-09-05/5b8fa5c6e311e.png" alt="" /></p>