微信开发之路(二)

vux获取本地图片IOS适配

由 漆黑菌 于 2018年09月30日 发布

版本文档不一致

vux算得上是vue微信端开发神器了,非常符合国情。内置了jssdk的插件,但是目前有个小问题,vux中自带的JSSDK插件使用的是1.3.2版本(2018年9月30日),官网的JSSDK版本已经是1.4.0了。在JSSDK文档中明确提到iOS新版webview内核应使用获取本地图片接口来做本地预览功能,并在新版的IOS适配指南指出需要在页面中可通过微信注入的window.wxjs_is_wkwebview变量判断当前使用的webview内核。。然而在1.3.2版本情况中window.wxjs_is_wkwebview变量并不能正确工作,反而应该使用window.__wxjs_is_wkwebview来检测。而且获取本地图片接口getLocalImgData并不需要在wx.config中注册即可使用。

示例代码

此处要注意回调中上下文的问题。

    chooseImage: function (objName) {
        const vm = this
        this.$wechat.chooseImage({
          count: 1, // 选择图片张数
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 图片来源
          success: function (res) {
            // 渲染图片
            vm[objName + 'LocalId'] = res.localIds[0]
            if (window.__wxjs_is_wkwebview) { // 兼容苹果
              vm.$wechat.getLocalImgData({
                localId: vm[objName + 'LocalId'], // 图片的localID
                success: function (res) {
                  vm[objName + 'Url'] = res.localData
                  // localData是图片的base64数据,可以用img标签显示,ios系统必须使用base64显示
                }
              })
            } else {
              vm[objName + 'Url'] = vm[objName + 'LocalId']
            }
            vm.uploadImage(objName)
          }
        })
      },
      uploadImage: function (objName) {
        const vm = this
        this.$wechat.uploadImage({
          localId: vm[objName + 'LocalId'],
          isShowProgressTips: 100,
          success: function (res) {
            vm[objName + 'Id'] = res.serverId // 返回图片的服务器端ID
            console.log('图片微信服务器id为:' + vm[objName + 'Id'])
          }
        })
      },