今天做的一个功能是企业微信扫一扫功能。

大概功能就是扫描二维码,即完成这项功能

第一步:安装包

npm install weixin-js-sdk --save

第二步:在main.js文件中引入

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

第三步:在body中写一个点击事件的元素

	<view>
			<button type="default" @click="getCick">巡检扫码</button>
		</view>

第四步:在script中写入

onload函数里

在onload函数里

// 最好是在onLoad中调用

onLoad: function () {

// 初始化时就要运行的函数,提前配置好扫一扫功能
this.getCofig();
},

getCofig()函数

  // 配置信息
      getCofig() {
         
            const that = this;
// 获取当前地址
            let url = window.location.href.split('#')[0];
            let params={'url':url}
// 调用后端接口,得到Appid,签名这一系列参数
         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配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
            });
          },

body里面的点击事件调用的函数,点击触发扫一扫功能

getClick(){
this.onH5Scan()
},   
 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
                              }) 
                          },
                      });
                },

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐