前端

前端

Quasar中的前端代码转译

使用 Quasar 时,如何完成浏览器兼容性的配置。 制定兼容范围 在进行实际配置前,首先必须确定要支持浏览器的版本,而确定浏览器版本则需要先明确业务对象的情况。 为什么不干脆把标准定的越高越好呢?比如支持100%的用户。这是因为支持率越高,可用的新语法越少,意味着更多的转译代码和 polyfill,这会带来额外的代码量,从而导致下载数据量增加,以及运行速度变慢的问题,为了0.01%影响99.99%用户的体验并增加他们的流量开销,是否合适呢?这就需要根据实际业务进行取舍和平衡。 比如我们的业务对象既有企业用户,也有公众用户,企业用户主要使用钉钉,并可对其PC浏览器进行要求,而公众用户主要使用微信。 确定常用浏览器版本 PC浏览器可以指定,那么对浏览器版本就不需要过多考虑,但是部分客户还有XP系统,那么也就确定了 Chrome 浏览内核的版本不可以超过 49; 微信用户可能在手机登录,也可能在PC登录,而PC中的微信内置是QQ浏览器9,其内核版本是 Chrome 53; 电脑端的钉钉内置浏览器已经是 Chrome 91; 手机端的话考虑到安卓手机使

By 熊立丁

前端

用 Prettier 处理 Pug 文件

Prettier 是一个新兴的代码格式化程序,但目前支持的语言相对有限,特别对于混合文件的处理仍在比较初级的阶段。 因此,针对 Riot 这种 HTML/Pug 中混合了 JavaScript 和 CSS 的文件,要对其中的代码进行格式化,必须先将文件分解,分别用 Prettier 处理后,再重新合并。 相比 HTML,处理 Pug 这种由缩进决定包含关系的文件倒是更简单,很容易通过一些简单粗暴的方法进行分解。 Prettier 本身也是一种广受欢迎的粗暴解决方案。它的主要动机就是通过将一种固定格式强加给代码,消灭不同风格间的优劣之辫,节约程序员在争辩中浪费的时间,集中精力办实事。因为大多数时候,主流风格间并没有明显的好坏,只是个人喜好不同。 文件分解 const split = (tag) => { var pug, script, style; [pug, script] = tag.split(/\n

By 熊立丁

前端

用加载画面改善用户体验

毋庸置疑,单页面应用(Single Page Application,以下简称 SPA)正在变得越来越流行。SPA 具有前后端分离、接口重用度高、操作响应快速等优点,在用户体验上相比传统的网站也更接近原生应用。但与此同时,SPA 的体积却在不断增大,导致加载所需的时间越来越长,而这个问题在微信里面特别突出。 微信中的加载问题 首先,微信通常安装在移动设备上,网络的速度并不像固定宽带那么有保障,虽然 4G 已经普及,但总有些地方或某些时候网络没那么理想。在网络状况不佳时,加载较大的 SPA 耗时较长,屏幕表现为长时间白屏。 然后,微信对网页的缓存机制跟一般的浏览器不同。即使你没在服务器上进行特别的配置,它默认就会缓存 html、css、javascript 等它认为是“静态”的内容,而且在缓存有效期间“拒绝”去服务器上看看是否有更新,给不少新接触微信开发的程序员造成困扰。反过来,当你希望它将某个内容长期缓存,并通过响应头部的信息明确告知时,它也不能很好的遵守。说实话,

By 熊立丁

前端

Hash, PushState 和微信 JSSDK 授权

最近将 riot.js 升级到了 3.0,并用上了新版本的 riot-route,原先用了一年多的 2.2.4 版本内置的 riot.route 只支持 hash 形式的 SPA 单页面应用,riot-route 则支持 pushState。 Hash 方式有个缺点,就是服务器不知道地址栏中 # 之后的内容,放在微信里,就导致了未授权用户授权后想返回原界面需要借助 JS 来实现,导致历史记录多了一条,用户按返回键无法退出(返回上一页面后又被 JS “前进”了)。 PushState 方式就没有这个问题,可以直接用 HTTP 302 重定向过来,不影响历史记录和返回按钮功能。 于是在新项目中开始采用 pushState 方式。 不过等到应用到了微信环境中,又冒出来一个问题,通过

By 熊立丁

前端

微信 JSSDK 在 Android 和 iOS 的一处不一致

今天在使用微信的 JSSDK 时遇到一个诡异的问题:同一套代码,在 Android 中正确,在 iOS 中却失效。 于是开启了 debug,发现在执行 wx.config() 函数时就出现了不同的结果,Android 是 {"errMsg":"config:ok"},而 iOS 是 {"errMsg":"config:fail"}。即使此时我修改了代码确保传入完全相同的参数。 最终发现是在参数 nonceStr 上出了问题,这是一个用于生成签名的随机字符串,为了方便,我直接使用了一个随机数,因此其真正的类型并不是字符串,结果就出现了 Android 和 iOS 中的不同表现。 我想这处不一致,微信开发团队都未必知道。

By 熊立丁

前端

微信 JSSDK 在 Android 和 iOS 的一处不一致

今天在使用微信的 JSSDK 时遇到一个诡异的问题:同一套代码,在 Android 中正确,在 iOS 中却失效。 于是开启了 debug,发现在执行 wx.config() 函数时就出现了不同的结果,Android 是 {"errMsg":"config:ok"},而 iOS 是 {"errMsg":"config:fail"}。即使此时我修改了代码确保传入完全相同的参数。 最终发现是在参数 nonceStr 上出了问题,这是一个用于生成签名的随机字符串,为了方便,我直接使用了一个随机数,因此其真正的类型并不是字符串,结果就出现了 Android 和 iOS 中的不同表现。 我想这处不一致,微信开发团队都未必知道。

By 熊立丁

前端

Base 标签,所有链接在新页面中打开

实用的html标签<base> <base href="..." target="..."> 能定义超链接等的基本行为,有人喜欢所以链接都在新页面中打开,让我改……差点冲动去一个个改,结果发现了这个标签,只要 <base target="_blank"> 那么所有没有特别指定 target 属性的超链接都会在新页面中打开。 这个标签能做的不止这个,href 属性可以定义默认的路径,如果指定此属性则页面中所有相对路径(对图片路径也有效)都会以此为参考。 更多细节请参考:http://www.w3schools.com/tags/tag_base.asp

By 熊立丁

前端

margin: 0 auto 在IE中无效的正解——缺少DOCTYPE

今天做个页面,想居中,代码简化如下: <body> <div style="width:1003px; margin:0px auto;"> ... </div> </body> 在Firefox和Opera中均能正确居中,而IE却始终居左,先前做网页都用同样的方法,却只有这次不行。 由于实际代码比较复杂,怕是其他代码干扰所致,干脆全部注释掉了再看——终究还是不行。看了看自己以前所做页面的源代码,也看不出个所以然来 ,只好上网搜索。 有的说这个CSS是兼容浏览器的写法,也有说这个CSS在IE中不起作用的。 说兼容,我这次明明是写了一样的代码却不成;说不起作用,以前都这样写的却能正确显示。 终于找到了一篇文章让我找出了问题的根本,该文作者提到 CSS 兼容要点:DOCTYPE 影响 CSS 处理 我再比较了代码,确实这次没有在&

By 熊立丁
浙ICP备15043004号-1