NFC识别IC卡 打开uniapp应用及页面(Android)记录

yilra
2,089 阅读2分钟

接上回,NFC打开uniapp应用的实现,并且携带参数,话不多说,两种方案:深链接,包名

一. 使用深链接:链接可直接打开app

1. uniapp需要设置UrlSchemes,直接看官网uniapp.dcloud.net.cn/tutorial/ap…

2. 打包后可以直接使用,如test://adc,一般在h5跳转app也是直接将链接放置a标签跳转,那怎么通过nfc跳转?继续看

  • 手机下载nfc标签助手,写入你自己的包url,写入IC卡内,然后去手机识别(注意的是,识别的手机需要安装好打完的包,如果你的app未上架,那么会先跳入到一个url页面,如4图;若app已上架在白名单内,可直接调起并进入app)

    1 image.png 2image.png 3image.png 4image.png

3. 调起app如何携带参数,app如何解析参数? test://后面的内容就是参数,app内解析参数官网介绍如下: image.png

onShow: function() {
	var args= plus.runtime.arguments;
	if(args){
		// 处理args参数，如直达到某新页面等
	}

例子：网易云深链接

歌手页：orpheus://artist/

指定歌单：orpheus://playlist/

个人电台：orpheus://radio/

nfc唤起app后,可在App.vue的onShow中去处理参数,解析并跳转页面等其他操作;

注意的是,app中按照官网设置UrlSchemes后打包的url,可能是无效的,如果是云打包的方式可以先使用自定义调试基座打包一次,后面再正式打包就可以,若是自有证书或者离线打包的情况,可以去社区直接搜 schemes 关键字 基本会找到解决办法

Android平台设置UrlSchemes，实现被第三方应用调用 - DCloud问答

iOS平台设置UrlSchemes，实现被第三方应用调用 - DCloud问答

二.使用包名

1.直接使用nfc标签助手把包名+参数写入IC,如下三个步骤:

先设置文本(也就是参数)添加到复合记录

image.png

后设置包名(自己app的)添加到复合记录,手机系统的nfc会通过包名打开app

image.png

最后写入IC卡

image.png image.png

2.上一篇# 关于uniapp NFC的读写记录的代码就派上用场了,app被打开后,app内的nfc监听只会读取到参数

nfc.listenNFCStatus();//初始化
uni.$on('nfcCode', (data) => {  //这里看上篇文章即可
//data是读取到的数据,解析参数跳转页面或其他操作
})

深链接调起app和使用包名调起app并进入某一页面的对比:

  1. NFC通过深链接调起app后,app可以直接解析url及参数,如果参数是页面地址,意味着IC卡贴一次就可直接进入app的某个页面
  2. NFC通过包名调起app,首先需要手机系统nfc先打开app,然后再通过app内的nfc,解析参数,跳去对应页面,就是说实际使用的时候IC卡需要贴两次才能进入(体验感不好),除非先打开app再贴卡,直接跳转页面

项目最后使用的方案是写入包名的方式调起,原因是因为我们的app并没有上架,暂时先用这种方式(虽然app未打开时需要贴两次),深链接方式等app上架了再安排

最后验收的时候也出现了一个问题,测试有两种场景,先打开app后开启nfc和先开启nfc后打开app,由于我初始化nfc代码是写在APP.vue的onLaunch方法,所以前一种场景就出现了问题,打开app再开启nfc后就监听不到nfc标签(IC卡)了,因为判断nfc是否开启的逻辑在初始化的函数里,onLaunch全局只触发一次,所有考虑了两种解决方式,1.轮询去判断系统nfc是否是开启的 2.监听系统NFC广播事件,emmm...遗憾的是第二个方法还没找到,所以采用了第一种轮询去判断,虽然很low,也算是解决了这个问题

吐槽:设置UrlSchemes这块太坑了,刚开始按照官网配置打包根本不起作用,同事帮忙反编译了下打完的包,代码里面就没有设置的schemes,社区找了好久才找到先要使用自定义基座打包的解决方法...

关于nfc轮询：

nfcStatus()是我自己在hexiii-nfc.js(这篇文章有# 关于uniapp NFC的读写记录)中加了获取nfc开启状态的代码，获取的是noNFC这个属性

export default {
   //...原来的代码
   nfcStatus:function(){
	      return noNFC
   },
}

onLaunch: function() {
    nfc.listenNFCStatus();  
	const noNfc = nfc.nfcStatus(); //nfc开启状态
	if (noNfc) {
	     const self = this;
	     this.timer = setInterval(() => {
	     nfc.listenNFCStatus();
	     const isnoNfc = nfc.nfcStatus();
	       if (isnoNfc === false) {
	          self._nFCApp(); //这个方法监听了
	          clearInterval(self.timer);
	      }
	        }, 4000);
	 } else {
	           this._nFCApp();
	}
}
	
_nFCApp(){
 //监听读取到的数据
    uni.$on("nfcCode", (data) => {
        //做自己的业务逻辑操作
    }
}
avatar
文章
阅读
粉丝