威豹双肩包,宜州市二中,粤y
本文实例讲述了vue 开发企业微信整合。分享给大家供大家参考，具体如下：
概述
手机端程序可以和企业微信进行整合，我们也可以使用企业微信jssdk功能，实现一些原生的功能。
整合步骤
在整合之前需要阅读 整合步骤。
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程序设计有所帮助。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论