Amber
侠客
侠客
  • 最后登录2021-01-07
  • 发帖数6
阅读:396回复:1

[vue]vue项目中,通过HbuilderX打包的APP如何调起手机原生支付功能(支付宝)

楼主#
更多 发布于:2020-12-19 21:13
项目是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("获取支付通道失败");
 }
 )

4、plus在浏览器里会报‘plus is not defined’的错误,那是因为plus函数是h5页面与APP通信的桥,
只能在移动终端运行。所以,需要通过HuilderX将vue项目打包成APP。打包的时候,配置mainifest.json文件时,注意要在模块配置中勾选payment,然后云打包成安卓apk就可以了。
HbuilderX中的配置


至此,真机运行已经能够成功调起支付宝并实现支付功能。
doubleyong
管理员
管理员
  • 最后登录2021-02-28
  • 发帖数972
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
沙发#
发布于:2020-12-21 16:39
好文啊
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号