移动端vue项目中调用微信拍照、地址、分享等功能

我们在做移动端项目时，可能会遇到一些照片上传、获取当前地址、或者将页面分享给朋友，微信扫一扫等功能。微信网页开发文档中就提供了很多API，我们只要调用方法就可以，完全不用自己写，也不需要其他专门的插件。

image.png

image.png

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力。

比如我要实现的功能是，在页面中获取当前位置信息。以下5个步骤是必须的（参考微信网页开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html）

image.png

image.png

这是步骤二

安装 wx-js-sdk

npm i wx-js-sdk -S

引入wx-js-sdk

import wx from 'weixin-js-sdk'

以下是将步骤三、四、五封装好的方法。

const wxRegister = () => {
  return new Promise((resolve, reject) => {
    let data = {
      URL: window.location.href.split('#')[0] //参数URL必须是动态获取的，.split('#')[0]也是必须的(无论当前url上是否存在#号)
    }
    //调用后端提供的接口，获取验证配置信息，此处的res是后端返回的数据
    api.getJsConfig(data).then(res => {
      //步骤三：通过config接口注入权限验证配置
      wx.config({
         debug: false, // 是否开启调试模式
         appId: res.appId, // 必填，公众号的唯一标识
         timestamp: res.timestamp, // 必填，生成签名的时间戳
         nonceStr: res.nonceStr, // 必填，生成签名的随机串
         signature: res.signature, // 必填，签名，见附录1
         jsApiList: [ //必填，需要使用的JS接口列表（openLocation，getLocation这两个是微信提供来获取地理位置的接口，可以根据需求改为分享、拍照等接口）
           'openLocation',
           'getLocation'
         ] 
      })
      
      //步骤四：通过ready接口处理成功验证
      wx.ready(res => {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        resolve(res) //此处验证成功就resolve出去，去执行调用获取地址的接口wx.getLocation(），或者其他功能
      })
      
      //步骤五：通过error接口处理失败验证
      wx.error(err => {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        reject(err)
      })
      
    }).catch((error) => {
      console.log('请求接口出错',error)
    })
  })
}

注意：步骤三会遇到各种各样的报错，可以参考文档中的附录5-常见错误及解决方法

image.png

接着就是调用获取地理位置的接口啦，wx.getLocation()是文档提供的接口，如下：

image.png

这个接口获取到的是经纬度，但是我想要展示的是具体的城市，所以做了一些修改。

//获取微信定位
const getLocation = () => {
  wxRegister().then(res => {
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latLng = new qq.maps.LatLng(res.latitude, res.longitude); //经度，纬度
        var geocoder = new qq.maps.Geocoder({ //调用腾讯地图api
          complete:function(result){
            localStorage.setItem('currentCity', result.detail.addressComponents.city)
            store.commit('setCity', result.detail.addressComponents.city)
          }
        });
        geocoder.getAddress(latLng); //将经纬度转换为对相应的城市
      },
      cancel: function (res) {
        alert('用户拒绝授权获取地理位置');
      }
    });
  }).catch(err => {
    alert(err.errMsg)
  })
}

最后，在需要的页面中调用getLocation()方法即可。

PS:调用腾讯地图API，是为了将经纬度转换为对相应的城市。需要在index.html中引入腾讯地图api文件，如：

image.png

以上。