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

  • 时间:
  • 浏览:30

媒介

小法式撑持webview当前,我们开辟的很多多少h5页里,就能够间接正在小法式里利用了,好比我们开辟的微疑商乡,文章概况页,商品概况页,就能够开辟1套,多处利用了。我们明天来说1讲。正在小法式的webview里真现微疑付出功用。由于微疑没有许可正在小法式的webview里间接调起微疑付出。以是我们那节课便要触及到小法式战webview的交互了。

老例子先看结果。

由于那里触及的工具比力多,录gif太多,出法上传,我便录造了1段视频出去。

https://v.电话.com/x/page/t0913iprnay.html

本理

先道下真现本理吧,真现本理便是我们正在webview的h5页里里真现下单功用,然后面击付出按钮,我们面击付出按钮的时分会跳转到小法式页里,把定单号,定单总金额,通报到小法式里,然后小法式里利用定单号战定单金额来调起微疑付出,真现付款,付款胜利或失利时城市有回调。我们再把对应的回调通报给webview,革新webview里的定单战付出形态。

1,界说webview显现h5页里

闭于webview的利用,我便没有做讲授了,民圆文档里写的很清晰,用起去也很简朴。

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

webview很简朴,便是用1个webview组件,显现我们的网页。

2,界说h5页里

我那里启动1个当地办事器,用去展现1个简朴的h5页里。

上图是我正在阅读器里显现的结果。

接上去我们正在小法式的webview里显现那个页里,也很简朴,只需求把我们的src界说为我们的当地网页链接就能够了。

那里有1面需求留意

由于我们是当地链接,我们需求到开辟者东西里把那1项给勾选。

3,去看下h5页里代码

小法式内嵌webview


我是webview里的h5页里

h5代码那里没有做详细讲授,只简朴道下。我们便是正在面击付出按钮时,用以后工夫戳做为定单号(由于定单号要包管独一),然后传1个定单金额(单元分),那里节俭起睹,便传1分钱吧,花的是本身的钱,疼爱。。。。

枢纽面道1下

1, 必需引进jweixin,才能够真现h5跳转小法式。


2,跳转到小法式页里的办法

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

那里要战您小法式的页里连结1致。payDataStr是我们照顾的参数

4,小法式付出页

去看下我们的小法式付出页

小法式付出页功用很简朴,便是去领受我们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)
   }
  })
 }
})

代码里正文很清晰,那里有1面,便是我们付出胜利后,需求告知h5我们付出胜利了,告诉h5来革新定单或付出形态。

到那里我们便完全的真现了小法式webview展现h5页里,而且做到了h5战小法式的交互,真现了小法式webview的付出功用。
是否是很简朴呢。

源码地点

https://github.com/qiushi123/xiaochengxu_demos

以上便是本文的全数内容,期望对各人的进修有所帮忙,也期望各人多多撑持剧本之家。