微信公众号调用腾讯地图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接口列表，凡是要调用的接口都需要传进来，调用地图接口
})

2. 通过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', // 在查看位置界面底部显示的超链接,可点击跳转
// })
})

3. 生成时间戳、随机字符串

timestamp: +new Date(), //签名时间戳
nonceStr: Math.random().toString(16).substr(2), //生成签名的随机串

4. 获取jsapi_ticket: 说明文档
5. 获取token：说明文档
6. 生成签名：说明文档

将timestamp、nonceStr、jsapi_ticket、token按照要求排列通过sha1签名算法生成签名，签名正确才可调用微信api

7. 校验签名：网址
8. 在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接口列表，凡是要调用的接口都需要传进来，调用地图接口
})

9. 校验成功后调用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' // 在查看位置界面底部显示的超链接,可点击跳转
})

10. 完整代码

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)
            }
  }