可可素材资源插件在微信内访问下载支持提示在浏览器打开

迪巴拉 · 发表于 2021-12-25 23:21:37

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

安卓微信内访问素材站点，点击下载附件，不支持ZIP等压缩包的下载，会无法访问，照成会员浪费下载次数等。
有一个解决的方案，就是判断在微信内访问时候，点击下载会提示一个弹层提示的判断。

如下图：
可可素材资源插件在微信内访问下载支持提示在浏览器打开可可,素材,资源,插件,微信

可可素材资源插件在微信内访问下载支持提示在浏览器打开可可,素材,资源,插件,微信

一、首先在下面文件加入代码
keke_down/template/touch/bottom.htm

代码：

id="JdownApp"

复制代码

<div class="wxtip" id="JweixinTip"><span class="wxtip-icon"></span><p class="wxtip-txt">手机无法下载压缩包格式文件<br/>建议右上角···在浏览器打开<br/>或者复制链接发送到电脑打开下载素材</p></div>

复制代码

加入位置如下图：

二、然后在CSS加入代码
/keke_down/template/css/mobile/view.css

代码：加在文件末尾处就可以

.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}.wxtip-icon{width: 52px; height: 67px; background: url(weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;}.wxtip-txt{margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}

复制代码

三、最后再JS里面加入代码
/keke_down/template/js/mobile/view.js

代码：加在文件末尾处就可以

function weixinTip(ele){ var ua = navigator.userAgent; var isWeixin = !!/MicroMessenger/i.test(ua); if(isWeixin){ ele.onclick=function(e){ window.event? window.event.returnValue = false : e.preventDefault(); document.getElementById('JweixinTip').style.display='block'; } document.getElementById('JweixinTip').onclick=function(){ this.style.display='none'; } }}var btn1 = document.getElementById('JdownApp');//下载一weixinTip(btn1);

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

发表于 2022-6-21 18:38:07

我看不错噢谢谢楼主！dz插件网越来越好！

Discuz智能体 · 发表于 2025-3-17 16:59:35

要实现微信内访问时提示用户在浏览器中打开的功能，可以按照以下步骤进行修改和添加代码：

### 一、在 `keke_down/template/touch/bottom.htm` 文件中加入提示弹层的 HTML 代码

在 `bottom.htm` 文件中合适的位置（例如在页面底部）加入以下代码：

<div id="JweixinTip" class="wxtip" style="display:none;">
<div class="wxtip-icon"></div>
<div class="wxtip-txt">手机无法下载压缩包格式文件，建议右上角···在浏览器打开或者复制链接发送到电脑打开下载素材</div>
</div>

复制代码

### 二、在 `/keke_down/template/css/mobile/view.css` 文件中加入样式代码

在 `view.css` 文件的末尾处加入以下 CSS 代码：

.wxtip {
background: rgba(0,0,0,0.8);
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 998;
display: none;
}
.wxtip-icon {
width: 52px;
height: 67px;
background: url(weixin-tip.png) no-repeat;
display: block;
position: absolute;
right: 20px;
top: 20px;
}
.wxtip-txt {
margin-top: 107px;
color: #fff;
font-size: 16px;
line-height: 1.5;
}

复制代码

### 三、在 `/keke_down/template/js/mobile/view.js` 文件中加入 JavaScript 代码

在 `view.js` 文件的末尾处加入以下 JavaScript 代码：

function weixinTip(ele) {
var ua = navigator.userAgent;
var isWeixin = !!/MicroMessenger/i.test(ua);
if (isWeixin) {
ele.onclick = function(e) {
window.event ? window.event.returnValue = false : e.preventDefault();
document.getElementById('JweixinTip').style.display = 'block';
}
document.getElementById('JweixinTip').onclick = function() {
this.style.display = 'none';
}
}
}
var btn1 = document.getElementById('JdownApp'); // 下载按钮
weixinTip(btn1);

复制代码

### 四、确保图片资源 `weixin-tip.png` 存在

确保在 `/keke_down/template/css/mobile/` 目录下存在 `weixin-tip.png` 图片文件，或者你可以根据实际路径修改 CSS 中的 `background: url(weixin-tip.png)` 路径。

### 五、测试功能

完成以上步骤后，你可以在微信内访问站点，点击下载按钮时，如果是在微信浏览器中访问，会弹出提示层，提示用户在浏览器中打开或复制链接到电脑下载。

### 注意事项

1. **兼容性**：确保代码在不同版本的微信浏览器中都能正常工作。
2. **用户体验**：提示层的样式和内容可以根据实际需求进行调整，确保用户能够清晰地理解提示信息。
3. **图片路径**：确保 `weixin-tip.png` 图片路径正确，避免因路径问题导致图片无法显示。

通过以上步骤，你可以实现在微信内访问时提示用户在浏览器中打开的功能，从而避免因微信浏览器不支持压缩包下载而导致的问题。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。