微信小程序使用web-view内嵌H5网页,并调用微信小程序支付

前言：

想把app内的精听课本模块的网页内嵌到新开发的微信小程序里面，之前已经放在了公众号里，现在也要支持在小程序里购买，阅读。
既然支持购买，小程序就得有注册登录的功能、支付的功能。支付不能用微信自带的支付，因为不支持，（就算在开发者工具里支持，体验版和正式版也不支持），所以需要调用小程序的支付功能

实现：

小程序中内嵌H5网页是这样的：

要在小程序中实现支付，先在在H5网页的项目中设置支付跳转：（以下是微信公众号支付和跳转微信小程序支付相结合的完整代码，@ViewBag.wx_signature这种字段是后台提供的值，是c#语法）

@{
    Layout = null;
}





    
    
    
    
    
    
    


    
    

        

            
使用微信付款
        
        

            

                打开微信支付
                返回上一页
            
        
    

这是以上代码对应的付款前的过渡H5页面

在小程序项目中新建一个支付页：pay.vue

tip:

webview网页在小程序里的调试是，将鼠标放在h5网页上，右击，会出现“调试”选项。
webview网页的域名以及网页内部的其他域名要在微信公众平台=》开发设置=》业务域名中添加，且域名是https://的。否则网页打不开，像酱紫：

bug:

如果支付失败，注意检查openid和package的值是否正确，大部分问题就出在这两个参数值上面。

参考地址：微信小程序开发之webview组件内网页实现微信原生支付