uni-app - 实现手机扫描二维码并跳转全过程

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44198965/article/details/102771253

前言

最近使用 uni-app 开发 app ，需要实现一个调起手机摄像头扫描二维码功能，官网API文档给出了这样一个demo：

// 允许从相机和相册扫码
uni.scanCode({
    success: function (res) {
        console.log('条码类型：' + res.scanType);
        console.log('条码内容：' + res.result);
    }
});

该示例确实可以调起手机摄像头，但扫描后没有结果。但它打印了 条码类型 与 条码内容 ，我们控制台查看一下：

条码类型具体参考 官方API文档，写的非常清楚，我们主要谈一下条码内容。不难发现，条码内容的 URL 是由 res.result 产出，那么问题来了，这个 URL 可以访问吗？

带着好奇心，我来到了浏览器地址栏…发现正常访问，这时我就在想，只要扫码后跳转到这个 URL 不就可以完成了吗！

实现方法

最后，我使用了 HTML5+ 的 openURL API 完成外部链接的跳转，我们先来看一下 API 介绍：

HTML5+ 官网 API 文档：http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.openWeb

---

1. 语法及介绍

描述：调用第三方程序打开指定的URL

void plus.runtime.openURL( url, errorCB, identity )

---

2. 参数与返回值

1. url: ( String )： 必选，要打开的URL地址，字符串类型，各平台支持的地址类型存在差异，参考平台URL支持表。
2. errorCB: ( OpenErrorCallback ) ：可选，打开URL地址失败的回调，打开指定URL地址失败时回调，并返回失败信息。
3. identity: ( String ) ：可选，指定打开URL地址的程序名称，在iOS平台此参数被忽略，在Android平台为程序包名，如果指定的包名不存在，则打开URL地址失败。

返回值：void(无)

---

最后完善一下前面的示例，让其支持扫描二维码并跳转到相应地址：

uni.scanCode({
	success: function (res) {
		void plus.runtime.openWeb(res.result,function(){
			// 识别失败代码
		});
	 }
});

你可以参照 uni-app 与 HTML5+ 文档API来进一步完善，文档链接前面已经给出，本文结束。