前端起步
这次开发主要是自建应用/H5/Vue2
因为用的是自建应用H5,所以第一步考虑的是企微中jssdk的使用
1.利用vue的mixin方法和js类的方法写两个个公共组件(可以下载任意目录下)
首先是getAuth.js
import { oauthUrl, oauthUser } from "../request/api";
class GetAuth {
constructor() {
this.employeeId = null
this.typeCode = null
}
// 授权成功,换取当前登录用户得userId(企业邮箱类型得)
getAuthData() {
// let urlData = window.location.href
// let p = urlData.split('?')[1]
// let params = new URLSearchParams(p)
//http://wxtest.emagiclife.com/wecom/?code=lWMh8Pcl1c6v1m9MTROdtT9Fk9KwpWga8YKvuY2QEcI&state=sdfds343#/customerInfo
let params = new URLSearchParams(window.location.href.split('?')[1])
sessionStorage.removeItem('key')
sessionStorage.setItem('key', window.location.href)
const code = params.get('code')
sessionStorage.setItem('code', code)
console.log(code,"codecodecoedecoedecoed");
if (code && code.length > 15) {
return oauthUser({ code }).then(res1 => {
if (!res1.userId) {
Toast.fail('获取信息失败,请稍后重试')
return
} else {
this.employeeId = res1.userId
sessionStorage.setItem('employeeId', this.employeeId)
return this.employeeId
}
})
} else {
this.getWxAuthCode()
return Promise.resolve('')
}
}
// 获取企微授权
getWxAuthCode() {
oauthUrl().then(res => {
window.location.href = res
})
}
// 获取当前登录用户userId
getUserId() {
if (!this.employeeId) {
return this.getAuthData()
}
return Promise.resolve(this.employeeId)
}
}
export default new GetAuth()
怎样在页面使用呢?
在methods钩子函数中
//登路人id为了调用认证接口
getUserIdByWecomId() {
//注意在这个地方直接使用类中暴露的方法/我这里是为了拿到当前登录用户的id
getAuthRoot.getUserId().then((res) => {
console.log(res, "换取userid");
// this.userIdInfo = res.userId;
this.getJsdkData();
});
},
然后
mounted() {
document.title = "xxxxx";//定义企业微信页面标题
this.getUserIdByWecomId();
},
我们来分析下代码
首先在进入我的页面的时候/有的逻辑需要获取到当前登录用户得id在 所以代码执行逻辑是 调用类里得 getUserId 方法 查询id 如果存在就直接返回 如果不存在就往上 查询 getAuthData 这个时候有一个逻辑是code判断(下面我会解释)code判断通过就直接调用接口返回我们需要得id 负责走else 调用另一个接口(认证用得) 接口都是后台写得 前端无需操心
备注:上面所讲到得code / 我们需要先了解企业微信得逻辑 /企业微信首次进入会要求我们进行一个认证 这个认证需要跳转到特定得url (后台可以给你)
需要注意得是:这个认证其实是分了两步1.跳转至认证得url(这是企微拼得url 会给后台,然后后台在通过接口给前端 (code长度判断是因为 这个认证得url里边也有code但不是我们要得所以加判断))前端跳转至认证url后(静默/手动)认证完成 /这个时候微信又给你拼了一个url(针对你页面路径拼得)你会跳转至这个url 这个时候url包含了一个相当长得code参数,也是我们需要得 拿到这个code 在通过后台接口去获取当前登录得id
当我们获取到这个id得时候 在暴露得方法中就可以直接使用这个id了
其次是weChat.js
我们会看到上边得代码块中有一个this.getJsdkData();方法 他就是调用weChat。js得方法
import { getJsSDK, jsAgentSign } from "../request/api";
const weChatMixin = {
data() {
return {
KHuserId: '',
localData: null,
localIds: null,
newLocalIds: null,
serverId: null,
localDataList: [],
serverIdList: [],
newImglistType: [],
count: 0
}
},
methods: {
//客户信息调用接口(搭配主vue文件得方法)
getInfo() {
},
// 用于需要 调用agentConfig的接口
async wxAgentConfig(urls, wxApi, sendTxt) {
let that = this
const wx = window.wx
let url = urls ? urls : sessionStorage.getItem('key')
const res = await getJsSDK({ url })
wx.config({
beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appId, // 必填,企业微信的corpID
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: ["sendChatMessage", "getCurExternalContact", 'chooseImage'], // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: ["sendChatMessage", "getCurExternalContact", 'chooseImage', 'getLocalImgData'],
success: async () => {
if (wxApi == 'chooseImage') {
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
that.localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
that.newLocalIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
console.log(that.localIds, "企业微信啊");
that.newImglistType = res.localIds.map(item => {
return item.split('/')[item.split('/').length - 1]
})
for (let index = 0; index < that.localIds.length; index++) {
that.syncUpload(that.localIds[index])
}
},
fail: function (res) {
console.log("开启失败", res)
}
});
} else {
const res1 = await jsAgentSign({ url })
wx.agentConfig({
corpid: res1.corpId, // 必填,企业微信的corpid,必须与当前登录的企业一致
agentid: res1.agentId, // 必填,企业微信的应用id (e.g. 1000247)
timestamp: res1.timestamp, // 必填,生成签名的时间戳
nonceStr: res1.nonceStr, // 必填,生成签名的随机串
signature: res1.signature, // 必填,签名,见附录-JS-SDK使用权限签名算法
jsApiList: ["sendChatMessage", "getCurExternalContact"],
success: res => {
if (wxApi == 'getCurExternalContact') {
wx.invoke("getCurExternalContact", {}, function (res) {
console.log(res, "iiiiiii");
if (res.err_msg == "getCurExternalContact:ok") {
that.KHuserId = res.userId;//客户userid
that.getInfo()
console.log(that.userId, "zheshiidididididdididididididii");
} else {
//错误处理
}
});
console.log(res);
} else if (wxApi == 'sendChatMessage') {
wx.invoke(
"sendChatMessage",
{
msgtype: "text", //消息类型,必填
enterChat: true, //为true时表示发送完成之后顺便进入会话,仅移动端3.1.10及以上版本支持该字段
text: {
content: sendTxt, //文本内容
},
},
function (res) {
console.log(res, "xxxxxxxxxx");
if (res.err_msg == "sendChatMessage:ok") {
//发送成功
}
}
);
}
}
})
}
}
})
})
},
//回显需要
syncUpload(localIds) {
let that = this;
wx.getLocalImgData({
localId: localIds, // 图片的localID
success: function (resBackData) {
let localData = resBackData.localData;
//判断是否有这样的头部
if (localData.indexOf('data:image') != 0)
localData = 'data:image/jpeg;base64,' + localData
//localData是经过处理的base64编码的图片
that.localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
that.localDataList.push(that.localData)
that.syncUploadService(localIds)
}
});
},
//上传图片至微信服务
syncUploadService(localIda) {
let that = this;
wx.uploadImage({
localId: localIda, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
that.serverIdList.push(res.serverId)
}
});
}
}
}
export default weChatMixin
里边包含两个接口(后台提供)
1.getJsSDK 这个主要是企业微信入口权限使用的(wx.config)
2.jsAgentSign 这个是企业微信API部分权限注入使用的(wx.agentConfig)
3.代码中像wx.checkJsApi wx.chooseImage等 可以自行官方文档查看,这里不做解释
注:因为是一个项目三块应用所以 每一个应用进入的页面(认证完成之后)都需要调用这里的方法
当然方法是由了 页面怎么使用呢
我们在回到 this.getJsdkData();方法
getJsdkData() {
this.wxAgentConfig(
sessionStorage.getItem("key"),
"getCurExternalContact"
);
},
虽然有点乱但是这样看就清楚了吧 this.getJsdkData()方法是为了走weChat.js
weChat使用得mixin写得所以页面使用
1.
import weChatMixin from "../../minxi/weChat";
mixins: [weChatMixin],
3
this.wxAgentConfig(
sessionStorage.getItem("key"),
"getCurExternalContact"
);
注意得是,入参分别是url 和 你要使用得wxAPI
个人建议和遇到得一些坑
1.尽量走小程序(JSsdk)太难了
2.认证url一定要保证走完在走你自己页面逻辑
3.hash企业微信不认 会强行改变你得路径 要么搜搜网上重写url得方法(我是没弄清楚)要么沟通好后台 ngx配置vue路由模式 前端直接使用history
4.注意config注入权限问题 一定要保证你前端得当前得url正确(除非你想一边挠头,一边mmp)
5.关于权限问题,一定要去企业微信官网/能登录管理你应用得官网 配置好
6.沟通好后台 我们前端是负责客户端得 服务端大多是后台来做
7.我不知道是我得问你还是企业微信本来就不好匹配请求头 其中一个接口我是这样写的(因为企业微信上不会调用才这样写)
export function complaintaddapi(data) {
return service({
url: ANDapi + 'xxxxxxxxx',
method: 'post',
data: data,
// headers:{
// 'Content-type': 'application/x-www-form-urlencoded'
// }
transformRequest: [function (data) {
//在向服务器发送前,修改请求数据
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}]
})
}
因为写企业微信太痛苦了,到处都是坑,所以在项目雏形之时就赶紧写文章 ,代码杂乱还没整改希望读到得码友谅解- -!!!