新建了一个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是通过第三方那种模块式操作的话,里面一般都自带分享功能。
自己写的话,百度分享是最快捷的了。