Implementation of Scan in ionic4

Scanning is to call the WeChat interface, so after the code is written, it needs to be published to the external network to form a small program, and test on the phone to know whether it is successful.

achieve:

1. Install the weixin-js-sdk plugin

Install the plugin in the terminal: cnpm install weixin-js-sdk.

Then get the require method.

2. Quote

Just write the reference in the ts code

declare var $: any;
declare var require: NodeRequire;

3. Call the WeChat interface

public async presentLoadding() {
    this.bookInfo = [];
    const loader = await this.loadingCtrl.create({
      message: '扫一扫启动中...',
      duration: 2000
    });
    await loader.present();
    this.Scan();
  }

 Scan() {
    this.bookInfo = [];
    let qrResult: string;
    const urlCurrentPage = encodeURIComponent(encodeURIComponent(location.href.split('#')[0]));
    const url = 'https://dmsdbj.com/kernel-web/weChat/scan/' + urlCurrentPage;
    this.http.get(url).subscribe(
      res => {
          const wx = require('weixin-js-sdk');
          if (res != null) {

              const code = res.json();
              const appId = code.appId;
              const signature = code.signature;
              const timestamp = code.timestamp;
              const nonceStr = code.nonceStr;
              console.log('成功', res.json());

               // 调用微信接口基本设置
               wx.checkJsApi({
                jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            });
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              // 保证这个ID和后台的ID保持一致.
              appId: appId, // 必填，公众号的唯一标识
              timestamp: timestamp, // 必填，生成签名的时间戳
              nonceStr: nonceStr, // 必填，生成签名的随机串
              signature: signature, // 必填，签名
              jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
          });
          // tslint:disable-next-line:no-shadowed-variable
          wx.error(function (res) {
              // alert("请使用微信进行扫一扫")
              alert('出错了' + res.errMsg);
          });
          // tslint:disable-next-line:no-shadowed-variable
          wx.ready(function (res) {
              // 调用扫一扫接口
              wx.scanQRCode({
                  onlyFromCamera: true, // 仅仅相机
                  needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                  scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                  // tslint:disable-next-line:no-shadowed-variable
                  success: function (res) {
                      // 当扫描成功时做的一系列操作,参考博客中的内容,完善此处提示
                      qrResult = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                  }
              });
          });
      }
      });

      if (qrResult !== '' && qrResult !== undefined) {
             this.checkStart(qrResult);
      } else {
        console.log('saobcuhu' );
      }
  }

3. Implementation method

Use the obtained qrResult as a parameter to query the desired information.

Implementation of Scan in ionic4

Guess you like