我们项目已在公众号上线，目前开发小程序，目标是直接采用webview，不需要再开发一次，但是小程序的webview不支持微信支付，只能通过跳回小程序调用小程序支付的API,我写了demo。
具体项目结构如下：
项目结构.png
1.首先在vue项目(其他用jQuery也类似)引入jssdk,这样可以调用wx.miniProgram的相关接口
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
说明一下，src中不引用http域名是我们项目环境有http和https两种方式，这样写可以根据服务器域名动态更改
相关官网文档说明:
webview接口.png
2.小程序加入webview组件，调用接口跳转到相关webview
//事件处理函数
toWebview:function(){
wx.navigateTo({
url: '/pages/webview/webview',
})
},
3.webview处理完相关业务逻辑，需要跳回小程序，携带后台返回的支付必要的参数
//小程序和公众号跳转不同页面
navigateToPay: function() {
if (this.isMiniProgram === true) {
// alert('小程序')
//由后台协商好返回的数据格式，该代码仅供参考，不能实际使用
const payParam = {
appId: "wxd678efh567hg6787",
nonceStr: "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
package: "prepay_id=wx2017033010242291fcfe0db70013231072",
signType: "MD5",
timeStamp: "1490840662",
paySign:"BB2B9BD3F2F8A1CB270C6ACE3D7BDB9"
};
// alert(payParam);
this.navigateToMiniProgram(JSON.stringify(payParam));
} else {
alert('公众号');
//原先支付逻辑不用修改;
}
}
4.调用小程序的wx.requestPayment唤起支付，如果不需要显示页面可以写个空白页面
5.支付完成，处理相关逻辑。
具体demo点这里
