若依移动端Ruoyi-App——企业微信H5调用jssdk实现扫一扫，通过weixin-java-cp获取ticket签名，配置config

背景：

使用企业微信开发扫一扫功能，工具：在若依移动端ruoyi-app开发。

可信域名验证

(1)企业微信的可信域名需要和企业微信的备案主体一致。

域名备案主体可通过站长工具查看域名备案主体。https://icp.chinaz.com/

企业微信备案主体可以咨询管理员

（2）通过nginx配置域名归属验证txt文件

具体操作详见https://blog.csdn.net/zhaolulu916/article/details/128613264?spm=1001.2014.3001.5502

（3）网页授权及JS-SDK配置成功效果如下

(4)可信域名配置正确，但无法通过验证，可在开发者中心提问。也可以配置重定向后带端口的地址

2. 白名单配置

代码最终部署到服务器上，将服务器的IP配置到白名单里，这样调试就不会提示IP不在白名单范围内，此界面在系统管理员界面有。

3 .前端代码获取企业微信签名，并配置JSSDK权限

（1）npm安装weixin-js-sdk

npm install weixin-js-sdk --save

（2）在main.js全局引入weixin-js-sdk

import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx

（3）配置获取企业微信签名和使用JSSDK权

此时获取的url可以是域名重定向后的带端口的，但是此url需要在企业微信上进行可信域名登记。

在onload函数里

// 最好是在onLoad中调用

onLoad: function () {

this.getCofig();

//在getCofig 函数里使用 this.$wx.进行调用，否则会报错。

  // 配置信息
      getCofig() {
         
            const that = this;
            let url = window.location.href.split('#')[0];
            let params={'url':url}
         getJsapiSignature(params).then(res => {
               const result = res;

             if (res) {
                        that.wxConfig(
                          result.appId,
                          result.timestamp,
                          result.nonceStr,
                          result.signature
                        );
                      } else {
                        alert('获取配置信息返回为空');
            }
        })
        },
       //wx.config的配置
      wxConfig(appId, timestamp, nonceStr, signature) {
            this.$wx.config({
              debug: true, // 开启调试模式,
              appId: appId, // 必填，企业号的唯一标识
              timestamp: timestamp, // 必填，生成签名的时间戳
              nonceStr: nonceStr, // 必填，生成签名的随机串
              signature: signature, // 必填，签名
              jsApiList: 
              [
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage',
                    'scanQRCode',
                    'checkJsApi'
               ], // 必填，需要使用的JS接口列表
            });
        
             
           this.$wx.ready(() => {
                this.$wx.checkJsApi({  //判断当前客户端版本是否支持指定JS接口
                            jsApiList: [
                                'chooseImage',
                                'previewImage',
                                'uploadImage',
                                'downloadImage',
                                'scanQRCode',
                            ],
                            success: function (res) {// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
                               
                                this.$modal.msgSuccess(res.checkResult)
                                if(res.checkResult.scanQRCode != true){
                                        this.$modal.msgSuccess('抱歉，当前客户端版本不支持扫一扫')
                                }
                                
                            },
                            fail: function (res) { //检测getNetworkType该功能失败时处理
                            this.$modal.msgSuccess(res)
                            
                            alert('checkJsApi error');
                            }
                        });
         
                console.log("wxConfig配置完成，扫码前准备完成");
                this.$modal.msgSuccess("wxConfig配置完成，扫码前准备完成")
            })
            this.$wx.error(function (res) {
                this.$modal.msgSuccess('wxConfig出错了：' + res.errMsg)
                 console.log('wxConfig出错了：' + res.errMsg);
              //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
            });
          },

（4)新增qywx.js编写api接口

export function getJsapiSignature(query) {

return request({

url: '/system/qywx/signature/',

method: 'get',

params: query

})

}

使用时引入

import { getJsapiSignature } from "@/api/notice/qywx.js"

4. 后端代码通过weixin-java-cp开发工具获取签名

后端使用的是https://github.com/binarywang/的weixin-java-cp开发工具

（1）引入企业微信开发工具

<groupId>com.github.binarywang</groupId>

<artifactId>weixin-java-cp</artifactId>

</dependency>

（2）新增QywxController

@RestController
public class QywxController {

    @Autowired
    private QywxService qywxService;


    @GetMapping(value = "/system/qywx/signature/")
    public WxJsapiSignature getJsapiSignature(@RequestParam("url") String url) {
        try {  // 直接调用wxMpServer 接口
            System.out.println("访问WxJsapiSignature=====/system/qywx/signature/"+url+"");
            WxJsapiSignature wxJsapiSignature = qywxService.getJsapiSignture(url);
            System.out.println("AppId==="+wxJsapiSignature.getAppId());
            System.out.println("Timestamp==="+wxJsapiSignature.getTimestamp());
            System.out.println("NonceStr==="+wxJsapiSignature.getNonceStr());
            System.out.println("Signature==="+wxJsapiSignature.getSignature());
            return wxJsapiSignature;
        } catch (WxErrorException e) {
            return null;
        }
    }

（3）新增QywxService，使用weixin-java-cp中的WxCpServiceImpl生成签名

@Service
public class QywxService {

  
    //获取对应应用的签名
    public WxJsapiSignature getJsapiSignture(String url) throws WxErrorException {
        // 替换成自己应用的appId和secret，agentId
        Integer agentId = 1111111;
        String corpId="XXXXXXXX";
        String corpSecret = "XXXXXXXX";

        WxCpDefaultConfigImpl config = new WxCpDefaultConfigImpl();
        config.setCorpId(corpId);      // 设置微信企业号的appid
        config.setCorpSecret(corpSecret);  // 设置微信企业号的app corpSecret
        config.setAgentId(agentId);     // 设置微信企业号应用ID


        WxCpServiceImpl wxCpService = new WxCpServiceImpl();
        wxCpService.setWxCpConfigStorage(config);
        System.out.println("WxJsapiSignature===url==="+url);

        WxJsapiSignature wxJsapiSignature = wxCpService.createJsapiSignature(url);
        //wxJsapiSignature中可以直接获取签名信息 且方法内部添加了缓存功能
        return wxJsapiSignature;
    }

}

（4）签名的结果验证

https://developer.work.weixin.qq.com/devtool/signature，其中jsapi_ticket是企业的ticket，不是应用的ticket

5. 扫一扫调用JSSDK代码

使用 this.$wx.进行调用，否则会报错。

    onH5Scan(){
               const that = this; 
                this.$modal.msgSuccess("onH5Scan进来了");
                console.log('onH5Scan进来了');    
                 this.$wx.scanQRCode({
                     needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                     scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                     success: function (res) {
                           var result = res.resultStr; // 当 needResult 为 1 时，扫码返回的结果
                           var resultArr = result.split(','); // 扫描结果以逗号分割数组
                           var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素，也就是最终的内容 
                           console.log('onH5Scan——success');
                            that.Info.qrcode=codeContent;
                           console.log("onH5Scan"+result+"==="+resultArr+"==="+codeContent);
                                  },
                     fail: function (response) {
                             if(res.errMsg.indexOf('function_not_exist') > 0){
                              console.log('onH5Scan版本过低请升级');
                            }
                            uni.showToast({
                                icon: "none",
                                  title: "onH5Scan——调用扫码失败"+response.errMsg
                              }) 
                          },
                      });
                },