微信小程序webview组件内网页实现微信原生支付

微信小程序webview官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

微信小程序支付文档

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5

网页中仅支持以下JSSDK接口：

接口模块	接口说明	具体接口
判断客户端是否支持js		checkJSApi
图像接口	拍照或上传	chooseImage
	预览图片	previewImage
	上传图片	uploadImage
	下载图片	downloadImage
	获取本地图片	getLocalImgData
音频接口	开始录音	startRecord
	停止录音	stopRecord
	监听录音自动停止	onVoiceRecordEnd
	播放语音	playVoice
	暂停播放	pauseVoice
	停止播放	stopVoice
	监听语音播放完毕	onVoicePlayEnd
	上传接口	uploadVoice
	下载接口	downloadVoice
智能接口	识别音频	translateVoice
设备信息	获取网络状态	getNetworkType
地理位置	使用内置地图	getLocation
	获取地理位置	openLocation
摇一摇周边	开启ibeacon	startSearchBeacons
	关闭ibeacon	stopSearchBeacons
	监听ibeacon	onSearchBeacons
微信扫一扫	调起微信扫一扫	scanQRCode
微信卡券	拉取使用卡券列表	chooseCard
	批量添加卡券接口	addCard
	查看微信卡包的卡券	openCard
长按识别	小程序圆形码	无

 

发现并没有微信支付的api。

但是我们可以跳出到小程序去支付。

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境,然后使用wx.miniProgram调到小程序去。在小程序支付完成后再回到web-view。

至于小程序中的web-view与h5网页之间的交互，想更详细了解的话，可以参考这篇小程序中的web-view与h5网页之间的交互