小程序web-view在线查看pdf文件

项目中碰到是一个需求是查看列表详情，详情的内容是PDF文件。初步实现思路是点击详情按钮打开内嵌web-view，在web-view内加载PDF文件。实现起来很简单，后续才发现安卓与IOS有差异。IOS可直接打开实现效果。安卓只能下载PDF文件就没有后续了。

1. 实现思路
   先判断当前用户是哪种操作系统，根据两种系统分别处理。IOS不做处理，安卓机型先下载需要查看的PDF文件，然后本地打开。
2. 具体代码

<web-view wx:if="{{ios}}" src="{{url}}"></web-view>

  data: {
    //需要显示的PDF链接
    url:"",
    //当前机型
    ios:true
  },
  onLoad: function (options) {
    this.checkPhone(detail.show_url)
  },
  checkPhone(url){
    let _this = this;
    wx.getSystemInfo({
      success: function(res) {
        //判断当前机型
        if (res.system.indexOf('iOS')!=-1){
          _this.setData({
            url: url
          })
        }else{
          _this.setData({
            ios:false
          })
          wx.downloadFile({
            url: url,
            success(res){
              let path = res.tempFilePath;
              wx.openDocument({
                filePath:path,
                fileType:"pdf",
                success(){
                  wx.navigateBack({
                    delta:1
                  })
                }
              })
            }
          })
        }
      },
    })
  }

注意⚠️：
1. 判断当前机型的时候，要注意iOS（注意大小写，我也是打印res才发现的）。
2. wx.openDocument() 需要指定打开文件类型（fileType:"pdf"），不然没有反应打不开🤡。
3. 打开成功后需要后退一个页面，不然关闭PDF后是会漏出空白页，用户体验比较差。