企微开发踩坑指南

前言

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

主要的优势在于全平台、以及结合企微实现智能营销。

企微官方提供了三种场景供我们选择，本文介绍的是基于 JS-SDK 的企业内部应用。

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

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 注册 ，这里面涉及到几个关键字和流程

access_token：调用接口凭证, 用于获取 jsapi_ticket, 一般由业务后端来缓存，不放在前端。
jsapi_ticket：H5应用调用企业微信JS接口的临时票据，正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限（一小时内，一个企业最多可获取400次，且单个应用不能超过100次），频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket。
signature：签名，具体见
config 函数执行完会触发全局 wx.ready 函数，agentConfig 需要在这个钩子里调用。️
签名信息，默认的有效期为 7200 秒，也就是2小时，前端可以保存下，控制下更新频率。

本地开发调试

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

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

3、页面调试可以在浏览器中，也可以在企微的webview 中，到 2021年国庆前，企微 webview 的 chrome 内核版本已经连续 5 年没更新，导致不支持 vue3；不过现在因该可以了,将此网址在 webview 中打开 https://ping.huatuo.qq.com/， window 下可以看到当前chrome 内核版本。

window 下