首页 > 其他分享 >企微开发踩坑指南

企微开发踩坑指南

时间:2022-10-07 22:11:42浏览次数:49  
标签:指南 必填 微信 jsapi 企微 开发 签名 JS

前言

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

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

企微开发踩坑指南_JavaScript

企微开发踩坑指南_微信_02

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

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 下都需要手动开启相关配置。

企微开发踩坑指南_webview_03

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

企微开发踩坑指南_chrome_04

技术栈支持,兼容性

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

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

window 下

企微开发踩坑指南_webview_05

mac 下

企微开发踩坑指南_JavaScript_06

企微开发踩坑指南_chrome_07

后续

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

标签:指南,必填,微信,jsapi,企微,开发,签名,JS
From: https://blog.51cto.com/u_15680916/5735109

相关文章

  • 可爱、炫酷、简洁的鼠标图标资源,配详细使用指南
    无论是学习还是工作,我们经常都会使用到电脑或者笔记本,你是否有注意到那个小小的鼠标图标呢?也许是看习惯了,这个鼠标图标似乎不那么起眼,实际上我们可以自定义这个鼠标图标,......
  • VScode开发STM32/GD32单片机-环境搭建
    1、软件下载1.1、安装VSCode1.2、下载安装VisualGDB1.3、下载安装mingwin641.4、下载安装OpenOCD1.5、下载GNUArmEmbeddedToolchain2、软件安装2.1、安装完成Vis......
  • Docker开发指南 pdf
    高清扫描版下载链接:https://pan.baidu.com/s/1Dz5Hm16DB5pMaKqmuJ1zOw点击这里获取提取码 ......
  • 你帮我助”软件开发 (以python为程序语言)
    在疫情期间,各个小区居民发挥互助精神,进行物品交换,互通有无。请你编写一个物品交换软件该程序允许添加物品的信息,删除物品的信息,显示物品列表,也允许查找物品的信息你实现......
  • 开源电子书 nginx开发手册文档 pdf
    高清扫描版下载链接:https://pan.baidu.com/s/1_LZNQWmpQno988_QDY06Og点击这里获取提取码 ......
  • 用 NodeJS 开发一版在线流程图网站
    源码:github.com/maqi1520/Cl…背景对于程序员来说,每天除了写代码,接触较多的可能是各种图表了,诸如流程图、原型图、拓扑图、UML图以及思维导图等等,我们较为熟悉的是Process......
  • 如何开发一款基于 vite+vue3 的在线表格系统(下)
    在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容。在本篇中我们将从项目实战出发带大家了解Vite+Vue3的在线表格系统的构建。使用Vite初始化Vue3项目在这里需......
  • 《Android底层接口与驱动开发技术详解》digest
    第一章:IDE:EclipseADTforjavadeveloper其它:ApacheAntJavaSEDevelopmentKit5或6Linux和Mac上使用ApacheAnt1.65+,Windows上使用1.7+版本;(单独的JRE是不可以的,必须......
  • odbc 驱动开发的一些资料
    dremio以前版本的odbc当前是已经不支持直接下载了,早期版本的odbc是基于了drill的odbc驱动,利用了SimbaEnginesdk以下是整理的一些资料可以参考如何开发odbcdriver,mag......
  • tauri 新的桌面应用开发模式
    tauri是基于rust以及webkit开发桌面应用的框架特性高性能构建的软件包小安全跨平台githubaction集成核心能力(文件系统文档,原生通知)自更新sidecar(可以集成其他二进制......