最近在开发企业微信的业务,可以借此机会学习到企业微信的开发,这让我非常开心、激动。殊不知,企业微信的开发让我很头疼,遇到了非常多的坑。在这里我记录一下,希望大家不要像我一样掉进坑里面。

一、wx.agentConfig方法,在手机app端的企业微信是存在的,可是在桌面pc端的企业微信不存在,直接就undefined。

1、发现问题:

图1.1

图1.2

在企业微信h5开发之前,必须引入两份js(如上图1.1和图1.2),分别是jweixin-1.2.0.js和jwxwork-1.0.0.js(调用wx.agentConfig需要引入jwxwork-1.0.0.js)。对于我而言,一般都会先把这两份js文件下载下来,然后放到公司的静态资源服务器上(其实大部分开发者都会这样做,毕竟公司的静态资源服务器比较稳定),但是,就是这个操作,就引发了一个缺陷,什么缺陷呢?

就是在电脑pc端的企业微信wx.agentConfig是undefined,不存在了。可是,手机app端的企业微信wx.agentConfig是存在。出现这种神奇的问题,就非常消耗开发者的时间去排查问题,甚至进入死胡同。

2、分析问题:

为了解决这个问题,script标签里的js链接,我用官方提供的js链接,不用公司静态资源服务器的链接。此时此刻,大快人心,电脑pc端的企业微信wx.agentConfig不再是undefined。并且调用其他的api都正常了。

图1.3

在电脑pc端的企业微信打开调试工具(快捷键 ctrl + alt + shift + D,开启调试模式,打开h5后,右击,如上图1.3,可以打开调试工具),仔细查看,发现:官方提供js链接,其实就是服务器,对电脑pc端企业微信做了兼容处理(如下图1.4、图1.5、图1.6)。

图1.4,可见,jweixin-1.2.0.js暂时重定向了,

图1.5, jweixin-1.2.0.js根本就没有加载进来

图1.6, 旧版的jweixin-1.0.0.js就被加载进来了。因为旧版的jweixin-1.0.0.js是存在wx.agentConfig方法的。所以不需要引入jwxwork-1.0.0.js也是可以的

上文提到需要引入两份js,你可以理解为:旧版的jweixin-1.0.0.js,一个顶两个。

3、得出结论

方案一:直接使用官方的js链接,缺点:万一官方的服务器挂了,页面就报错了。

方案二:把旧版的jweixin-1.0.0.js下载下来,放到公司的静态资源服务器,然后引入,就可以完美解决问题了。目前,旧版的jweixin-1.0.0.js链接官方文档根本就没有写出来。可通过下图1.7找到它的链接,链接为:https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js。

图1.7,被重定向后的链接

二、关于wx.error方法的回调函数的形参问题

1、发现问题

我目前打印一下失败的校验信息(如下图2.1)

图2.1

在手机app端打印的内容截图(如下图2.2),打印出来这样的错误信息:{"err_Info":"params_empty","errMsg":"config:preverifyjsapi:fail"}

图2.2

在电脑pc端打印的内容截图(如下图2.3),打印出来这样的错误信息:{"errMsg":"config:fail","err_msg":"some parameters are empty more info at https://open.work.weixin.qq.com/devtool/query?e=40063"}

图2.3

2、得出结论

不难发现,手机app端和电脑pc端的企业微信打印出来的错误信息是不一样的,这不是重点,重点是:这个信息会误导我们,让我们误以为,我们开发者配置的东西出了问题。事实上,就算是正确的配置,也是会这样打印出这样的信息,可以先不要纠结这个错误信息。

如果是第一次开发企业微信h5的开发者,需要特别注意,当你看到这样的信息,可以暂时忽略,直接看看其他的api是否调用成功;如果不能调用成功,再回过头来看。

三、关于企业微信后台的配置,需要注意的地方

1、前言

我目前做的需求有一个功能是:管家要在客户聊天窗口中,点击工具栏,打开h5页面后,分享小程序。

企业微信h5开发,一般需要自建应用。登录企业微信后台-----应用管理-----自建----自建应用(如下图3.1,图3.2)

图3.1

图3.2

         创建应用之后,需要配置到聊天工具栏(如下图3.3),配置链接(如下图3.4)

图3.3

图3.4

2、发现问题

配置完之后,需要关联被分享的小程序(如果不关联小程序,是没有办法在企业微信中打开,影响用户体验),你可能会毫不犹豫的在刚刚创建的应用关联(如下图3.5),此时此刻,会引发什么问题呢?

图3.5

会引起的问题在配置到聊天工具栏的h5链接,无法修改(如下图3.6、图3.7)。此时,开发者又要耗费时间去研究了。

图3.6

图3.7

        3、解决问题

其实要解决这个问题很简单,在应用主页先切回到为“网页”(如下图3.8),之后,就可以在配置到聊天工具栏中对h5链接进行修改。改完之后,再回到应用主页切回“小程序”即可。

图3.8

说了那么多,你可能会说,“为什么不同时创建两个应用,一个应用对应h5、另外一个应用对应小程序”,其实这样也是可以的。

4、注意点

刚刚说到,管家要在客户聊天窗口中,点击工具栏,打开h5页面后,需要分享小程序。还需要在后台配置一下(如下图3.9),点开之后,需要勾选一下刚刚创建的应用,不然的话,企业微信h5的wx.invoke('sendChatMessage', {})方法是无法分享的。

图3.9

希望本篇文章对你有帮助,如果您有更好的解决方案,欢迎留言评论!

企业微信h5开发(即JS-SDK),一不小心,就会掉进坑,进入死胡同相关推荐

  1. h5键盘把页面顶走了_微信h5开发的坑

    记一次微信h5开发的坑... 正常的效果如下: 本身用的cube-ui开发,上半部分是自己写的,下边用的是better-scroll,为了滑动更流畅.这个页面前边有一个登录页面,登录之后就会跳到这个首 ...

  2. 企业微信三方开发:注册企业微信服务商

    其他链接 初识微信开发 企业微信三方开发:注册企业微信服务商 企业微信三方开发(一):回调验证及重要参数获取 企业微信三方开发(二):获取access_token 企业微信三方开发(三):网页授权登录 ...

  3. 挑选微信h5开发制作公司的标准是什么?

    基于H5引擎技术的不断成熟与迭代,H5小游戏的制作水准和需求量也是越来越高,像TOM游戏,金豆游戏这些h5开发公司也如雨后春笋般涌现出来,现在市面上的微信h5开发制作公司那么多,又该如何挑选呢?挑选的 ...

  4. 企业微信三方开发(三):网页授权登录

    其他链接 初识微信开发 企业微信三方开发:注册企业微信服务商 企业微信三方开发(一):回调验证及重要参数获取 企业微信三方开发(二):获取access_token 企业微信三方开发(三):网页授权登录 ...

  5. 企业微信三方开发(五):扫码登录

    其他链接 初识微信开发 企业微信三方开发:注册企业微信服务商 企业微信三方开发(一):回调验证及重要参数获取 企业微信三方开发(二):获取access_token 企业微信三方开发(三):网页授权登录 ...

  6. python 工资条 企业微信_企业微信工资条开发

    [企业微信工资条开发为您提供免费seo诊断咨询]独家seo优化建议.如需合作右侧联系客服,承接各类合作. 企业微信工资条开发优化服务介绍 1.行业及竞争对手研究 2.关键词分析研究 3.网站现状详细诊 ...

  7. 企业微信三方开发(四):发送消息

    其他链接 初识微信开发 企业微信三方开发:注册企业微信服务商 企业微信三方开发(一):回调验证及重要参数获取 企业微信三方开发(二):获取access_token 企业微信三方开发(三):网页授权登录 ...

  8. 企业微信(H5打开)调用微信小程序

    这个功能比较坑,有很多坑的点,我先把我的开发过程说一下,最后把我遇到的问题总结. 准备工作 1.需要在微信小程序的管理后台中关联企业微信 2.在企业微信管理后台中设置应用主页 3.在企业微信管理后台中 ...

  9. 企业微信H5踩坑指南

    企业微信开发H5功能,正在进行中,需要记录的点有两个: 第一是:域名验证,针对SPA应用,下载下来的验证文件跟index.html同一目录或者使用其他方式,需要保证域名+文件名可以访问即可,再次登录微 ...

  10. 企业微信H5唤起(打开)微信小程序

    1.登录企业微信管理后台(https://work.weixin.qq.com/wework_admin/frame) 2.获取企业ID,我的企业>企业信息>企业ID(ww28b3c6e7 ...

最新文章

  1. VHDL+Verilog良好的代码编写风格(转载)
  2. MOS和三极管不同接法对应的性能比较
  3. 1031:反向输出一个三位数
  4. 原生js、jQuery实现选项卡功能
  5. 如何将特定提交推送到远程,而不是之前的提交?
  6. 初探队与广度优先搜索
  7. JAVA从url中分离ip和port
  8. xamarin android 设备,【Xamarin.Android】在Visual Studio中增强设备日志记录
  9. studio one 3 机架声道设置_雅马哈声卡的设置和使用方法
  10. 【python】ssim原理简介及代码实现
  11. halt、poweroff
  12. 二叉树的镜像和对称二叉树
  13. 《预训练周刊》第24期:Infinite-former:无限记忆变换器、2500万悟道科研基金开始申请...
  14. uniapp实现加载图片失败显示占位图
  15. 运用自回归滑动平均模型、灰色预测模型、BP神经网络三种模型分别预测全球平均气温,并进行预测精度对比(附代码、数据)
  16. 谈谈UCloud保障数据安全的七种“武器”
  17. 小知识------SATA
  18. export PATHONPATH的用法
  19. 【spring的使用方法】
  20. 论文排版2-Latex排版

热门文章

  1. 开发文档chm文件打不开
  2. wps如何只让他显示3级标题_wps文字怎样设置多级标题
  3. Ubuntu下录制gif动图
  4. 微信添加好友查找失败服务器繁忙,微信加载联系人失败_微信添加好友失败有哪些原因...
  5. vue3.Vue实例
  6. 【1】嵌入式TCP/IP协议——————Art-Net调试工具 DMX-Workshop
  7. 关于HTML页面跳转的5种方法分享。
  8. 一款快速搭建局域网http服务器的神器
  9. WebLogic安装教程
  10. 药物临床试验数据递交FDA的规定