时间:2021-05-26
本文实例讲述了vue 开发企业微信整合。分享给大家供大家参考,具体如下:
概述
手机端程序可以和企业微信进行整合,我们也可以使用企业微信JSSDK功能,实现一些原生的功能。
整合步骤
在整合之前需要阅读 整合步骤。
http://work.weixin.qq.com/api/doc#10029
1.引入JSSDK
npm i -S weixin-js-sdk 这样就引入了微信sdk。
2.通过config接口注入权限验证配置
export function initWxConfig(vm){ var url=_baseUrl + "/initConfig.do"; var curUrl=location.href.split("#")[0]; var params="url="+curUrl; vm.$ajax.post(url,params).then(res=>{ var data=res.data; wx.config({ beta: true, debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: data.appId, // 必填,公众号的唯一标识 timestamp: data.timestamp, // 必填,生成签名的时间戳 nonceStr: data.nonceStr, // 必填,生成签名的随机串 signature: data.signature, // 必填,签名,见附录1 jsApiList: [ 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'previewFile', 'getLocation', ] }); wx.error(function (res) { console.log("调用微信jsapi返回的状态:"+res.errMsg); }); }).catch(function(error) { //vm.errorToast(error,1000); console.info(error); })}服务端
initConfig.do 对应的代码。
这个微信需要绑定到一个应用中,我们需要定义应用的可信域名。
在企业微信登陆后,我们会记录一个应用的ID。
在服务端调用方法:
public static Map<String, String> getWxConfig(String url,String corpId,String secret) throws Exception { TokenModel tokenModel = TokenUtil.getEntTicket(corpId, secret); String timestamp = Long.toString(System.currentTimeMillis() / 1000); // 必填,生成签名的时间戳 String nonceStr = UUID.randomUUID().toString(); // 必填,生成签名的随机串 String ticket=tokenModel.getToken(); String signature = ""; // 注意这里参数名必须全部小写,且必须有序 String sign = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr+ "×tamp=" + timestamp + "&url=" + url; try { MessageDigest crypt = MessageDigest.getInstance("SHA-1"); crypt.reset(); crypt.update(sign.getBytes("UTF-8")); signature = byteToHex(crypt.digest()); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } Map<String, String> ret = new HashMap<String, String>(); ret.put("appId", corpId); ret.put("timestamp", timestamp); ret.put("nonceStr", nonceStr); ret.put("signature", signature); return ret; }3.这个配置代码在应用启动时执行。
import {initWxConfig} from '@/assets/app.js';4.使用相应的API
wxImage(type){ var self_=this; wx.chooseImage({ sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: [type], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 for(var i=0;i<localIds.length;i++){ wx.uploadImage({ localId: localIds[i], // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID var url=_baseUrl +"/wx/saveFile.do"; var params="mediaId=" + serverId; self_.$ajax.post(url,params).then(res=>{ var data=res.data; self_.handFile(data); }); } }); } } }); }选择相册或者拍照。
希望本文所述对大家vue.js程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
从现今的很多微信定制开发的成功案例去看,我们可以知道,科学化、合理化地去开发并运营一个微信账号,对于提升企业的营销效果是非常有帮助的。之前的文章也分析过,我们该
vue微信网页授权,基于vue-cli3.0+webpack4+vantui+sass+rem适配方案+axios,开发的微信授权方案。项目地址:vue-wec
企业微信小程序的开发通过企业微信小程序模拟器插件来实现,方便用户在微信开发者工具中进行企业微信小程序开发、调试和代码上传。一、开发须知开发者在使用企业微信小程序
01背景02如何从0到1搭建企业微信私域流量池03裂变营销,从1到10!04案例05总结对于大部分企业来说,企业微信加上第三方服务商开发出的功能,能够满足企业线
微信网站,是企业移动互联网应用与商业服务平台。微信网站,可以快速搭建手机网站并生成APP,帮助企业建设企业移动门户和移动基础应用平台,可以和企业微信公众号整合提