Enterprise WeChat がスキャンインターフェイスを呼び出す

1. WeChat Work のワークベンチで新しいアプリケーションを作成します。アプリ管理を開きます。

[変更] をクリックして、アプリを開く Web ページを設定します (Web ページが属するプロジェクトをサーバーにデプロイする必要があり、URL アドレスはテストサーバーまたは公式サーバーのアドレスである必要があります)。

2. 図に示すように、赤枠内の位置をクリックして、Web ページの認可と JS-SDK を有効にします (アイコンはすでに有効になっています)。

3. 信頼できるドメイン名は、現在のアプリケーションのジャンプページの URL アドレスから解決されたドメイン名です (バックエンドのクラスメートに解析してもらいます)。公式ドキュメントで説明されているように、図 3-2 に示すように、ドメイン名を管理者に送信して、ドメイン名所有権の申請と検証を申請します (企業の企業 WeChat でリーダーを見つけます。リーダーには管理者権限があります)。次に、「適用」をクリックしてドメイン名を確認します。

図 3-1

図 3-2

プロンプトに従い、最初にキーファイルをダウンロードし、ファイルをコードエントリファイルと同じレベルに配置します (バックエンドの学生がサーバーに展開するコードは、フロントエンドのエントリファイルとは異なる場合があります。ファイルをバックエンドのクラスメートに送信して、エントリファイルと同じレベルに配置するように依頼できます)。ファイルをしまった後、アクセス可能かどうかをテストし、ドメイン名アドレス + ファイル名 (図 3-4) にアクセスし、最後の項目にアクセス可能かどうかを確認して、[OK] をクリックします。

図 3-3

図 3-4

確認された場合、アクティベーションは成功です。

4. JS-SDK の公式ドキュメントに従います (Enterprise WeChat の下位バージョンの場合は、js ファイルのバージョン番号を 1.0.0 に変更します)。

公式ドキュメント:使用説明書 - インターフェイスのドキュメント - エンタープライズ WeChat 開発者センター (qq.com) https://developer.work.weixin.qq.com/document/path/90514

4.1 JS ファイルをインポートする:

JS インターフェイス (https をサポート) を呼び出す必要があるページに次の JS ファイルを導入します: http://res.wx.qq.com/open/js/jweixin-1.2.0.js

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

4.2 構成インターフェイスを介した権限検証構成の挿入

wx.config({
    beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，企业微信的corpID
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见 附录-JS-SDK使用权限签名算法
    jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});

これらの必須パラメーターはバックエンドインターフェイスから取得する必要があり、appId は管理者から取得されます (一意です)。

署名を生成するためのアルゴリズム: (バックエンドで処理することも、バックエンドに jsapi_ticket、timestamp、および nonceStr を返してアルゴリズムに従って署名を生成させることもできます) バックエンドで処理し、署名を直接生成し、これらのパラメーターをフロントエンドに返すことをお勧めします。

JS-SDK は許可署名アルゴリズムを使用します - インターフェイスドキュメント - Enterprise WeChat Developer Center (qq.com) https://developer.work.weixin.qq.com/document/path/90506 4.3 準備ができたインターフェイスを介した成功した検証のプロセス

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

4.4 エラーインターフェイスを介して失敗した検証を処理する

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

4.5 通話が成功するとポップアップウィンドウも表示されます

公式ドキュメントの最後にヒントがあります。

上記の関数にはすべてパラメーターがあり、型はオブジェクトです。各インターフェイス自体によって返されるデータに加えて、一般的な属性 err_msg もあり、その値の形式は次のとおりです。

呼び出しが成功した場合: 「xxx:ok」、xxx は呼び出されたインターフェイスの名前です。
ユーザーがキャンセルする場合: 「xxx:cancel」、xxx は呼び出されたインターフェイスの名前です。
呼び出しが失敗した場合: その値は特定のエラーメッセージです

つまり、通話の成功と失敗の両方で err_msg 属性が返され、携帯電話上でポップアップウィンドウとして表示されるため、通話が成功したことを確認した後、config のデバッグを false に設定できます。

5. エンタープライズ WeChat のスキャンインターフェイスを呼び出し、公式ドキュメントに従って操作します。

WeChat Work のスキャン - インターフェイスドキュメント - WeChat 開発者センター (qq.com) https://developer.work.weixin.qq.com/document/path/90492インターフェイスコードを直接使用するだけです。

wx.scanQRCode({
    desc: 'scanQRCode desc',
    needResult: 0, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
    success: function(res) {
        // 回调
		var result = res.resultStr;//当needResult为1时返回处理结果
    },
    error: function(res) {
        if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
        }
    }
});

needResult が 0 の場合、スキャン結果は WeChat Enterprise によって処理されるため、success 関数に操作ステップを記述する必要はありません。自分で処理する必要がある場合は、needResult を 1 に設定し、success での特定の操作ステップを記述します (通常はインターフェイスを呼び出し、バックエンドインターフェイスでロジック処理を実行します)。

6. コード全体: (エラーを報告するために wx を直接使用しますが、オンライン検索インポートパッケージでもエラーが報告されるため、window.wx を使用します)

6.1 <template> テンプレートの内容:

ボタンを配置し、ボタンをクリックして scanCode メソッドをトリガーし、メソッド内の操作を呼び出します。

<template>
    <el-button type="danger" @click="scanCode">el-button</el-button>
  </div>
</template>

6.2 js 部分: (コメントに注意してください)

async function scanCode(){
      try{
          //动态获取当前页面的url地址
          const url= window.location.href.split('#')[0]
          //将url作为参数传入接口，将接口数据解构出来用data对象接受
          const {data} = await getParams(url)
          //可以将接口中数据打印出来看
          console.log("data",data)
          window.wx.config({
            beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 在测试没问题之后，关闭debug模式，防止弹窗
            appId: data.data.appId, // 必填，企业微信的corpID
            timestamp: data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
            signature: data.data.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
            jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
          })
        }catch(error){
          console.log(error)
        }
      window.wx.ready(function () {
        // 调用企业微信扫一扫接口
        window.wx.scanQRCode({
          desc: "scanQRCode desc",
          needResult: 0, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
            success: res => {
              // 回调
              // 当needResult 为 1 时，扫码返回的结果
              //我的vscode开启了eslint校验，定义变量而不使用会报错，在报错代码行后面跟上如下注释即可解决报错
              var result = res.resultStr// eslint-disable-line no-unused-vars
            },
            fail: function (err) {
                console.log(err)
            }
          })
        })
        window.wx.error(function(res){
          //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          var result = res.resultStr// eslint-disable-line no-unused-vars
          console.log("ready失败！")
        })
    }

6.3 Index.js の内容 (インターフェースメソッドの定義):

// 导入post请求
import { get } from "@/utiles/request.js"

// 获取企业微信扫一扫参数的接口
export const getParams = (url) => {
    return get(`http://aaa.bbb.ccc.ddd/api/getxxx?url=${url}`)
}

Enterprise WeChat がスキャン インターフェイスを呼び出す

おすすめ

Enterprise WeChat がスキャンインターフェイスを呼び出す