uniapp开发企业微信内部应用

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

第一步肯定是先拥有企业微信管理员的权限,登录PC端企业微信,登录后点击头像会出现"管理企业 "如下图所示:

点击后会在浏览器打开企业微信后台首页,点击企业应用如下图所示:

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

点击创建应用:

按需填写信息点击创建就行,创建完成后可以看到

上图标注的是在项目中需要配置的,大家可以尝试看下。配置完成后就可以根据需求开发了。因为项目是创建应用后授权登录后端返token,前端进行本地存储,然后才调用内部接口,这里并没有使用企业微信的js-sdk。

废话不多说了,代码如下:

bash 复制代码
<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>

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

相关推荐
Geek_Vison18 小时前
技术实践:保险健康APP引入第三方小程序实战,如何构建一个安全可控的沙箱环境~
android·安全·小程序·uni-app·mpaas
2501_9159184119 小时前
Python如何抓取HTTPS请求包的完整教程与代码示例
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088920 小时前
全面解析常用Web前端开发工具:编辑器、调试工具、性能分析器与框架
android·前端·ios·小程序·uni-app·编辑器·iphone
编程猪猪侠21 小时前
基于uni-app-x 与 uni-app 的安卓与 H5 双向通信完整实现
android·javascript·uni-app
niech_cn2 天前
uniapp开发App(iOS、Android、鸿蒙Next)之新建项目相关细节(二)
uni-app
梦梦代码精2 天前
功能堆砌不如好扩展:4 款开源商城系统的选型思考
java·docker·uni-app·开源·php
巴巴博一2 天前
uni-app / 微信小程序中 open-type=“share“ 按钮样式异常,和普通 view 无法齐平的解决方案
微信小程序·uni-app·notepad++
游九尘2 天前
JavaScript 实现三段式版本号对比函数(app升级用)
javascript·uni-app
2501_916007472 天前
前端开发常用软件与工具全面指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915909063 天前
iOS应用性能优化:十大策略提升用户体验与开发效率
android·ios·小程序·https·uni-app·iphone·webview