微信小程序微信小程序webview组件交互组件交互,内联内联h5页面并网页实现微信支付实现解析页面并网页实现微信支付实现解析
前言前言
小程序支持webview以后，我们开发的好多h5页面，就可以直接在小程序里使用了，比如我们开发的微信商城，文章详情页，商品详情页，就可以开发一套，多处使用了。我们今天来讲一讲。在小程
序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。
老规矩先看效果。
因为这里涉及的东西比较多，录gif太多，没法上传，我就录制了一段视频出来。
https://v.qq.com/x/page/t0913iprnay.html
原理原理
先说下实现原理吧，实现原理就是我们在webview的h5页面里实现下单功能，然后点击支付按钮，我们点击支付按钮的时候会跳转到小程序页面，把订单号，订单总金额，传递到小程序里，然后小程
序里使用订单号和订单金额去调起微信支付，实现付款，付款成功或者失败时都会有回调。我们再把对应的回调传递给webview，刷新webview里的订单和支付状态。
一，定义一，定义webview显示显示h5页面页面
关于webview的使用，我就不做讲解了，官方文档里写的很清楚，用起来也很简单。
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
webview很简单，就是用一个webview组件，显示我们的网页。
二，定义二，定义h5页面页面
我这里启动一个本地服务器，用来展示一个简单的h5页面。
上图是我在浏览器里显示的效果。
接下来我们在小程序的webview里显示这个页面，也很简单，只需要把我们的src定义为我们的本地网页链接就可以了。
评论0