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

article/2025/8/20 7:34:20

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

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

        1、发现问题:

        图1.1

         图1.2

        在企业微信h5开发之前,必须引入两份js(如上图1.1和图1.2),分别是jweixin-1.2.0.jsjwxwork-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

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


http://chatgpt.dhexx.cn/article/cehjrdjM.shtml

相关文章

微信H5页面前端开发,大多数人都会遇到的几个兼容性坑(转载)

1、ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是io…

微信H5开发(二)

这篇主要讲解微信H5 常用到的微信模块和微信文件的引入及微信公众号、微信商务平台、微信开放平台的相关配置。 第一次使用微信开发文档的时候,感觉文档里面写的内容不算太难,但在实际开发中会碰到很多预想不到的问题。 微信开放平台、微信商务平台 有…

H5微信网页开发总结(授权,分享,地图)

H5微信网页开发总结(网页授权,JS-SDK分享、地图) 目录: 网页授权分享地图 参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 一:网页授权 目的&#xff1…

微信H5开发(一)

H5开发,一般是指移动端的页面开发。移动端可分为app和普通浏览页面。从嵌入的环境来归类:可以分为app、微信H5及手机浏览器里面打开的页面。 以前粗略的涉略过h5开发的一些知识,感觉H5并不是很难。在这半年内,接手并完成了两个微…

app推广渠道数据统计Xintall

APP推广时需要统计不同渠道带来的用户量,这个怎么做到 我们在做一款app推广的时后,经常会遇到一个问题,比如你花了一大笔预算去给自家开发的App做广告推广,却无法得知不同的广告素材、不同的广告位、不同的推广平台,各…

还在为推广发愁?这里有一份活动推广渠道清单请查收

对于运营来说,用户量和收入是两个最关键的指标。我们希望更多的用户留在我们的产品中,新用户的留存更高,老用户也拥有较高的活跃度,用户量起来了,收入的提升也变的容易了许多。而用户分为新用户和老用户,本文列举了针对老用户推广渠道,以游戏行业为例,其他行业可以触类…

浅谈游戏系统

浅谈游戏系统 某日,Brandon突发奇想(脑子抽了)买了《异度之刃2》开始游玩,虽然画质不如原神,但他还是沉下心来连续游玩了10个小时。”这游戏战斗系统怎么样?“ 舍友随口一问瞬间让Brandon摸不着头脑&#x…

App全渠道推广统计方案

做过 App 运营岗位,肯定提过类似的需求: 自然新增渠道:自然新增的用户,想知道他们都是从哪下载了 App,以为初步分析下载原因,好在后续提供个性化推荐等服务。H5 推广渠道:开展活动需要分发大量…

浅析APP应用内及新媒体类推广渠道

之前我写了一篇关于APP用户数据分析的文章,提到过用户来源的问题。APP的下载注册用户来自线上线下各种渠道,可能是在某个常逛的网站上看到APP投放的广告产生了兴趣;也有可能是在朋友圈看到了朋友转的APP活动链接从而被吸引…… 这些都是通过…

app推广渠道数据统计

APP推广时需要统计不同渠道带来的用户量,这个怎么做到 我们在做一款app推广的时后,经常会遇到一个问题,比如你花了一大笔预算去给自家开发的App做广告推广,却无法得知不同的广告素材、不同的广告位、不同的推广平台,各…

抖音最常见的付费与免费推广渠道有哪些?3+6推广技巧干货!丨国仁网络

直播作为全新的互动传播方式,带来了互联网全新盛会的同时,也开启了企业新兴传播媒介——直播营销。直播营销为企业带来更全面的潜在客户,帮助企业更好营销。 然而,在互联网营销中,任何营销方式和工具模式,都需要推广,否则直播内容再好、主播再有颜值优势,其营销效果也会…

推广渠道如何分析?

【面试题】 有两个Excel表是A、B两个渠道推广导出的玩家用户明细数据,自选分析角度,产出数据分析报告。(某游戏公司面试题) 渠道A的玩家 渠道B的玩家 【参考答案】 1.分析思路 研究推广渠道A与B的的推广效果,以及渠道用…

渠道触点归因、推广来源追踪

消费者触点 消费者与企业的产品或服务、品牌、内容或信息发生接触的任意位置。触点作为用户获取来源叫渠道。 触点归因 研究如何获客贡献在参与的各个触点或渠道间进行分配的过程。 归因作用 客观评价触点或渠道的价值与贡献,尤其是发现那些被埋没的真相&#xf…

如何提升游戏吸引力——选对推广渠道就是成功的一半

2017全年,我国网络游戏营收约为2011亿元,而手游占据了55.8%的份额,全年营业收入约为1122.1亿元,同比增长38.5%。尽管移动游戏进入存量市场阶段,巨大的市场规模,仍吸引着手游开发商下场瓜分蛋糕。 然而,仅仅半年时间,国内手游市场的风向就一变再变。MOBA和“吃鸡”你方…

怎么做好游戏推广运营

游戏推广有两大类方法:一种是推,一种是引;前者可以快速见效,所以绝大多数进入游戏行业的人首选想到的是如何去找玩家,发链接,推游戏;但是,这种做法在先天上存在不足之处,…

教你做代理,你必须掌握的4种游戏代理平台推广小妙招

目前随着游戏市场的不断发展,游戏代理项目也随之呈爆发式增长,但有很多代理商因为初次接触游戏代理项目,所以在代理后并不知道如何去拓展拉新玩家的渠道,但如果只是依靠老玩家去不断氪金来获取盈利的话也是不现实的,所…

人脸识别相关及其内部原理

整理并翻译自吴恩达深度学习视频,卷及神经网络第四章4.1-4.5,有所详略。 人脸验证和人脸识别 Verification与Recognition的差异: 验证: 输入图像,名字/ID输出输入的图像是否和输入的名字/ID是同一个人 这是个1:1问…

人脸识别实践(1) - 基本原理与设计思路

写在前面 随着时代的高速发展,视频监控等基础设施越来越完备,计算机视觉也在各行各业开始发挥出更大的效用,而这一领域中大家最熟知的就是刷脸支付,现在大家享受着科技带来的便利。还有我们乘坐高铁,进站前刷身份证然后…

计算机识别人脸原理,人脸识别:原理、方法与技术

人脸识别:原理、方法与技术 语音 编辑 锁定 讨论 上传视频 《人脸识别:原理、方法与技术》是2010年2月1日科学出版社出版的图书。 《人脸识别:原理、方法与技术》主要介绍人脸识别技术的基本原理、研究内容、研究方法,以及已有的研…

OpenCV人脸识别(1)原理介绍

前言 本系列博客学习如何使用OpenCV来执行面部识别。 为了构建人脸识别系统,我们首先进行人脸检测,使用深度学习从每个人脸提取人脸特征,在提取到特征上训练人脸识别模型,然后用OpenCV识别图像和视频流中的人脸。 这里提取人脸特…