评论

【实现】NFC 标签打开小程序

NFC 标签写入小程序 URL Scheme,实现 NFC 标签打开小程序。

【小程序官方】

NFC 标签必须是 NFC Data Exchange Format (NDEF) 类型;

标签中需要包含两条 Record :

URI RecordType (记录1)

  • Name Format (TNF): 0x01 (Well-Known)
  • Type: U
  • Payload: 小程序 URL Scheme

Android Application Record, AAR(记录2)

  • Type Name Format (TNF): 0x04 (NFC Forum external type)
  • Type: android.com:pkg
  • Payload: 微信安卓包名 com.tencent.mm


1、查看标签是否为 NDEF 类型


2、写入两条 Record

const records = [
  {
    id: str2ab('mini-ios'),
    tnf: 1,
    type: str2ab('U'),
    payload: str2ab('小程序 URL Scheme', [0])
  },
  {
    id: str2ab('mini-android'),
    tnf: 4,
    type: str2ab('android.com:pkg'),
    payload: str2ab('com.tencent.mm')
  }
]       


/**
 * String to ArrayBuffer
 * @param {String} text 字符串
 * @param {String} extraBytes 额外的字节数组
 */
export function str2ab (text, extraBytes) {
  const uriStr = encodeURIComponent(text)
  const bytes = []
  for (let i = 0; i < uriStr.length; i++) {
    const code = uriStr.charAt(i)
    if (code === '%') {
      const hex = uriStr.slice(i + 1, i + 3)
      const hexVal = parseInt(hex, 16)
      bytes.push(hexVal)
      i += 2
    } else {
      bytes.push(code.charCodeAt(0))
    }
  }
  if (extraBytes) {
    bytes.unshift(...extraBytes)
  }
  return new Uint8Array(bytes).buffer
}


3、总结

1)区分【获取 NFC 的小程序 scheme】【获取 scheme 码】的 API,不能用错接口

2)注意两条 Record 写入次序:先写入 URI RecordType (记录1),再写入 Android Application Record, AAR(记录2);

未按照顺序写入时,安卓只打开微信,没有拉起小程序(原因:https://developer.android.google.cn/guide/topics/connectivity/nfc/nfc?hl=zh_cn

3)小程序 URL Scheme 转换 ArrayBuffer 时,在字节数组首位需额外加上 0x00;(因为 URI 记录数据的第一个字节为协议字段,小程序 URL Scheme 没有对应协议,故用 0x00,其实微信官方在写小程序 writeNdefMessage API 时,可以把这个逻辑封装起来,减少开发者学习成本

最后一次编辑于  2023-08-09  
点赞 5
收藏
评论

12 个评论

  • Blink
    Blink
    02-02

    大佬,用上面小程序填入URL Scheme后,苹果可以拉起小程序,安卓只能拉起微信打开support.weixin.qq.com这个网页,求问解决方法

    02-02
    赞同 1
    回复 1
    • 🔜
      🔜
      09-27
      同样  你找到解决方法了么?
      09-27
      回复
  • 江成
    江成
    2023-09-27

    IOS能正常打开小程序,安卓却一直跳进微信的公交卡服务,有没有知道原因的

    2023-09-27
    赞同 1
    回复 7
    • Remi
      Remi
      2023-12-22
      你好,请问你之后解决这个问题了吗?
      2023-12-22
      回复
    • 江成
      江成
      2023-12-28回复Remi
      解决了
      2023-12-28
      回复
    • Blink
      Blink
      02-02
      你好,安卓跳到support.weixin.qq.com网址,不会拉起小程序怎么解决
      02-02
      回复
    • 成都慧购电子商务有限公司
      成都慧购电子商务有限公司
      02-14回复江成
      方便介绍一下如何申请硬件设备,填一些信息不给通过
      02-14
      回复
    • [社会社会]
      [社会社会]
      03-07回复江成
      能参看以下是怎么解决的吗?
      03-07
      回复
    查看更多(2)
  • zzzz
    zzzz
    11-27

    直接通过拼接获取的URL scheme是可以写入NFC标签的吗

    11-27
    赞同
    回复 1
    • 夏落
      夏落
      11-28
      明文 URL Scheme 官方暂未说支持 NFC 标签
      从自己以前测试结果看:
      1)iOS 设备可以打开
      2)android 设备暂不支持打开
      你可以分别找 iOS 设备和 android 设备试试现在的情况
      11-28
      回复
  • Barack L.Shaw
    Barack L.Shaw
    11-07

    需要代写NFC内容或者需要NFC标签可以加我V:1256711178

    11-07
    赞同
    回复
  • 🔜
    🔜
    09-27

    我三种写入 IOS都能通过nfc进入小程序,但是安卓均不能进入 出现三种失败情况,

    一种是安卓能打开微信,无后续动作;

    另一种是打开微信后,跳转显示“对不起,当前页面无法访问

    还有一种是打开微信后,调整到公交卡了

    都是用的明文拼接Scheme。请问下大佬怎么弄成功的?
    
    09-27
    赞同
    回复
  • Archangelᴱᴿᴵᑦ
    Archangelᴱᴿᴵᑦ
    04-26

    看见了

    ndef.writeNdefMessage

    那么怎么“读”呢?没见有 ndef.readNdefMessage 啊.

    04-26
    赞同
    回复 1
  • 鱼遇海
    鱼遇海
    04-19

    这个records用在哪里呢?有无大佬解释一下咯?十分感谢

    04-19
    赞同
    回复 1
  • 鱼遇海
    鱼遇海
    04-14

    没有理解,怎么把获取到的scheme 地址 写入到nfc呢?

    04-14
    赞同
    回复 4
    • 雷欧
      雷欧
      10-28
      同问 请问兄弟解决了吗 可以分享一下不
      10-28
      回复
    • 鱼遇海
      鱼遇海
      10-28回复雷欧
      小程序内只能支持安卓写入,调用官方文档的NFC接口创建实例,监听NFC,监听到后按照上面的格式写入到NFC,大概如下图
      10-28
      1
      回复
    • 雷欧
      雷欧
      10-29回复鱼遇海
      这个initNfc在哪里调用啊?app.vue里面可以吗?
      10-29
      回复
    • 鱼遇海
      鱼遇海
      10-29回复雷欧
      啥时候需要啥时候调,比如需要弹出一个框提示贴近NFC的情况,弹框后调用
      10-29
      回复
  • 阙松柏-软件开发
    阙松柏-软件开发
    03-16

    我需要给我的客户做NFC拉起小程序,必须要我的客户去变更营业执照,让经营范围里面有智能硬件这个类目吗?

    03-16
    赞同
    回复
  • 收你做我的迷
    收你做我的迷
    03-11

    请问 model_id 这个要怎么申请

    03-11
    赞同
    回复 2
    • 夏落
      夏落
      03-11
      1、小程序服务类目需添加【工具——设备管理】 类目
      2、小程序管理后台 -> 功能 -> 硬件设备 -> 设备管理 -> 添加设备
      03-11
      1
      回复
    • 收你做我的迷
      收你做我的迷
      03-12回复夏落
      申请了 审核不通过 大佬你是怎么通过的 咋填
      03-12
      回复

正在加载...

登录 后发表内容