最近使用 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开发经验分享十三:实现手机扫描二维码并跳转全过程的更多相关文章

  1. 手机扫描二维码下载APP,根据操作系统不同自动下载

    Android和IOS手机扫描二维码下载APP,根据OS不同,自动处理相应下载操作.IOS自动跳转至AppStore应用下载页,Android自动下载应用的apk包. <script type= ...

  2. 实现手机扫描二维码页面登录,类似web微信-第二篇,关于二维码的自动生成

    转自:http://www.cnblogs.com/fengyun99/p/3541251.html 接上一章,我们已经基本把业务逻辑分析清楚了 下面我们第一步,实现二维码的web动态生成. 页面的二 ...

  3. 实现手机扫描二维码页面登录,类似web微信-第一篇,业务分析

    转自:http://www.cnblogs.com/fengyun99/p/3541249.html 关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描 ...

  4. 实现手机扫描二维码页面登录,类似web微信-第三篇,手机客户端

    转自:http://www.cnblogs.com/fengyun99/p/3541254.html 上一篇,介绍了二维码生成的机制,紧接着,我们就要开发手机客户端来识别这个二维码. 二维码,实际上是 ...

  5. 实现手机扫描二维码页面登录,类似web微信-第四篇,服务器端

    转自:http://blog.csdn.net/otangba/article/details/8273952 终于到了服务器端,第三篇的手机客户端如果已经下载了的话,没有服务器是不能正常运行的. 服 ...

  6. asp:手机扫描二维码跳转手机版

    如果想手机扫描用pc版网站生成的二维码跳转到对应的手机版的话,请在pc端的首页的<head></head>标签里面加入下面内容:   <script src=" ...

  7. 大众点评试水O2O新模式:实体店试穿,扫描二维码付款 现场取货

    在餐饮美食行业取得不错的成绩之后,大众点评将触角延伸到了线下的传统商铺,开始涉足线下商品的 O2O 团购.和传统的线上下单,线下消费的 O2O 模式不同.大众点评的 O2O 团购用户,可在店内试穿后通 ...

  8. 微信中扫描二维码自动打开手机系统默认浏览器下载APP(APK)

    很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面给大家介绍这个功能 功能目的 生成微信跳转链接,实现微信内置浏览 ...

  9. 扫描二维码自动识别手机系统(Android/IOS)

    移动互联网发展迅速,各种APP的开发都会推出多个版本(多终端),比如:iPhone版.iPad版.Android版.有些APP还会考虑覆盖到多个国家(国际化),比如:中文版.英文版.日文版.韩文版等. ...

随机推荐

  1. Spring Data JPA的基本学习之了解

    Spring Data JPA 是 什 么 可以理解为JPA规范的再次封装抽象,底层还是使用了Hibernate的JPA技术实现,引用JPQL(Java Persistence Query Langu ...

  2. SQL精华总结索引类型优化SQL优化事务大表优化思维导图❤️

    索引类型 从数据结构角度: B+树索引, hash索引,基于哈希表实现,只有全值匹配才有效.以链表的形式解决冲突.查找速度非常快 O(1) 全文索引,查找的是文本中的关键词,而不是直接比较索引中的值, ...

  3. Wordpress Polylang 翻译自定义格式

    WordPress 多语言插件 Polylang 主题函数参考 重要:使用一个函数之前,你必须检查函数是否存在,否则,你的网站可能会在 Polylang 更新之前遇到致命错误(因为 WordPress ...

  4. MySQL高级部分理论知识细讲

    文章目录 一.数据库分区.分表.分库.分片 YesOk ,大家好 ,我是小刘,许久不见,甚是想念 ,小刘今天来带大家学习 分库分表的基础知识 1.1 单机数据库的瓶颈 单个表数据量越大,读写锁,插入操 ...

  5. .NET Core 3.0或3.1 类库项目中引用 Microsoft.AspNetCore.App

    本文为原创文章.首发:http://www.zyiz.net/ 在 ASP.NET Core 3.0+ web 项目中已经不需要在 .csproj 中添加对 Microsoft.AspNetCore. ...

  6. 基于nginx负载均衡及frp的内网穿透实例3-多用户多网站共用80端口

    原文地址:点击跳转 最近frp用户量有点多,而且很多用户都是想把部署于本地或者内网的web服务暴露至公网,之前提到过,暴露到公网之后如果一般都需要用域名:端口的方法来访问,但是没有人会喜欢用这种方式访 ...

  7. [从源码学设计]蚂蚁金服SOFARegistry 之 LocalDataServerChangeEvent及数据同步

    [从源码学设计]蚂蚁金服SOFARegistry 之 LocalDataServerChangeEvent及数据同步 目录 [从源码学设计]蚂蚁金服SOFARegistry 之 LocalDataSe ...

  8. java保持同一时间同一账号只能在一处登录

    //登录页面 login.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&qu ...

  9. springboot项目配置数据库

    在pom.xml文件中配置 <!-- mybatis整合springboot起步依赖--> <dependency> <groupId>org.mybatis.sp ...

  10. 四元数和旋转(Quaternion & rotation)

    四元数和旋转(Quaternion & rotation) 本篇文章主要讲述3D空间中的旋转和四元数之间的关系.其中会涉及到矩阵.向量运算,旋转矩阵,四元数,旋转的四元数表示,四元数表示的旋转 ...