最近一直忙着开发项目,终于1.0版本开发完成,抽时间自己总结下在项目开发中遇到的技术点。此次项目属于自研产品,公司扩展业务,需要在企业微信中开发内部应用。因为工作中使用的是钉钉,很少使用企业微信,对于企业微信中的一些功能啥的也不了解。于是乎在网上各种搜索资料查看文档。废话就不多说了,先缕下思路。
第一步肯定是先拥有企业微信管理员的权限,登录PC端企业微信,登录后点击头像会出现“管理企业”如下图所示:
点击后会在浏览器打开企业微信后台首页,点击企业应用如下图所示:
通过上图能看到应用分为自建应用和第三方,因为项目是自建应用对于第三方应用就没有过多的去了解。
点击创建应用:
按需填写信息点击创建就行,创建完成后可以看到
上图标注的是在项目中需要配置的,大家可以尝试看下。配置完成后就可以根据需求开发了。因为项目是创建应用后授权登录后端返token,前端进行本地存储,然后才调用内部接口,这里并没有使用企业微信的js-sdk。
废话不多说了,代码如下:
<template>
<view class=" main">
<view class="loader"></view>
</view>
</template>
<script>
import {getToken} from "@/utils/auth";
export default {
data() {
return {
}
},
onLoad() {
this.getwecom();
},
onShow() {
this.imToken = localStorage.getItem('token')
},
methods: {
getwecom() {
// 企业的 corp_id
const corp_id = 'xxxx';//在企业微信后台 我的企业 ———— 企业信息页面中底部就能看到
// 重定向地址
const redirect_uri = encodeURI('http://baidu.com/test/#/');
//企业的agentId
const agentId = xxxx;
//获取当前路径的code
let code = this.getUrlCode();
//是否存在code
if (code === undefined || code == null || code === "") {
//获取code
window.location.href =
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${corp_id}&redirect_uri=${encodeURIComponent(redirect_uri)}&response_type=code&scope=snsapi_privateinfo&state=STATE&agentid=${agentId}#wechat_redirect`
}
uni.request({
url: `https://xxx.net/auth/corpWx/oauthUser?code=${code}&agentId=xxxxxx`,
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'GET',
success: (res) => {
if (res.data.status === 500) {
//无权限
localStorage.removeItem('token');
uni.redirectTo({
url:'/pages/500'
})
}else if (res.data.status === 402) {
//拒绝授权
uni.redirectTo({
url:'/pages/402'
})
localStorage.removeItem('token');
} else if(res.data.status === 200){
localStorage.setItem("token", res.data.data)
uni.redirectTo({
url:'/pages/index'
})
}
},
})
},
getUrlCode() {
// 截取url中的code方法
let url = new URL(window.location.href)
return new URLSearchParams(url.search).get("code");
},
}
}
</script>
<style lang="scss" scoped>
.main{
height: 100vh;
width: 100%;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
.loader {
width: 45px;
height: 45px;
--c:no-repeat linear-gradient(#43a2ed 0 0);
background: var(--c),var(--c),var(--c),var(--c);
background-size: 21px 21px;
animation: l5 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l5 {
0% {background-position: 0 0,100% 0 ,100% 100%,0 100%}
33% {background-position: 0 0,100% 0 ,100% 100%,0 100%;width:60px;height: 60px}
66% {background-position: 100% 0,100% 100%,0 100%,0 0 ;width:60px;height: 60px}
100% {background-position: 100% 0,100% 100%,0 100%,0 0 }
}
</style>
以上便是创建企业微信内部应用的简单操作,其他功能后续再补。。。