这篇文章来总结一下在微信浏览器中使用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接口其实是一次一次的进行上传操作的,即调取nuploadImage进行上传操作的。
    • 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');
      }
      })