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

前言:

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

实现:

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


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


@{
    Layout = null;
}





    
    
    
    
    
    微信支付
    


    
    

使用微信付款

这是以上代码对应的付款前的过渡H5页面
微信小程序使用web-view内嵌H5网页,并调用微信小程序支付_第1张图片

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







tip:

webview网页在小程序里的调试是,将鼠标放在h5网页上,右击,会出现“调试”选项。
webview网页的域名以及网页内部的其他域名要在微信公众平台=》开发设置=》业务域名中添加,且域名是https://的。否则网页打不开,像酱紫:
微信小程序使用web-view内嵌H5网页,并调用微信小程序支付_第2张图片

bug:

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

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

你可能感兴趣的:(vue,小程序)