uniapp开发企业微信内部应用

发布于:2024-07-01 ⋅ 阅读:(19) ⋅ 点赞:(0)

最近一直忙着开发项目,终于1.0版本开发完成,抽时间自己总结下在项目开发中遇到的技术点。此次项目属于自研产品,公司扩展业务,需要在企业微信中开发内部应用。因为工作中使用的是钉钉,很少使用企业微信,对于企业微信中的一些功能啥的也不了解。于是乎在网上各种搜索资料查看文档。废话就不多说了,先缕下思路。

第一步肯定是先拥有企业微信管理员的权限,登录PC端企业微信,登录后点击头像会出现“管理企业”如下图所示:
在这里插入图片描述

点击后会在浏览器打开企业微信后台首页,点击企业应用如下图所示:
在这里插入图片描述

通过上图能看到应用分为自建应用和第三方,因为项目是自建应用对于第三方应用就没有过多的去了解。

点击创建应用:
在这里插入图片描述

按需填写信息点击创建就行,创建完成后可以看到
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2ebf0ba6ad92471a937a615a9b72c031.png

在这里插入图片描述

上图标注的是在项目中需要配置的,大家可以尝试看下。配置完成后就可以根据需求开发了。因为项目是创建应用后授权登录后端返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>

以上便是创建企业微信内部应用的简单操作,其他功能后续再补。。。