您的位置:首页> 日志> 前端技术 正文

我们知道小程序里是不支持HTML元素的,而SA系统后台是使用百度编辑器,储存的代码格式都是html,不能直接用到小程序里,所以在小程序里用到了“wxParse-微信小程序富文本解析自定义组件”,可以很方便的把html解析成<view>,缺点是最多支持12层的html结构。

wxParse组件默认会把A链接解析成view,也包括了附件下载的A链接,就混淆在一起了,需改动wxParse组件的代码,打开wxParse目录下的wxParse.wxml文件。

在代码前面增加JS:

<wxs module="js">
  function indexOf(str, arg) {
    return str.indexOf(arg);
  }
  module.exports.indexOf = indexOf;
</wxs>

 

找到a类型模板,改为如下:

<!--a类型-->
<block wx:elif="{{item.tag == 'a'}}">
  <view bindtap="{{js.indexOf(item.attr.href, '/File/') == -1 ? 'wxParseTagATap' : 'wxParseFileDown'}}" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
    <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
      <template is="wxParse1" data="{{item}}" />
    </block>
  </view>
</block>

这里对附件链接和普通链接做了区分,实现点击函数不一样

 

接着对普通图片、附件的小图标图片,做样式名区分,找到img类型模板,样式、宽度做了区分,改动如下:

<template name="wxParseImg">
  <block wx:if="{{js.indexOf(item.attr.src, 'fileTypeImages') == -1}}">
    <image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}" data-idx="{{item.imgIndex}}" src="{{item.attr.src}}" mode="aspectFit" bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="widthFix" style="width:{{item.width}}px;" />
  </block>
  <block wx:else>
    <image class="{{item.classStr}} wxParse-fileIcon" data-from="{{item.from}}" data-src="{{item.attr.src}}" data-idx="{{item.imgIndex}}" src="{{item.attr.src}}" mode="aspectFit" bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="widthFix" style="width:16px;" />
  </block>
</template>

当然也需要对图标样式优化,这里就不列出来了

 

增加附件下载函数JS文件,download.js,在文章内容页引入js,并在附件点击事件中调用这个函数:downloadFile(url)

function sendPost(cb, data, url) {
  wx.request({
    url: url,
    method: 'POST',
    dataType: "json",
    header: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    data: data,
    success: function (res) {
      cb(res.data)
    },
    fail: function (res) {

    }
  });
}

function sendGet(success, data, url) {
  wx.request({
    url: url,
    method: 'GET',
    header: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    data: data,
    success: function (res) {
      success(res.data);
    },
    fail: function (res) {

    }
  });
}

//保存文件
function saveFile(tempFilePath, fileName, content) {
  wx.getFileSystemManager().saveFile({
    tempFilePath: tempFilePath,
    filePath: wx.env.USER_DATA_PATH + '/' + fileName,
    success: function (res) {
      wx.showModal({
        showCancel: false,
        title: '保存成功',
        content: content + '已保存至“内部存储/tencent/MicroMsg/wxanewfiles/”的随机文件夹下(文件名:' + fileName + ')'
      })
    },
    fail: function (res) {
      wx.showToast({
        title: '保存失败:' + res.errMsg,
        icon: 'none',
        duration: 3000
      })
    }
  })
}

//下载文件
function downloadFile(url) {
  if (url != undefined && url != '') {
    var fileName = url.split('/').slice(-1); //获取文件名称
    const downloadTask = wx.downloadFile({
      url: url,
      success: function (fes) {
        wx.hideLoading();
        wx.showModal({
          title: '提示',
          content: '请选择保存或打开文件',
          cancelText: '保存',
          confirmText: '打开',
          success(res) {
            if (res.confirm) {
              //打开文件
              wx.openDocument({
                filePath: fes.tempFilePath,
                success: function (res) {
                  console.log('打开文档成功');
                },
                fail: function (res) {
                  //文件类型不支持,打开失败后自动保存文件
                  saveFile(fes.tempFilePath, fileName, '不支持的文件类型,')
                }
              })
            } else if (res.cancel) {
              //保存文件
              saveFile(fes.tempFilePath, fileName, '文件')
            }
          }
        })
      },
      fail: function (res) {
        wx.hideLoading();
        wx.showToast({
          title: '下载失败:' + res.errMsg,
          icon: 'none',
          duration: 3000
        })
      }
    })
    downloadTask.onProgressUpdate((res) => {
      wx.showLoading({
        title: '已下载:' + res.progress + '%'
      })
    })
  }
}
// 模块对外暴露的接口
module.exports = {
  sendPost: sendPost,
  sendGet: sendGet,
  saveFile: saveFile,
  downloadFile: downloadFile
}

让用户选择下载保存或直接打开,如文件类型支持则直接打开,否则自动保存,下载限制10M,打开限制50MB

 

文章内容页的JS新增

//链接判断
wxParseTagATap: function (e) {
  app.isExcelLink(e.currentTarget.dataset.src);
},

//下载附件事件
wxParseFileDown: function (e) {
  download.downloadFile(e.currentTarget.dataset.src);
}

 

点击链接的函数,写在了全局js

//判断是站内链接还是站外链接
isExcelLink: function (url) {
  if (url != null && url != '') {
    var domain = this.globalData.DOMAIN.split('/')[2];
    if (url.indexOf(domain) == -1) {
      this.copyExcelLink(url);
    } else {
      //把http替换为https
      url = url.replace(/http:/, 'https:');
      wx.navigateTo({
        url: "/pages/webView/index?url=" + url
      })
    }
  }
},

//复制外链
copyExcelLink: function (url) {
  if (url != null && url != '') {
    wx.setClipboardData({
      data: url,
      success: function (res) {
        wx.hideToast();
        wx.showModal({
          title: '您访问的是外部链接',
          content: '链接地址已复制,请使用浏览器打开',
          showCancel: false
        })
      }
    });
  }
}

站外链接提示复制链接,站内链接则使用<web-view>打开,即打开手机版页面。

 

最终效果截图

  

 

此方法的缺陷有几点,待解决

1、如果是数据迁移的附件,图标和附件链接会识别不了的情况

2、下载附件路径不能指定,且文件夹是随机