微信分享链接手机打开白屏

本文描述了在使用Vue.js进行微信分享时遇到的一个问题:分享的页面加载到80%后停滞并出现白屏现象。通过分析发现这是由于微信截断了带有#号的URL造成的。文中给出了具体的解决方案,即将#号后的参数移至前端路由之前。

问题描述:

在做微信分享的时候,出现了一个问题,当一个人将活动分享给好友时,好友在微信中打开页面,页面进度条加载到80%左右时就不动了,之后进度条消失,屏幕无任何显示白屏状态,后台也无错误。

问题原因:

经过不断测试排查,发现是分享链接中的#号引起的!前端使用Vue.js,#是路由,但是微信却将分享出去的链接中#号后面部分截取掉了,导致后面带的分享来源参数被截掉了,页面呈现出一直在加载的状态。

解决方案:

之前的分享链接样子如下,#号后面被微信截掉,导致friendId无法获取

http://demo.xxx.com/dzp/?from=singlemessage#/dzp/project?friendId=151613270061

后来前端经过改造,将链接地址改为如下样子,解决了问题

http://demo.xxx.com/dzp/?friendId=151613270061&from=singlemessage#/dzp/project



更多内容请参见:

http://www.cnblogs.com/mingxinice/p/mingxin.html

### 在 UniApp 微信小程序中点击链接打开 PDF 文件的实现方法 在 UniApp 微信小程序中,可以通过 `uni.downloadFile` 和 `uni.openDocument` 方法实现点击链接打开 PDF 文件的功能。以下是一个完整的实现方案: #### 1. 使用 `uni.downloadFile` 下载文件 通过 `uni.downloadFile` 方法下载指定的 PDF 文件链接,并将其保存为临时文件路径。 ```javascript uni.downloadFile({ url: item.link, // PDF 文件的链接地址 success: function (res) { if (res.statusCode === 200) { var filePath = res.tempFilePath; // 获取临时文件路径 uni.openDocument({ filePath: filePath, showMenu: false, // 是否显示分享菜单[^1] success: function () { console.log('PDF 文件成功打开'); }, fail: function (err) { console.error('PDF 文件打开失败', err); } }); } else { console.error('文件下载失败', res); } }, fail: function (err) { console.error('文件下载失败', err); } }); ``` #### 2. 兼容 Android 和 iOS 平台 由于 Android 和 iOS 平台对 PDF 文件的处理方式不同,需要根据平台差异进行适配。可以使用 `uni.getSystemInfo` 获取当前运行环境的系统信息。 ```javascript uni.getSystemInfo({ success: function (res) { if (res.platform === 'android') { // Android 平台使用 uni.openDocument 打开 PDF 文件 uni.downloadFile({ url: item.link, success: function (res) { if (res.statusCode === 200) { const filePath = res.tempFilePath; uni.openDocument({ filePath: filePath, success: function () { console.log('Android 平台上 PDF 文件成功打开'); }, fail: function (err) { console.error('Android 平台上 PDF 文件打开失败', err); } }); } }, fail: function (err) { console.error('Android 平台上文件下载失败', err); } }); } else if (res.platform === 'ios') { // iOS 平台使用 web-view 组件加载 PDF 文件 uni.navigateTo({ url: `/pages/pdfPreview/pdfPreview?url=${encodeURIComponent(item.link)}` }); } } }); ``` #### 3. 配置合法域名 如果 PDF 文件链接是外部资源,需确保该域名已添加到微信小程序的合法域名列表中[^2]。否则,可能会导致文件无法正常加载或显示白屏问题。 #### 4. PDF 预览页面(适用于 iOS) 对于 iOS 平台,可以通过 `web-view` 组件加载 PDF 文件链接。创建一个独立的页面用于预览 PDF 文件。 **页面结构** ```html <template> <view class="container"> <web-view :src="pdfUrl"></web-view> </view> </template> ``` **页面逻辑** ```javascript <script> export default { data() { return { pdfUrl: '' }; }, onLoad(options) { if (options.url) { this.pdfUrl = decodeURIComponent(options.url); // 解码传递的链接 } } }; </script> ``` **样式** ```css <style scoped> .container { width: 100%; height: 100vh; } </style> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值