微信jssdk的使用（通过接口读取GPS经纬度，通过接口上传图片）

一、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

二、引入JS文件

三、通过config接口注入权限验证配置

（由于有些属性需要异步，所以可以使用action通过api来获得各个值，固定不变的可以放在state中，再将这些值在mutation中赋值给config）

官方config需要的配置信息如下。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

 四、通过ready接口处理成功验证

wx.ready(function(){
    
});

config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

五、通过error接口处理失败验证

wx.error(function(res){

});

config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 

 

以上为配置，配置了之后就可以使用微信的一些接口了。

下面挑几个示例来演示接口。

1.通过接口来获得地理坐标

mLocation (state, payload) {
    wx.getLocation({
      type: 'wgs84',
      // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
      success: function (res) {
        console.log(res)
        alert(res.longitude)
      }
    })
  },

然后再在需要使用的vue页面引用该函数。

ps：获得的地址为wgs84的gps坐标。百度、谷歌等地图所需要的坐标与wgs84的坐标有些差距，需要用一些函数来转换。

 

2.通过接口来上传图片

upPic (state, payload) {
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        state.images.localId = res.localIds
        // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        alert('选择了' + res.localIds.length + '张图片')
        if (state.images.localId.length === 0) {
          alert('请先选择图片')
          return
        }
        var i = 0
        var length = state.images.localId.length
        state.images.serverId = []
        function upload () {
          wx.uploadImage({
            localId: state.images.localId[i], // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
              i++
              alert('upload:' + i + '/' + length)
              state.images.localId.push(res.serverId)// 返回图片的服务器端ID
              if (i < length) {
                upload()
              }
            },
            fail: function (res) {
              console.log(res)
            }
          })
        }
        upload()
      }
    })
  },

在state中声明一个数组images{localId：[], serverId:[]}