微信公众号调用腾讯地图api

微信公众号项目

测试号管理

项目进行阶段中,需要进行调试,可以申请微信的测试号功能(测试号)

  1. 申请之后会有appID以及appsecret
  2. 配置js接口安全域名
    1. 可以设置本地域名(可以使用ip地址,上线项目只能使用域名不能使用ip地址(不需要前面http部分:192.168.3.196:9020)
    2. 扫码关注测试公众号
    3. 在体验接口权限表中:网页服务->网页账号->网页授权获取用户基本信息点击修改
      image-20210318152103144.png)]

首页获取用户信息

第一步:用户同意授权,获取code

  • 设置回调页面:(用户同意授权后会跳转的页面) 需要对url进行编码
const callbackURL = encodeURIComponent(`http://192.168.3.196:9020/#/binding`
  • 设置appId,state可选,重定向后会带上state参数
const redirectURI = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${callbackURL}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`

  • 从url中获取code
http://192.168.3.196:9020/?code=0517rjll242IG64UC9nl25adxX17rjlV&state=1#/eventDetails

第二步:通过code换取网页授权access_token(最好后台处理

  • 通过url获取access_token
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
  • 返回JSON数据包
{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

第三部:刷新access_token(如果需要)

  • 由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
  • 返回JSON数据包
{ 
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

第四步:拉取用户信息(如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了)

http:GET(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
  • 返回JSON数据包
{   
  "openid": "OPENID",
  "nickname": NICKNAME,
  "sex": 1,
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY", 			   "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

调取微信地图API

第一步:引入jssdk

npm i weixin-js-sdk

第二步:main.js中使用jssdk

//引入微信jssdk
import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx

第三步:配置config

  1. 配置config,所有需要使用JS-SDK的页面必须先注入配置信息
// 微信jdk配置
this.$wx.config({
  beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: this.appid, // 必填,企业微信的corpID
  timestamp: this.timestamp, // 必填,生成签名的时间戳
  nonceStr: this.nonceStr, // 必填,生成签名的随机串
  signature: this.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
  jsApiList: ['openLocation'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来,调用地图接口
})
  1. 通过ready接口处理成功验证(config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。)
this.$wx.ready(() => {
console.log('进入ready函数')
// this.$wx.openLocation({
//   latitude: 23.132006, // 纬度,浮点数,范围为90 ~ -90
//   longitude: 113.377785, // 经度,浮点数,范围为180 ~ -180。
//   name: '测试', // 位置名
//   address: '这是一个测试', // 地址详情说明
//   scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
//   infoUrl: 'http://www.baidu.com', // 在查看位置界面底部显示的超链接,可点击跳转
// })
})
  1. 生成时间戳、随机字符串
timestamp: +new Date(), //签名时间戳
nonceStr: Math.random().toString(16).substr(2), //生成签名的随机串
  1. 获取jsapi_ticket: 说明文档
  2. 获取token:说明文档
  3. 生成签名:说明文档
将timestamp、nonceStr、jsapi_ticket、token按照要求排列通过sha1签名算法生成签名,签名正确才可调用微信api
  1. 校验签名:网址
  2. jsApiList 中填入需要调用的api,需要的都填入
// 微信jdk配置
this.$wx.config({
  beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: this.appid, // 必填,企业微信的corpID
  timestamp: this.timestamp, // 必填,生成签名的时间戳
  nonceStr: this.nonceStr, // 必填,生成签名的随机串
  signature: this.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
  jsApiList: ['openLocation'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来,调用地图接口
})
  1. 校验成功后调用openLocation 方法跳转到腾讯地图

跳转样式只在手机上生效,开发者工具中只会有调用成功提示输出
在这里插入图片描述

this.$wx.openLocation({
  latitude: 29.744899, // 纬度,浮点数,范围为90 ~ -90
  longitude: 106.55495, // 经度,浮点数,范围为180 ~ -180。
  name: '测试', // 位置名
  address: '这是一个测试', // 地址详情说明
  scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大
  infoUrl: 'http://www.baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
})
  1. 完整代码
async mounted() {
  this.init()
  await this.getJsapi()
  // 微信jdk配置
  this.$wx.config({
    beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: this.appid, // 必填,企业微信的corpID
    timestamp: this.timestamp, // 必填,生成签名的时间戳
    nonceStr: this.nonceStr, // 必填,生成签名的随机串
    signature: this.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
    jsApiList: ['openLocation'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来,调用地图接口
  })

  // wx.config成功后会走wx.ready,失败会走wx.error
  this.$wx.ready(() => {
    console.log('进入ready函数')
    // this.$wx.openLocation({
    //   latitude: 23.132006, // 纬度,浮点数,范围为90 ~ -90
    //   longitude: 113.377785, // 经度,浮点数,范围为180 ~ -180。
    //   name: '测试', // 位置名
    //   address: '这是一个测试', // 地址详情说明
    //   scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
    //   infoUrl: 'http://www.baidu.com', // 在查看位置界面底部显示的超链接,可点击跳转
    // })
  })
  this.$wx.error(res => {
    alert('错误信息' + JSON.stringify(res))
  })
},
  methods: {
    init() {
      // console.log(AMap, '123')
      const map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        resizeEnable: true,
        zoom: 10
      })
      },
        navigation() {
          console.log('导航')
          this.$wx.openLocation({
            latitude: 29.744899, // 纬度,浮点数,范围为90 ~ -90
            longitude: 106.55495, // 经度,浮点数,范围为180 ~ -180。
            name: '测试', // 位置名
            address: '这是一个测试', // 地址详情说明
            scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大
            infoUrl: 'http://www.baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
          })
        },
          getUrl() {
            let url = window.location.href
            this.url = url.split('#')[0]
          },

            async getJsapi() {
              //获取ticket
              const res = await getJsapiTicket()
              this.getUrl()
              this.jsapi_ticket = res.data

              const params = {
                jsapiTicket: this.jsapi_ticket,
                timestamp: this.timestamp,
                noncestr: this.nonceStr,
                url: this.url
              }
              //获取签名
              this.signature = await getSignature(params)

              console.log('nonceStr:' + this.nonceStr)
              console.log('jsapi_ticket:' + this.jsapi_ticket)
              console.log('timestamp:' + this.timestamp)
              console.log('url:' + this.url)
              console.log('signature:' + this.signature)
            }
  }

你可能感兴趣的:(html5,javascript,vue.js,前端)