web app 中如何调用支付宝app 进行支付

用户9914333

发布于 2022-07-22 06:00:19

1.3K00

代码可运行

文章被收录于专栏：bug收集bug收集

运行总次数：0

代码可运行

项目是vue+vant框架写的前端页面，利用HbuilderX将项目打包成APP的。在应用里调用支付宝APP进行支付的时候，需要用到html5plus函数里面的payment属性。首先看看HTML5+是什么？

HTML5+是中国HTML5产业联盟的扩展规范，基于HTML5扩展了大量调用设备的能力，是的web语言可以像原生语言一样强大！

如何使用原生APP中调起支付宝APP的功能呢？

具体操作步骤：

1、在需要调用该属性的组件里，先定义plusReady方法：

    plusReady () {
        // debugger
        var ws = window.plus.webview.currentWebview(); 
        //pw回车可输出plus.webview
        console.log("hello plus");
      },

2、然后在created生命周期里调用该方法：

created () {
      // 扩展API是否准备好，如果没有则监听“plusready"事件
      if (window.plus) {
        this.plusReady()
      } else {
        document.addEventListener('plusready', this.plusReady, false)
      }
    },

3、在确认支付的点击事件里，通过HTML5plus的payment属性getChannels方法获取支付通道，在获取支付通道成功的回调函数里，通过request方法请求支付

 var channel=null;
 var that = this;
 plus.payment.getChannels(
 function (channels) {
   channel=channels[0];
   //发起支付请求
   plus.payment.request(channel,res.data.message,function (res) {
 that.$toast("支付成功");
   },function (error) {
 that.$toast("支付失败");
   })
 },function (e) {
   that.$toast("获取支付通道失败");
 }
 )