背景:
使用企业微信开发扫一扫功能
可信域名验证
(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需要在企业微信上进行可信域名登记。
// 扫一扫
async scan() {
let url = window.location.href.split('#')[0];
const respose = await getSignature(
)
const {
data
} = respose
this.wxConfig(data.appId,
data.timestamp,
data.nonceStr,
data.signature)
},
//wx.config的配置
wxConfig(appId, timestamp, nonceStr, signature) {
jweixin.config({
debug: false, // 开启调试模式,
appId: appId, // 必填,企业号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表
});
jweixin.ready(() => {
console.log('配置完成,扫码前准备完成')
jweixin.scanQRCode({
desc: 'scanQRCode desc',
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res) {
var result = res.resultStr; // 当 needResult 为 1 时,扫码返回的结果
// var resultArr = result.split(','); // 扫描结果以逗号分割数组(一维码)
// var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素,也就是最终的内容
// _this.form.imei = codeContent
// alert('扫码成功!')
},
});
})
jweixin.error(function(res) {
// console.log('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
});
},
(4)新增qywx.js编写api接口
// 企业微信签名
export function getSignature(data) {
return http.request({
url: "/work-wechat/qywx/signature",
data: data,
method: "get",
})
}
使用时引入
import {getSignature} from "@/api/employeeCare/index.js"
4. 后端代码通过weixin-java-cp开发工具获取签名
后端使用的是https://github.com/binarywang/的weixin-java-cp开发工具
(1)引入企业微信开发工具
<dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-cp</artifactId>
<version>3.8.0</version>
</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代码 jweixin.scanQRCode
//wx.config的配置
wxConfig(appId, timestamp, nonceStr, signature) {
jweixin.config({
debug: false, // 开启调试模式,
appId: appId, // 必填,企业号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表
});
jweixin.ready(() => {
console.log('配置完成,扫码前准备完成')
jweixin.scanQRCode({
desc: 'scanQRCode desc',
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res) {
var result = res.resultStr; // 当 needResult 为 1 时,扫码返回的结果
// var resultArr = result.split(','); // 扫描结果以逗号分割数组(一维码)
// var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素,也就是最终的内容
// _this.form.imei = codeContent
// alert('扫码成功!')
},
});
})
jweixin.error(function(res) {
// console.log('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
});
},
6. 扫一扫最终效果如下
以下效果图是代码部署到服务器上,配置成功手机端效果:
显示正常后,关闭调试模式
debug: false, // 开启调试模式,
7. 参考文章
https://blog.csdn.net/weixin_40816738/article/details/123170569
https://developer.work.weixin.qq.com/document/path/90547文章来源:https://www.toymoban.com/news/detail-824075.html
https://blog.csdn.net/weixin_45243487/article/details/125101558文章来源地址https://www.toymoban.com/news/detail-824075.html
到了这里,关于uniapp移动端——企业微信H5调用jssdk实现扫一扫,通过weixin-java-cp获取ticket签名,配置config的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!