uniapp H5 嵌入企业微信 调选人接口(前端)

新手学堂037

uniapp H5 嵌入企业微信 调选人接口(前端),第1张

新建了一个uniapp项目  根据 企业微信API 文档 可知只需调用2次接口就能完成该功能 但在实际的开发中 却遇到了很多问题  特此记录下来

首先确保在企微后台都添加了相关应用并配置好了可信域名 后端接口完善

调用企业微信接口时 在企业微信浏览器上调试  企业微信调试

根据企业微信API文档 发现只需调用 wxagentConfig 和相关的接口就可以  但是请注意企业微信3024及以后版本才能直接调用wxagentConfig   否则要先确保wxconfig调用成功

根据api文档 新建一个js文件 并将需要引用的接口整理出来

根据文档所讲 首先要引入jssdk 这里有个坑

<script src="https://openworkweixinqqcom/wwopen/js/jwxwork-100js"></script>

最后发现在mac windows iphone android不同设备上 有些能调用成功 有些会报错

最后查询了资料  说可能是uniapp内置的变量与jssdk变量名冲突  遂改用 jWeixinagentConfig   为适应不同端 也改了引入的jssdk  所以引用下面两个

<script src="//reswxqqcom/open/js/jweixin-120js"></script>

<script src="https://openworkweixinqqcom/wwopen/js/jwxwork-100js"></script>

如果企微后台没有配好相关配置 在调用agentConfig的时候会报错  直接将 里面的链接打开 就能看到错误码对应的错误信息

然后后面调取选人接口的时候 发现企业微信在windows android  mac上面是可以的 但在iphone上是不行的 alert 和unishowToast 在接口success和fail的时候 都没有触发 通过wxcheckJsApi 去验证也是没有触发  最后只能通过console去打印  最后发现根本就没走到agentConfig 说明iphone这边没有用到jssdk对象  最后是又将 jWeixinagentConfig 改为 wxagentConfig 然后iphone可以了 其他端又不行了

(这里卡了我一个下午  查阅了很多资料 像npm i wxwork-jsapi 去引jssdk  或者每次调接口都先agentConfig成功后调相应接口 都没用  说明两个问题 1企业微信文档上说的是用cdn的方式引自有一定的道理 2页面进来 先agentConfig 后面需要接口单独再调 和需要接口时 先agentConfig成功再调单独接口 都是可以的)

最后根据测试得出要判断当前设备是什么端 再选择用 jWeixinagentConfig 还是 wxagentConfig 这样就解决了问题

完整页面如下

效果

企业微信浏览器本地调试:

manifestjson  将https 去掉勾选

将apiBaseUrl改成本地

打开企业微信 调成debug模式 输入 地址http://localhost:8080/xxxx

1、在微信公众平台创建H5页面,打开编辑页面。

2、在编辑页面上方的菜单栏中选择“设置”,进入“网页授权设置”页面。

3、在“网页授权设置”页面中,将“JS接口安全域名”设置为该H5页面的域名。

4、在“JS接口安全域名”设置成功后,返回编辑页面,点击“分享设置”按钮。

5、在“分享设置”页面中,将“分享链接”选项关闭,保存并发布H5页面即可。这样,在微信分享H5页面时,就不会自动添加链接了。注意,如果你需要在H5页面中添加跳转链接,可以在页面中添加按钮或者链接元素,并在点击时使用JavaScript代码实现跳转。

我想先放个图,因为这句话让我陷入了深深的沉思……

我只想说刚刚开始读还读的通,再读几遍就有点迷茫了。。

基本步骤在官方文档中,还算是人能读通的,我就直接复制过来了

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

在需要调用JS接口的页面引入如下JS文件,(支持https): http://reswxqqcom/open/js/jweixin-160js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问: http://res2wxqqcom/open/js/jweixin-160js (支持https)。

备注:支持使用 AMD/CMD 标准模块加载方法加载

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用( 同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用 ,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android62中修复)。

那么问题来了,我们再看文章刚开始我放的那个图,如果是同一个公众号,也就是只有一个appid和密钥的话,这里生成的一些参数还可以配置成功吗?

那个图中文档上说如果url变化的话需要在每次变化的时候调用。什么叫每次变化的时候调用,我不同直播h5页面路径本来就是不同啊。网上说的是在前端vue的路由中进行配置注入。

vue我不太懂,如果是不同项目下的呢?那我就用个蠢蠢的方法,直接在前端调用接口,这个接口,我在后端复制完全一样的来,命名为2,3,4,这样是不是也可以说在url变化的时候调用?我调用不同接口。。。靠,一开始我也不知道能不能行,神奇的是居然还真可以。。

我之前还试了一下不同access_token调用ticket,由于这两个参数都有有效期,结果获取到的ticket居然一样,然后配置失败。

接着我重新获取一个ticket,配置还是失败。

所以我就直接复制不同的接口,前端不同项目调用不同接口就行了。

分享功能需要对接接口,不同的平台需要不同的KEY,需要注册为开发者才能获取KEY。

分享按钮不一定非要自己写,可以通过第三方的如百度分享实现。

如果你的H5是通过第三方那种模块式操作的话,里面一般都自带分享功能。

自己写的话,百度分享是最快捷的了。