h5页面在企业微信内置游览器打开内置地图

需求如下:产品经理希望在系统中添加一个导航功能,在系统中点击导航按钮,调用启动三方的地图软件(高德地图、百度地图等)进行导航。
需求分析:目前系统是打包h5,在企业微信中创建了一个应用,将h5地址挂载到应用上。通过阅读企业微信开发者平台相关文档,需要使用企业微信提供的JS-SDK,借用该SDK可调用企业微信的一些能力,以下是引用官方的概述。

企业微信JS-SDK是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包。
通过使用企业微信JS-SDK,网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用企业业微信分享、扫一扫等企业微信特有的能力,为企业微信用户提供更优质的网页体验。
企业微信JS-SDK开发指南:https://developer.work.weixin.qq.com/document/path/96913

安装

企业微信JS-SDK提供了 npm 和 cdn 两种引入途径。

  • 通过 npm 引入
npm install @wecom/jssdk

安装完成后即可在应用中使用 SDK:

import * as ww from '@wecom/jssdk'
  • 通过 script 标签引入
<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-2.0.2.js"></script>

安装完成后,SDK 会在 window 上定义 ww 对象:

<script>
  alert(ww.SDK_VERSION)
</script>

接口鉴权

调用要求

  • 所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名),且可信域名必须有ICP备案且在管理端验证域名归属。
  • 验证域名归属的方法在企业微信的管理后台“我的应用”里,进入应用,设置应用可信域名。
  • 在调用 JSAPI 前,需要先通过 ww.register 注册当前页面的身份信息。身份信息分为两种:
  1. 企业身份与权限,通过企业签名获得。
  2. 应用(自建/待开发/第三方应用等)身份与权限,通过应用签名获得。
    使用者可根据具体调用的JSAPI所要求的身份权限进行注册即可,应用身份权限 > 企业身份权限。

总结:要想使用JS-SDK,首先需要一个备案过的域名,然后需要在企业微信管理后台设置可信域名,在调用JSAPI之前,需要在调用的页面中注册身份信息。

这里以企业微信注册身份信息举例,应用身份注册也是差不多的流程,区别在于获取ticket的方式有所不同
企业身份注册身份信息流程如下:

  1. 获取access_token
    获取access_token是调用企业微信API接口的第一步,相当于创建了一个登录凭证,其它的业务API接口,都需要依赖于access_token来鉴权调用者身份。
    这个过程需要获取两个参数信息
参数 必须 说明
corpid 企业ID,获取方式参考:术语说明-corpid
corpsecret 应用的凭证密钥,注意应用需要是启用状态,获取方式参考:术语说明-secret

https://developer.work.weixin.qq.com/document/path/91039

  1. 获取jsapi_ticket
    企业的 jsapi_ticket 是企业页面调用企业微信 JS 接口的临时票据,用于企业应用鉴权(getConfigSignature)。
    获取 jsapi_ticket 的接口有非常严格的调用频率限制(一小时内,一个企业最多可获取 400 次,且单个应用不能超过 100 次),开发者必须在自己的后台服务中对 jsapi_ticket 进行缓存。
    正常情况下 jsapi_ticket 的有效期为 7200 秒(2 小时),具体过期时间需要参考接口返回的 expires_in 属性。
    获取企业jsapi_ticket 获取应用jsapi_ticket

  2. 生成签名
    生成 JS-SDK 签名需要用到以下参数:
    jsapi_ticket: 获取方法参考 [获取企业 jsapi_ticket](#获取企业 jsapi_ticket) 和 [获取应用 jsapi_ticket](#获取应用 jsapi_ticket)
    noncestr: 随机字符串
    timestamp: 当前时间戳,单位为秒
    url: 当前页面的 URL,不包含“#”及后面部分

https://developer.work.weixin.qq.com/document/path/96909#签名算法

  1. 注册身份信息
    企业身份注册
ww.register({
  corpId: 'ww7ca4776b2a70000',       // 必填,当前用户企业所属企业ID
  jsApiList: ['getExternalContact'], // 必填,需要使用的JSAPI列表
  getConfigSignature                 // 必填,根据url生成企业签名的回调函数
})

async function getConfigSignature(url) {
  // 根据 url 生成企业签名
  // 生成方法参考 https://developer.work.weixin.qq.com/document/14924
  return { timestamp, nonceStr, signature }
}

接口鉴权一般是需要后端服务去完成,提供给前端一个接口来获取签名,access_token和jsapi_ticket是不能暴漏给前端的。
后端鉴权过程推荐使用WxJava来完成,可以大大缩减对接过程,整个过程都已经封装好,配置好响应的参数,直接调用方法即可

WxJava企业微信开发文档:http://wxjava.fly2you.cn/zh-CN/start/cp/start.html
示例Demo:https://gitee.com/binary/weixin-java-cp-demo

打开内置地图

注册完身份信息后,后面就是调用jsapi了, 这个就比较简单了,麻烦的就是前面的一系列鉴权过程
ww.openLocation(params),坐标系为gcj02

ww.openLocation({
  latitude: 0,
  longitude: 0,
  name: 'name',
  address: 'address',
  scale: 1
})
posted @ 2025-07-22 10:01  Liming_Code  阅读(131)  评论(0)    收藏  举报