这篇文章来总结一下在微信浏览器中使用vue.js开发单页应用是遇到的一些坑。因为配合微信，我们有很多特殊的需求，所以处理起来会有所不同。

  1. 微信分享
  2. 微信图片上传

1. 微信分享

  1. 这里简单把微信分享分成两种情况，一是：进入页面后，需要用户手动点击触发获取签名的按钮，然后再去右上角分享的；二是：进入页面时，自动获取分享签名，用户可以直接右上角分享。
  2. 第一种情况的比较简单，用户主动点击按钮时调取分享签名即可。
  3. 第二种情况稍微麻烦一点，由于单页应用的原因，默认分享的签名是在进入的第一个页面获取的。当进入到其他页面时，即使调用了签名，由于传入的url不合法，导致签名失败，但是这种情况只会出现在Ios操作系统上，Android上并没有出现。当时也找了很多方法，最终的解决方案是：
    1. 进入该页面的方式由vue-router提供的this.$router.push()方法改为location.href的方式，这时签名就可以正常获取了。
    2. 首次进入页面的时候获取一下签名，并且将需要使用的apiList全部一次获取到，以后就不在需要请求签名了。
    3. 推荐使用方法2。
  4. 出现这种情况的原主要是，vue-router使用history模式下，ios微信浏览器会使用单页应用第一次的url去签名，这样签名的url和实际的url不一致，直接导致签名的失败。
  5. 微信提示：
    • 签名用的url必须是调用JS接口页面的完整url。
    • 建议使用encodeURI(url)之后的url作为传入的参数。

2. 微信图片上传

  1. 使用微信的图片上传功能，我们需要用到三个接口:
    1
    2
    3
    4
    5
    const apilist = ['chooseImage', 'uploadImage', 'getLocalImgData']

    // `chooseImage` 这个接口用于选取图片
    // `uploadImage` 这个接口用于上传图片
    // `getLocalImgData` 这个接口用于获取图片信息
  2. api详解：
    • chooseImage：选取图片，主要有三个属性：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      wx.chooseImage({
        count: 1, // 一次最多可以选取的图片数量，默认9；
        sizeType: ['original', 'compressed'], // 使用原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 使用相册还是使用相机拍照，默认二者都有
        success: function (res) {
          // 选取图片 成功的回调
          let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        },
        fail: function (err) {
          // 选取图片 失败的回调
        }
      })
      *：注意count在使用大于1的配置时，uploadImage接口其实是一次一次的进行上传操作的，即调取n次uploadImage进行上传操作的。
    • uploadImage：上传图片到 微信 服务器：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      // 在 chooseImage 成功的回调`success`里面调用该接口
      wx.uploadImage({
        localId: localIds[0], // 注意单张图片上传，多张需要循环多次上传
        isShowProgressTips: 1, // 进度提示，默认1
        success: function (res) {
          // 选取图片 成功的回调
          let serverId = res.serverId; 
          // 微信返回的`serverId`
          // 上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id

          // 兼容新处理，针对不同的 `webview` 的处理
          if (window.wxjs_is_wkwebview) {
            wx.getLocalImgData({
              // 这里的操作在 `getLocalImgData`
            })
          } else {
            let src = localId; // 直接用于 `img` 标签的 `src` 属性显示图片
          }
        },
        fail: function (err) {
          // 选取图片 失败的回调
        }
      })
    • getLocalImgData：通过 localId 获取本地图片，用于页面展示。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      // 在 uploadImage 成功的回调`success`里面调用该接口
      wx.getLocalImgData({
        localId: localId,
        success: function (res) {
          let localData = res.localData;
          // 直接用于 `img` 标签的 `src` 属性显示图片
          let src = localData.replace('jgp', 'jpeg');
        }
      })