需求

通过二维码生成 sketch 下载链接，可以扫描下载

问题

初始方案：通过二维码生成 sketch 静态资源链接，然而 用安卓微信是直接解析的，会直接下载文件，用IOS 手机微信扫描后会产生乱码

改进方案

通过二维码生成一个静态 HTML 的页面，并判断“用户代理” 信息，确认是否是微信客户端，从而实现返回不同的文字效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Download</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         html, body {
  15.             height: 100%;
  16.             width: 100%;
  17.         }
  18.         #holder {
  19.             height: 25%;
  20.         }
  21.         #content {
  22.             text-align: center;
  23.         }
  24.         #content p {
  25.             font-size: 20px;
  26.             line-height: 36px;
  27.             margin-bottom: 20px;
  28.         }
  29.         #link {
  30.             display: inline-block;
  31.             width: 80%;
  32.             color: #2D71DB;
  33.             text-align: left;
  34.             font-size: 12px;
  35.             word-break:break-all;
  36.         }
  37.         #link a {
  38.             color: #2D71DB !important;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div id="holder"></div>
  44.     <div id="content">
  45.         <p>
  46.             <span id="tar">请复制网址后使用浏览器下载</span><br>
  47.             或发送下载链接至PC端微信下载
  48.         </p>
  49.         <div id="link">
  50.            https://obs-cn-shanghai.yun.pingan.com/xdc/PAT%20Design%20UI%20Kit%20Orange_V1.1.sketch?response-content-disposition=attachment%3Bfilename%3DPAT%2520Design%2520UI%2520Kit%2520Orange_V1.1.sketch
  51.         </div>
  52.     </div>
  54.     <script>
  55.         var ua = navigator.userAgent.toLocaleLowerCase();
  56.         var isWeixin  = ua.indexOf('micromessenger') != -1;
  58.         var tar = document.getElementById('tar');
  60.         var link = 'https://obs-cn-shanghai.yun.pingan.com/xdc/PAT%20Design%20UI%20Kit%20Orange_V1.1.sketch?response-content-disposition=attachment%3Bfilename%3DPAT%2520Design%2520UI%2520Kit%2520Orange_V1.1.sketch';
  62.         var linkWrap = document.getElementById('link');
  64.         if (!isWeixin) {
  65.             tar.innerText = '可点击直接下载';
  66.             linkWrap.innerHTML = '<a href="' + link + '">' + link + '</a>';
  67.         }
  68.     </script>
  69. </body>
  70. </html>

最终效果

浏览器

二维码生成外链(判断是否是微信扫描） - 图1

微信

二维码生成外链(判断是否是微信扫描） - 图2