溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
