欢迎光临
我的个人博客网站

uni-app开发经验分享十三:实现手机扫描二维码并跳转全过程

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

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

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

uni-app开发经验分享十三:实现手机扫描二维码并跳转全过程

条码类型具体参考 官方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(){ 			// 识别失败代码 		}); 	 } });

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » uni-app开发经验分享十三:实现手机扫描二维码并跳转全过程
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏