h5应用调用企业微信api过程(获取当前外部联系人userId方法)

该代码示例展示了如何通过OAuth2授权登录,然后调用后台接口获取企业微信的签名,进行wx.config()和wx.agentConfig()注册,以实现企业微信应用的身份认证和API调用,如getCurExternalContact等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

调用过程:

  1. 通过OAuth2授权链接进入页面并完成登录
  2. 调用后台获取企业签名接口 并进行 wx.config() 注册
  3. wx.ready() 中继续 企业微信应用身份认证, 调用后台企业微信应用签名接口获取签名,在 wx.agentConfgi() 中注册
  4. wx.invoke() 中调用需要使用的api方法
下面是完整代码,复制直接可用
export default {
	init() {
		postWork('/api/login/getSignature', {
			url: location.href,
			type: 1, // 1:企业 2:应用
			agentId: process.uniEnv.agentId
		}).then(res => {
			if (res.code == 0) {
				wxx.config({
					debug: false,
					beta: true,
					appId: process.uniEnv.corpid, // 必填,企业微信的corpid,必须与当前登录的企业一致
					timestamp: res.timestamp, // 必填,生成签名的时间戳
					nonceStr: res.nonceStr, // 必填,生成签名的随机串
					signature: res.signature,// 必填,签名,见附录-JS-SDK使用权限签名算法
					jsApiList: ['agentConfig', 'getCurExternalContact'], //必填,传入需要使用的接口名称
					success: function(res) {
					    // 回调
						console.log('config', res)
					},
					fail: function(res) {
					    if(res.errMsg.indexOf('function not exist') > -1){
					        alert('版本过低请升级')
					    }
					},
					
				})
				
				wxx.ready (() => {
					
					this.agentInit()
				})
			}
			
		})
	},
	// 应用身份认证
	agentInit() {
		postWork('/api/login/getSignature', {
			url: location.href,
			type: 2, // 1:企业 2:应用
			agentId: process.uniEnv.agentId
		}).then((res) => {
			wxx.agentConfig({
				corpid: process.uniEnv.corpid, // 必填,企业微信的corpid,必须与当前登录的企业一致
				agentid: process.uniEnv.agentId, // 必填,企业微信的应用id (e.g. 1000247)
				timestamp: res.timestamp, // 必填,生成签名的时间戳
				nonceStr: res.nonceStr, // 必填,生成签名的随机串
				signature: res.signature,// 必填,签名,见附录-JS-SDK使用权限签名算法
				jsApiList: ['getContext','getCurExternalContact', 'hideMenuItems'], //必填,传入需要使用的接口名称
				success: (res) => {
					// 回调
					console.log('应用身份',res)
					this.getContext()
				},
				fail: function(res) {
					if(res.errMsg.indexOf('function not exist') > -1){
						alert('版本过低请升级')
					}
				}
			});
		})
	},
	// 调用获取H5环境入口的接口
	getContext() {
		wxx.invoke('getContext', {}, (res) => {
			console.log('getContext', res)
		    if(res.err_msg == "getContext:ok"){
		    	// 正常处理业务逻辑
		    	// 获取当前对话框userid
				if (res.entry == 'normal') {
					// 侧边栏进入
					uni.showModal({
						title: '请在下列场景打开应用!',
						content: '外部联系人聊天窗口或详情',
						confirmColor: '#fff',
						showCancel: false,
						success() {
							
						}
					})
				} else {
					this.getUserid()
				}
				
		    	
		        // entry  = res.entry ; 
				// shareTicket = res.shareTicket; //可用于调用getShareInfo接口
		
		    }else {
		        //错误处理
		    }
		});
	},
	// 当前外部联系人userId
	getUserid() {
		wxx.invoke('getCurExternalContact', {}, (res) => {
			console.log('getCurExternalContact11111', res)
	        if(res.err_msg == "getCurExternalContact:ok"){
	            var userId  = res.userId ; //返回当前外部联系人userId
				
				uni.$emit('getExternalId', res)
	        } else {
	            //错误处理
				uni.showModal({
					title: '无权限!',
					content: '请联系管理员!',
					confirmColor: '#fff',
					showCancel: false,
					success() {
						
					}
				})
	        }
	    });
	}
	
}
<think>好的,用户想将基于UniApp和Vue3开发的小程序发布成Web端,并部署到服务器上,然后通过网页形式嵌入企业微信。我需要分步骤指导他们完成这个过程。首先,得确认UniApp的跨平台能力,它确实支持编译为Web端。接下来,用户需要调整项目配置,比如manifest.json中的Web设置,可能还要处理路由和静态资源路径的问题。 然后,编译生成Web资源后,部署到服务器,这部分需要指导如何配置服务器,比如Nginx的配置,确保路径正确且支持History模式。接下来,企业微信的嵌入步骤可能涉及创建应用、配置可信域名,以及处理JS接口的安全校验。这里要注意企业微信对网页授权和JS-SDK的使用限制,可能需要后端配合获取签名。 另外,用户可能遇到的坑包括跨域问题、企业微信的UA检测,以及权限配置错误。需要提醒他们检查这些方面,并提供测试建议,比如本地测试和日志调试。最后,总结整个流程,确保他们一步步跟进,同时强调注意事项,避免常见错误。整个过程要保持结构清晰,语言简洁,用中文表达,符合他们的技术要求。</think>以下是将UniApp+Vue3小程序转换为Web端并嵌入企业微信的完整实现方案,分为6个关键步骤: 一、项目编译准备 1. 配置`manifest.json` ```json "h5": { "router": { "mode": "history" // 企业微信推荐使用history路由 }, "publicPath": "./", "template": "public/index.html" } ``` 2. 处理环境差异 ```javascript // main.js if (process.env.VUE_APP_PLATFORM === 'h5') { // 注入企业微信JS-SDK加载逻辑 require('./lib/wechat-work-sdk') } ``` 二、编译打包 ```bash # 生成H5版本 npm run build:h5 # 输出目录:/dist/build/h5 ``` 三、服务器部署(Nginx示例) ```nginx server { listen 80; server_name yourdomain.com; location / { root /path/to/dist/build/h5; try_files $uri $uri/ /index.html; add_header Cache-Control "no-cache, no-store"; } } ``` 四、企业微信配置 1. 后台设置: - 登录企业微信管理端 - 进入「应用管理」→「自建」→ 创建网页应用 - 配置可信域名(需完成ICP备案) - 设置JS接口安全域名 2. 前端集成SDK: ```javascript // 封装企业微信SDK初始化 export const initWxWork = async () => { const res = await fetch('/api/get-wechat-signature') const { appId, timestamp, nonceStr, signature } = await res.json() wx.config({ beta: true, debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['scanQRCode', 'getLocation'] }) } ``` 五、特殊适配处理 1. 跨平台兼容方案 ```javascript // 统一API调用方式 const platformApi = { toast(message) { if (window.__wxjs_environment === 'wxwork') { wx.invoke('showToast', { title: message }) } else { // 普通浏览器实现 } } } ``` 2. 样式适配方案 ```css /* 适配企业微信内置浏览器 */ @media (--wxwork) { body { padding-top: 44px; /* 补偿顶部导航栏高度 */ } } ``` 六、调试与发布 1. 本地开发调试: ```bash # 启动H5服务 npm run serve:h5 -- --port 8080 # 配置本地代理(解决跨域) module.exports = { devServer: { proxy: { '/api': { target: 'https://qyapi.weixin.qq.com', changeOrigin: true } } } } ``` 2. 常见问题排查: - 签名错误:检查服务器时间是否同步 - 权限不足:确认JS接口列表已正确声明 - 白屏问题:检查路由模式是否为history - 跨域问题:配置正确的CORS响应头 注意事项: 1. 企业微信网页授权流程: ``` 用户访问 → 302跳转到授权页 → 返回带code的重定向 → 后端用code换userid ``` 2. 性能优化建议: - 启用gzip压缩 - 配置长期缓存策略 - 使用企业微信的本地存储API(wx.setStorage) 3. 安全要求: - HTTPS强制要求 - 敏感操作需二次验证 - 用户敏感信息需加密存储 部署完成后,可通过企业微信「工作台」→「自建应用」访问,也可生成专属链接嵌入到消息、邮件等场景。建议配合后端日志系统监控页面加载性能和用户行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值