企微开发踩坑指南

简介: 企微开发踩坑指南

前言


基于企微平台的 web 开发属于 app hybrid 开发的一个典型场景,使用企业微信官方提供的 JS-SDK ,我们可以借助企业微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力,为企业微信用户提供更优质的网页体验。

其主要的优势在于全平台、以及结合企微实现智能营销;目前企微官方提供了三种场景供我们选择,本文介绍的是基于 JS-SDK 的 企业内部应用。


1687779588440.png


前端这块前期大概率遇到的坑有这些:

1.鉴权

2.技术栈选择、本地调试、企微 webview 的兼容性


登录鉴权流程


企微上的应用开发,是通过 webview 来实现的,和常见的混合开发模式一致,只要登录流程完成后,后面的业务开发过程就是我们熟悉的 html,js 等前端技术了。

若想使用企微的 api, 需要首先加载并注册 JS-SDK,它是一个 js 文件所以加载可以通过 script 标签的形式来引入,加载完后需要注册才能使用,其官方提供的注册函数如下


wx.config({
    beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,企业微信的corpID
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见 附录-JS-SDK使用权限签名算法
    jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
wx.agentConfig({
    corpid: '', // 必填,企业微信的corpid,必须与当前登录的企业一致
    agentid: '', // 必填,企业微信的应用id (e.g. 1000247)
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录-JS-SDK使用权限签名算法
    jsApiList: ['selectExternalContact'], //必填,传入需要使用的接口名称
    success: function(res) {
        // 回调
    },
    fail: function(res) {
        if(res.errMsg.indexOf('function not exist') > -1){
            alert('版本过低请升级')
        }
    }
});


config 接口是注册当前企业权限,而agengConfig 是当前应用权限,它们的签名算法是完全一样的,整体流程大概如下:

access_token =》jsapi_ticket => signature =》wx.config、wx.agentConfig 注册,这里面涉及到几个流程:

1、access_token:调用接口凭证, 用于获取 jsapi_ticket, 一般由业务后端来缓存,不放在前端。

2、jsapi_ticket:H5应用调用企业微信JS接口的临时票据,正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限(一小时内,一个企业最多可获取400次,且单个应用不能超过100次),频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket。

3、signature:签名,具体见 附录-JS-SDK使用权限签名算法

4、config 函数执行完会触发全局 wx.ready 函数,agentConfig 需要在这个钩子里调用。️

5、签名信息,默认的有效期为 7200 秒,也就是2小时,前端可以保存下,控制下更新频率。


本地开发调试


1、线上是通过 Oauth2 登录的形式获取 userId 信息的,但是本地调试无法这样做,所以需要让后端提供一个 mock 登录的接口;

2、本地也无法调用 企微原生js 的,所以在 dev 模式下可以忽略企微api注册函数的执行;

3、虽然在Chrome 浏览器里调试很方便,但是毕竟最终运行是在 企微环境,所以客户端里调试也必不可少的,window 和 mac 下都需要手动开启相关配置。


1687779559552.png


1687779570584.png


5、企微提供的 api 有时候需要快速的预览一下,这时候本地不太好模拟,好在官方提供了一个接口预览对页面,可以将这个链接放到 webview 里打开测试下,注意,应用里打开对消息才能启用webview 哦,普通聊天框里只会打开系统默认浏览器。


1687779540157.png


技术栈支持,兼容性


页面调试可以在浏览器中,也可以在企微的webview 中,到 2021年国庆前,企微 webview 的 chrome 内核版本已经连续 5 年没更新,导致不支持 vue3;不过现在因该可以了, 企微终于将 pc 端使用5年+的 chrome:53 内核,升级到了chrome:91,;

将此网址在 webview 中打开 ping.huatuo.qq.com/ , window 下可以看到当前chrome 内核版本。

window 下


1687779532302.png


mac 下


1687779515455.png


1687779523547.png


后续


原来的官方文档更像是 api 文档,不过近期我看官方已经在花精力优化开发教程了,希望企微平台的整体开发体验越来越好吧。

目录
相关文章
|
机器学习/深度学习 搜索推荐 算法
计算机视觉教程6-1:图解双目视觉系统与立体校正原理
计算机视觉教程6-1:图解双目视觉系统与立体校正原理
1326 0
计算机视觉教程6-1:图解双目视觉系统与立体校正原理
|
Java Maven
SpringBoot用maven打出的jar只有几kb解决
SpringBoot用maven打出的jar只有几kb解决
1103 0
|
前端开发 JavaScript 微服务
jeecg-boot前端实现表格插槽、定制化修改
jeecg-boot前端实现表格插槽、定制化修改
CentOS8安装Geant4笔记(二):CentOS8安装Qt5.15.2并测试运行环境
CentOS8安装Geant4笔记(二):CentOS8安装Qt5.15.2并测试运行环境
CentOS8安装Geant4笔记(二):CentOS8安装Qt5.15.2并测试运行环境
|
人工智能 IDE 程序员
GitHub Copilot 免费了!程序员们的福音来了!
《GitHub Copilot 免费了!程序员们的福音来了!》 近日,GitHub 宣布其 AI 编程助手 GitHub Copilot 现在可以免费使用。曾经每月需支付 10 美元订阅费的 Copilot,现在向所有人开放免费版本,这对个人开发者、初学者和小型团队来说是个大好消息。免费版支持 GPT 和 Claude 模型,并提供每月 2000 次代码补全和 50 条聊天消息等核心功能。用户只需注册或登录 GitHub 账户,在 VS Code 中安装扩展并激活免费版即可使用。此外,Visual Studio Code 也完全免费,进一步降低了开发门槛。 除了
12975 7
GitHub Copilot 免费了!程序员们的福音来了!
|
存储 Kubernetes 容灾
在k8S中,K8S持久化可以对接哪些储存,为什么要选择它?
在k8S中,K8S持久化可以对接哪些储存,为什么要选择它?
|
人工智能 开发框架 前端开发
移动应用开发的未来:探索跨平台框架与AI的融合
随着智能手机的普及和移动技术的飞速发展,移动应用已成为我们日常生活的一部分。本文将探讨移动应用开发的最新趋势,特别是跨平台开发框架的兴起和人工智能技术的结合如何塑造未来移动应用的发展方向。我们将从React Native和Flutter等流行框架谈起,分析它们如何简化开发流程、降低成本并提高应用性能。同时,本文也将深入讨论人工智能如何在用户体验、安全性和个性化服务方面为移动应用带来革命性的变化。最后,我们将展望未来移动应用开发的新机遇和挑战。
322 27
|
消息中间件 前端开发 Java
面试官:说说Spring中IoC实现原理?
IoC(控制反转)是种编程思想,旨在降低代码耦合,提高重用性、可测试性和灵活性。Spring通过工厂模式和反射实现IoC,其中依赖注入(DI)是常见实现方式。初始化IoC容器,读取配置文件创建Bean并利用反射加载对象。课后思考涉及工厂模式在Spring源码中的体现及反射核心实现。更多内容见[www.javacn.site](https://www.javacn.site)。
277 1
|
缓存 前端开发 小程序
SpringBoot+uniapp实现网页授权获取用户基本信息
本文详细介绍了微信网页授权登录的实现过程,作者原本计划在一个项目中使用该功能,但由于公众号未认证而放弃。文中分享了如何通过测试公众号实现网页授权并获取用户基本信息,包括配置授权回调域名、获取access_token及刷新等步骤。适合初次接触或希望回顾此流程的读者。此外,还提供了常见错误解决方案,强调了正确配置回调域名的重要性,并提醒避免重复使用已失效的code。通过本文,读者可以更好地理解和应用微信网页授权。
582 0
SpringBoot+uniapp实现网页授权获取用户基本信息
|
数据安全/隐私保护
华为ensp配置GRE-随记
关于配置GRE的学习随记,社区里面的都太复杂了,前辈们太厉害了,我学不会(狗头保命)
547 2
华为ensp配置GRE-随记