javascript
// pages/pdfPreview/pdfPreview.js
Page({
/**
* 页面的初始数据
*/
data: {
// PDF网络地址（请替换为你的实际PDF地址）
monthlyPdfUrl: 'eab8b3e3e4f9637fbcc21859fe1896af.pdf', //https://iot.qiaodu.net/sign/1.pdf
// PDF本地保存路径（缓存用，避免重复下载）
localPdfPath: '',
// PDF自定义文件名
pdfFileName: '2026年1月报表.pdf'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.showShare();
},
/**
* 核心：下载并打开PDF，显示右上角保存/转发菜单
*/
handleOpenMonthlyPdf() {
const {
monthlyPdfUrl,
pdfFileName
} = this.data;
// 显示加载提示
wx.showLoading({
title: 'PDF加载中...',
mask: true // 防止用户重复点击
});
// 1. 定义本地保存路径（使用USER_DATA_PATH，避免临时文件被清理）
const localSavePath = wx.env.USER_DATA_PATH + '/' + pdfFileName;
this.setData({
localPdfPath: localSavePath // 缓存本地路径，供后续转发使用
});
// 2. 下载PDF文件
wx.downloadFile({
url: monthlyPdfUrl, // 网络PDF地址
filePath: localSavePath, // 指定本地保存路径
success: (downloadRes) => {
// 校验下载是否成功（状态码200为成功）
if (downloadRes.statusCode === 200) {
console.log('PDF下载成功，本地路径：', localSavePath);
// 3. 打开PDF并显示右上角菜单（核心：showMenu: true）
wx.openDocument({
filePath: localSavePath, // 本地PDF路径
fileType: 'pdf', // 文件类型指定为PDF
showMenu: true, // 关键参数：显示右上角...菜单（包含保存/转发/收藏）
success: () => {
wx.hideLoading();
wx.showToast({
title: 'PDF打开成功',
icon: 'success',
duration: 1500
});
console.log('PDF预览成功，右上角菜单已显示');
},
fail: (openErr) => {
wx.hideLoading();
wx.showToast({
title: '打开PDF失败',
icon: 'none',
duration: 2000
});
console.error('wx.openDocument 失败：', openErr);
}
});
} else {
wx.hideLoading();
wx.showToast({
title: 'PDF下载失败（非200状态码）',
icon: 'none',
duration: 2000
});
console.error('PDF下载失败，状态码：', downloadRes.statusCode);
}
},
fail: (downloadErr) => {
wx.hideLoading();
wx.showToast({
title: '网络异常，下载失败',
icon: 'none',
duration: 2000
});
console.error('wx.downloadFile 失败：', downloadErr);
}
});
},
/**
* 拓展：主动转发PDF文件
*/
handleShareMonthlyPdf() {
const {
localPdfPath,
pdfFileName
} = this.data;
// 校验本地PDF是否存在
if (!localPdfPath) {
wx.showToast({
title: '请先打开PDF再转发',
icon: 'none',
duration: 2000
});
return;
}
// 主动转发文件
wx.shareFileMessage({
filePath: localPdfPath, // 本地PDF路径
fileName: pdfFileName, // 转发时显示的文件名
success: (shareRes) => {
wx.showToast({
title: 'PDF转发成功',
icon: 'success',
duration: 1500
});
console.log('PDF转发成功：', shareRes);
},
fail: (shareErr) => {
wx.showToast({
title: 'PDF转发失败',
icon: 'none',
duration: 2000
});
console.error('wx.shareFileMessage 失败：', shareErr);
}
});
},
/**
* 页面相关生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 开启朋友圈分享功能
* 监听路由切换/自动执行
*/
showShare() {
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
}
})一、 核心功能概述
该页面主要实现3大核心功能，覆盖了小程序中PDF操作的主流场景：
- 下载网络PDF并缓存到本地（避免重复下载）
- 预览本地PDF并提供右上角保存/转发/收藏菜单
- 主动触发PDF文件转发（支持自定义转发文件名）
- 开启小程序页面的朋友圈+好友分享功能（非PDF文件分享，是页面分享）
二、 代码结构与模块拆解
代码遵循微信小程序Page构造器的标准规范，分为数据定义（data）、生命周期函数、核心业务方法、其他辅助方法四大模块，结构清晰易维护。
1. 数据定义（data对象）
javascript
data: {
monthlyPdfUrl: 'https://xxx', // 网络PDF地址
localPdfPath: '', // 本地PDF缓存路径
pdfFileName: '2026年1月报表.pdf' // 自定义文件名
}monthlyPdfUrl：待下载的PDF网络资源地址，是功能的数据源（需替换为实际有效地址）localPdfPath：用于缓存PDF的本地保存路径，避免重复下载网络资源，提升后续操作效率pdfFileName：自定义文件名，用于本地保存和转发时的文件显示名称，提升用户辨识度
2. 生命周期函数
仅重写了onLoad生命周期，核心作用是页面加载时自动执行showShare()方法，开启页面分享功能，无需用户手动触发，保证分享功能提前就绪。
其他生命周期（onReady/onShow/onHide等）未做自定义逻辑，保持默认实现，预留了扩展空间。
3. 核心业务方法（核心亮点模块）
这是代码的核心价值所在，包含两个核心业务方法，分别对应PDF预览+保存、PDF主动转发功能。
（1） handleOpenMonthlyPdf()：下载+预览+保存PDF（核心核心方法）
该方法是整个页面的核心，实现了"显示加载提示→定义本地路径→下载PDF→校验下载状态→打开预览→隐藏加载提示"的完整链路，逻辑闭环严谨，关键细节如下：
- 用户体验优化：加载提示
调用wx.showLoading并设置mask: true，既给用户明确的"PDF加载中"视觉反馈，又防止用户重复点击触发多次下载，避免资源浪费。 - 本地路径选型：持久化缓存，避免文件丢失
采用wx.env.USER_DATA_PATH作为本地保存根路径，该路径是小程序的持久化用户数据目录，不同于临时文件目录（容易被微信清理），能保证缓存的PDF文件不会被意外删除，后续可直接复用。 - 下载逻辑：指定文件路径，精准控制
使用wx.downloadFile并通过filePath参数手动指定本地保存路径（而非使用默认临时路径），直接将网络PDF下载到预设的持久化目录，同时将路径缓存到localPdfPath，供后续转发使用。 - 下载校验：状态码校验，提升健壮性
下载成功后，通过downloadRes.statusCode === 200校验下载有效性（仅状态码200代表文件下载完整有效），避免因网络异常、资源不存在等导致的"下载成功但文件无效"问题。 - 预览核心：
showMenu: true，开启保存/转发入口
调用wx.openDocument（小程序内置文档预览API）时，关键参数showMenu: true是实现PDF保存的核心：- 该参数会在PDF预览页面的右上角显示"···"菜单
- 菜单内置微信原生的"保存到手机""转发给朋友""收藏"功能，无需开发者自定义实现，降低开发成本
- 异常处理：全链路fail捕获，友好提示
分别对wx.downloadFile（下载失败）和wx.openDocument（打开失败）设置fail回调，隐藏加载提示后，通过wx.showToast（icon: 'none'）给用户明确的文字提示，同时打印错误日志，便于开发者排查问题。
（2） handleShareMonthlyPdf()：主动转发PDF文件
该方法实现了"主动触发PDF文件转发"的功能，补充了wx.openDocument右上角菜单的被动转发场景，关键细节如下：
- 前置校验：避免无效操作
先判断localPdfPath是否为空（即PDF是否已下载缓存），若为空则提示"请先打开PDF再转发"，避免因本地无文件导致的转发失败，提升用户体验。 - 核心API：
wx.shareFileMessage
使用小程序文件转发专用APIwx.shareFileMessage，直接转发本地文件（非页面链接），关键参数：filePath：传入缓存的本地PDF路径（localPdfPath），指定要转发的文件fileName：传入自定义文件名（pdfFileName），确保转发后接收方看到的文件名清晰可识别
- 结果反馈：成功/失败均给出明确提示
无论转发成功或失败，都通过wx.showToast给用户视觉反馈，同时打印日志，便于问题排查。
4. 辅助方法：showShare()
该方法的核心是调用wx.showShareMenu，作用是开启小程序页面的分享功能（非PDF文件分享）：
withShareTicket: true：开启分享票据，便于后续获取分享群信息（如需统计分享效果可复用）menus: ['shareAppMessage', 'shareTimeline']：同时开启"转发给朋友"和"分享到朋友圈"两种页面分享方式- 注意：该方法实现的是页面链接的分享 ，与
handleShareMonthlyPdf()的PDF文件分享是两个不同的功能，前者分享小程序页面入口，后者分享本地PDF文件本身。
三、 关键技术亮点
- 持久化缓存设计 ：选用
wx.env.USER_DATA_PATH作为保存目录，解决了临时文件易被清理的问题，提升了功能稳定性。 - 全链路异常处理 ：对下载、打开、转发等关键步骤均做了
fail回调处理，兼顾用户体验与开发者排查效率，代码健壮性强。 - 功能闭环完整：从"网络下载→本地缓存→预览保存→主动转发"形成完整的PDF操作链路，覆盖用户核心需求，无需额外补充功能即可投入使用。
- 用户体验优化到位：加载提示、重复点击防呆、操作结果反馈、前置校验等细节设计，大幅降低用户操作门槛。
四、 注意事项与扩展方向
1. 注意事项
monthlyPdfUrl需替换为实际有效地址，且该地址需配置到小程序后台的"downloadFile合法域名"中，否则会因跨域限制导致下载失败。wx.shareFileMessage仅支持转发给微信好友，不支持转发到朋友圈（微信小程序限制）。- 本地缓存的PDF文件不会自动清理，若需节省用户存储空间，可增加"清理缓存"功能。
2. 扩展方向
- 增加PDF是否已缓存的判断，若已缓存则直接打开，无需重复下载，提升加载速度。
- 支持多PDF文件切换预览，扩展
data中的文件列表数据即可实现。 - 增加PDF下载进度显示，通过
wx.downloadFile的progress回调实现进度更新。 - 补充"保存到相册"（需获取相册权限）或"删除本地PDF"功能，丰富操作场景。
总结
- 该代码是一份生产级可用的小程序PDF操作页面，功能完整、逻辑严谨、用户体验优秀，可直接复用或少量修改后投入项目使用。
- 核心亮点在于
wx.env.USER_DATA_PATH的持久化缓存、showMenu: true的原生保存功能、全链路异常处理，体现了良好的小程序开发规范。 - 区分了"页面分享"（
showShare）与"文件分享"（handleShareMonthlyPdf）两个不同概念，功能边界清晰，避免混淆。
@漏刻有时