如何使用angularx-qrcode库生成扫码后唤起手机短信应用的二维码

核心是使用移动端通用的SMS URI协议作为二维码内容，系统扫描识别到该协议串后会自动唤起默认短信应用，完成号码和内容的预填。

协议格式说明 #

标准SMS协议串结构如下：
sms:<收件人号码>?body=<URL编码后的短信内容>
配置时需要注意两个规则：

• 收件人号码直接填写纯数字即可，国际号码可加对应国家码前缀，不要添加括号、横杠等多余分隔符
• 短信正文必须做URL编码处理，否则中文、空格、特殊符号会出现识别异常，可直接使用Angular环境内置的原生encodeURIComponent()方法完成编码

代码示例 #

1. 固定内容直接写在模板中 #

如果收件号码和短信内容是固定值，可以直接在模板中拼接协议串：

<qrcode 
  [qrdata]="'sms:10086?body=' + encodeURIComponent('查询本月话费余额')" 
  [width]="256" 
  [errorCorrectionLevel]="'M'">
</qrcode>

上述示例生成的二维码，扫描后会唤起短信应用，收件人自动填为10086，短信内容自动填为「查询本月话费余额」。

2. 动态内容绑定（推荐写法） #

如果号码或短信内容需要动态修改，建议把逻辑写在组件TS类中，避免模板冗余：
首先在组件类中生成协议串：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sms-qrcode',
  templateUrl: './sms-qrcode.component.html'
})
export class SmsQrcodeComponent implements OnInit {
  smsQrContent: string = '';

  ngOnInit(): void {
    // 替换为实际业务需要的收件号码和短信内容
    const targetPhone = '10086';
    const presetText = '查询本月话费余额';
    this.smsQrContent = `sms:${targetPhone}?body=${encodeURIComponent(presetText)}`;
  }
}

然后在模板中直接绑定生成好的内容即可：

<qrcode 
  [qrdata]="smsQrContent" 
  [width]="256" 
  [errorCorrectionLevel]="'M'">
</qrcode>

兼容性说明：目前全量主流iOS、安卓版本均支持该协议，极少数老旧机型可能无法自动填充短信正文，但唤起短信应用、自动填入收件号码的逻辑不受影响。

内容的提问来源于stack exchange，提问作者Emma