本文實例講述了vue 開發(fā)企業(yè)微信整合。分享給大家供大家參考，具體如下：

概述

手機端程序可以和企業(yè)微信進行整合，我們也可以使用企業(yè)微信JSSDK功能，實現(xiàn)一些原生的功能。

整合步驟

在整合之前需要閱讀 整合步驟。

1.引入JSSDK

npm i -S weixin-js-sdk 這樣就引入了微信sdk。

2.通過config接口注入權(quán)限驗證配置

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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過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("調(diào)用微信jsapi返回的狀態(tài):"+res.errMsg);

});

}).catch(function(error) {

//vm.errorToast(error,1000);

console.info(error);

})

}

服務(wù)端

initConfig.do 對應(yīng)的代碼。

這個微信需要綁定到一個應(yīng)用中，我們需要定義應(yīng)用的可信域名。

在企業(yè)微信登陸后，我們會記錄一個應(yīng)用的ID。

在服務(wù)端調(diào)用方法：

public static Map 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 = "";

// 注意這里參數(shù)名必須全部小寫，且必須有序

String sign = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr+ "&timestamp=" + 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 ret = new HashMap();

ret.put("appId", corpId);

ret.put("timestamp", timestamp);

ret.put("nonceStr", nonceStr);

ret.put("signature", signature);

return ret;

}

3.這個配置代碼在應(yīng)用啟動時執(zhí)行。

import {initWxConfig} from '@/assets/app.js';

4.使用相應(yīng)的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

wx.uploadImage({

localId: localIds[i], // 需要上傳的圖片的本地ID，由chooseImage接口獲得

isShowProgressTips: 1, // 默認為1，顯示進度提示

success: function (res) {

var serverId = res.serverId; // 返回圖片的服務(wù)器端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程序設(shè)計有所幫助。

總結(jié)

以上是生活随笔為你收集整理的vue php企业站案例,vue 开发企业微信整合案例分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。