阅读 631

微信小程序预览pdf、打开外链

1. 预览文件(pdf为例)

本来按照大多数写法,先下载,再打开即可实现需求,but发了体验版神奇的发现,分享或者发送给朋友之后文件的后缀就没了,然后导致手机打不开,so这是微信小程序的bug还是自己的问题呢,emmmm,肯定是自己的bug啦,你看其他小程序都可以分享的.....


// 小程序图片下载并预览 
/**
 * 
 * @param url 图片地址
 * @returns 
 */
export function conmmonPreviewIOS(url: string) {
  const FileSystemManager = wx.getFileSystemManager()
  return (
    Taro.downloadFile({   // 先下载 
      url: url,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        const Path = res.tempFilePath  // 拿到临时文件路径
        let suffixIndex = Path.lastIndexOf('.');
        let suffix = Path.slice(suffixIndex,);
        FileSystemManager.saveFile({ // 用系统方法保存临时文件
          tempFilePath: Path,
          filePath: `${wx.env.USER_DATA_PATH}/${new Date().getTime()}${suffix}`,  // 文件名用时间戳
          success: (res) => {
            let savedFilePath = res.savedFilePath;  // 拿到保存成功后的地址
            wx.openDocument({   // 打开文档 * (再分享的时候就会把保存在本地的文件 分享出去 即上一步操作的 文件 文件名以时间戳的形式展示)
              filePath: savedFilePath,
              showMenu: true,
              fileType: 'pdf',
              success: () => {
                console.log('打开文档成功')
              }
            })
          }
        })
      },
      fail: (res) => {
        console.log(res, wx.env.USER_DATA_PATH, '0')
        wx.showToast({
          title: '下载失败',
          duration: 1000
        })
      }
    })
  )
}
复制代码

2. 打开外部链接 (腾讯会议为例)

一想到打开外链,就想到要借助webView了叭,就直接上方法了,也没啥好说的,也就纯粹记录下,下次直接来copy代码,以免自己忘记....

点击跳外链的事件
 const serviceClick = url => {
    Taro.setStorageSync('webWiewUrl', url)  // 把要跳的链接 存储在storage里
    commonNav({
      url: '/pages/home/courseDetail/components/webView/index', // webView页面的路由
      type: 'navigateTo' // 使用这个可以有个返回按钮在左上角 可以返回到我们自己的页面来
    })
  }
复制代码
webView页面的代码
import React, { Fragment } from 'react'
import { WebView } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'

const WebViewPages = () => {
  const paramsUrl = useRouter().params.url
  let url = paramsUrl || Taro.getStorageSync('webWiewUrl') || ''
  return <Fragment>{url && <WebView src={url} />}</Fragment>
}
export default React.memo(WebViewPages)
复制代码
文章分类
前端
文章标签