侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

微信(小程序)  /  管理员 发布于 3年前   269

前言

小程序支持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定义为我们的本地网页链接就可以了。

这里有一点需要注意

因为我们是本地链接,我们需要到开发者工具里把这一项给勾选。

三,来看下h5页面代码

    小程序内嵌webview  

我是webview里的h5页面

点击支付

h5代码这里不做具体讲解,只简单说下。我们就是在点击支付按钮时,用当前时间戳做为订单号(因为订单号要保证唯一),然后传一个订单金额(单位分),这里节约起见,就传1分钱吧,花的是自己的钱,心疼。。。。

关键点说一下

1, 必须引入jweixin,才可以实现h5跳转小程序。


2,跳转到小程序页面的方法

const url = `../wePay/wePay?payDataStr=${payDataStr}`;wx.miniProgram.navigateTo({   url: url });

这里要和你小程序的页面保持一致。payDataStr是我们携带的参数

四,小程序支付页

来看下我们的小程序支付页

小程序支付页功能很简单,就是来接收我们h5传过订单号和订单金额。然后去调起微信支付,实现支付。支付成功和支付失败都有对应的回调。

支付我们这里实用的小程序云开发来实现的支付,核心代码只有10行。由于支付不是本节的重点,所以这里不做具体讲解。感

兴趣的同学可以去看我写的文章和我录的视频

小程序支付文章:https://www.jianshu.com/p/2b391df055a9

小程序支付视频:https://edu.csdn.net/course/play/25701/310742

下面把小程序接收参数和支付的完整代码贴出来给大家

Page({ //h5传过来的参数 onLoad: function(options) {  console.log("webview传过来的参数", options)  //字符串转对象  let payData = JSON.parse(options.payDataStr)  console.log("orderId", payData.orderId)  let that = this;  wx.cloud.callFunction({   name: "pay",   data: {    orderId: payData.orderId,    money: payData.money   },   success(res) {    console.log("获取成功", res)    that.goPay(res.result);   },   fail(err) {    console.log("获取失败", err)   }  }) }, //微信支付 goPay(payData) {  wx.requestPayment({   timeStamp: payData.timeStamp,   nonceStr: payData.nonceStr,   package: payData.package,   signType: 'MD5',   paySign: payData.paySign,   success(res) {    console.log("支付成功", res)    //你可以在这里支付成功以后,再跳会webview页,并把支付成功状态传回去    wx.navigateTo({     url: '../webview/webview?payOk=true',    })   },   fail(res) {    console.log("支付失败", res)   }  }) }})

代码里注释很清楚,这里有一点,就是我们支付成功后,需要告诉h5我们支付成功了,通知h5去刷新订单或者支付状态。

到这里我们就完整的实现了小程序webview展示h5页面,并且做到了h5和小程序的交互,实现了小程序webview的支付功能。
是不是很简单呢。

源码地址

https://github.com/qiushi123/xiaochengxu_demos

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • 小程序微信支付功能配置方法示例详解【基于thinkPHP】
  • 微信小程序调用微信支付接口的实现方法
  • 微信小程序与php 实现微信支付的简单实例
  • 微信小程序微信支付接入开发实例详解
  • PHP:微信小程序 微信支付服务端集成实例详解及源码下载
  • 微信小程序进行微信支付的步骤昂述
  • 微信小程序-详解微信登陆、微信支付、模板消息
  • 小程序调用微信支付的方法


  • 上一条:
    微信小程序 如何保持登录状态
    下一条:
    微信小程序云开发如何实现数据库自动备份实现
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 在go语言中用filepath.Match()函数以通配符模式匹配字符串示例(0个评论)
    • Laravel Response Classes 响应类使用优化浅析(0个评论)
    • mysql中sql_mode的各模式浅析(0个评论)
    • 百度文心一言今天发布,个人第一批内测体验记录,不好别打我(0个评论)
    • 嘿加密世界让我们谈谈在共识中将中本聪主流化(0个评论)
    • 在go语言中寻找两个切片或数组中的相同元素/共同点/交集并集示例代码(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客