vue项目实现支付宝扫一扫功能

1. scan

调用扫码组件。

1. 获取码值，用码值路由，获取码值并用码值路由是三种不同的actionType。
2. 码值路由，新业务需要找码平台配置业路由规则。@码平台daily(什么样的码，返回什么样的结果。)

2. API

AlipayJSBridge.call('scan', {
  type, actionType, qrcode
}, fn);

2. 入参

名称	类型	描述	必选	默认值	版本
type	string	扫描目标类型，qr / bar	Y
actionType	string	操作类型 “scan”只扫码值 “route”只路由码值 “scanAndRpc”扫描返回原码及跳转后的路径 “scanAndRoute”扫描并路由，类同首页效果	N	'scan'	9.9.1 route类型只有ios支持 10.1.32新增scanAndRpc
qrcode	string	指定用于”route”操作类型的码值	N		9.9.1
fn function 扫码获取码信息后的回调函数			N
charset	string	指定目标码Charset	10.1.32新增

3. 出参
   回调函数带入的参数result: {error, barCode, qrCode, cardNumber}

名称	类型	描述
barCode	string	扫描所得条码数据
qrCode	string	扫描所得二维码数据
error	int	错误码（10： 用户取消， 11： 操作失败）
// 以下 10.1.28 版本及以后新增（建议使用）
imageChannel	string	相机还是相册扫出的码 camera/album
codeType	string	扫描所得码类型 （qr/bar/dm/pdf417）
codeContent	string	扫描所得码数据内容
// 以下 10.1.32 版本及以后新增
path	string	码平台路由后的地址

4 在vue中的使用方法

// 如果在vue中调用支付宝扫一扫功能 需要在 AlipayJSBridge 前面加 window 不然会报未定义的错误
window.AlipayJSBridge.call('scan', {
  type: 'bar',  // 扫描类型  qr 二维码  / bar 条形码
  actionType: 'scanAndRoute' // 如果只是扫码,拿到码中的内容，这项不用设置都可以
}, function(result) {
  alert(JSON.stringify(result))
})

5 在常规的H5页面中使用

5.1 只获取二维码的信息

<h1>点击扫码后输出码对应的信息</h1>

<a href="#" class="btn read">开始扫码</a>

<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

ready(function() {
  document.querySelector('.read').addEventListener('click', function() {
    AlipayJSBridge.call('scan', {
      type: 'qr'
    }, function(result) {
      alert(JSON.stringify(result));
    });
  });
});
</script>

5.2 扫描二维码并发起路由

<h1>扫码后不输出信息，直接让支付宝解码</h1>

<a href="#" class="btn read">开始扫码</a>

<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

ready(function() {
  document.querySelector('.read').addEventListener('click', function() {
    AlipayJSBridge.call('scan', {
      type: 'qr',
      actionType: 'scanAndRoute'
    }, function(result) {
      alert(JSON.stringify(result));
    });
  });
});
</script>

支付宝H5开发文档

记录于 2019-3-27 19:52