在 Astro 中启用服务端渲染(SSR, Server Side Rendering)非常简单,而且启用后可以使用新的特性:
本文由 TinyVue 组件库核心成员郑志超分享,首先分享了实现跨框架组件库的必要性,同时通过演示demo和实际操作向我们介绍了如何实现一个跨框架的组件库。
本项目是对冰卡诺老师写的教程:基于Butterfly主题的侧边栏说说进行重构,新增pjax适配和artitalk_v3.2.1及以上版本的适配。后续也会继续在本帖基础上继续开发。
随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗,减弱强光对比,还能提供更好的可视性和沉浸感。
项目基于Vue-cli3.x进行开发,使用了ant-design-vue框架,然后需要做国际化。此时做国际化需要考虑两方面的国际化,一是ant-design-vue内部组件的国际化,二是国际化我们的业务显示,业务显示我们选用vue-i18n进行国际化。
一个微信小程序游戏,基于 pixi.js 和 JetLua/fish 微信小游戏适配库实现。滑动进行方块拼接
UNI-APP 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
随着业务不断扩张以及大小程序平台的崛起,针对每个平台都去写一套代码是不现实的,且原生的小程序开发模式有很多弊端。为了让小程序开发更简单、高效,采用Taro作为首选框架,本文将分享Taro的实践经验,主要内容围绕什么是Taro以及Taro如何使用(正确使用的姿势),还有Taro背后的一些设计思想来展开,让读者能够对Taro有较为完整的认识。Taro3.0已经逐渐成熟,实践项目已经进行Taro3.0的升级,因此本文代码示例以Taro3.0作为基础。
前言 上周【跳一跳】小游戏刷遍了朋友圈,也代表了微信小程序拥有了搭载游戏的功能(早该往这方面发展了,这才是应该有的形态嘛)。作为一个前端er,我的大刀早已经饥渴难耐了,赶紧去下一波最新的微信官方开发工
总体思路 1、 建立一个js服务,该服务实现通用js文件的加载、依赖、缓存、更新以及复用。 2、 各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载。 3、 Js服务只提供通用的js,比如jQuery、my97、easyUI等(可根据实际情况设定具体的js文件)。 4、 其他针对特点需求写的js文件,需要自己写代码加载。Js服务可以提供加载用函数。(正在考虑要不要使用sea.js) 5、 Js服务加载的js文件,不需要做任何修改。当然也不负责各个文件里的函数名称是否冲突。 Se
值得注意的是,在JS中,我们对于数据类型的适配(把后端传来的JSON转成我们希望的格式)也应属于适配器的范畴,所以下文中分别叙述它们的应用。
在越来越注重用户体验的趋势下,验证码作为一种自打诞生以来就被贴上“多余”标签的产品,更应该给用户提供良好的体验。本文以滑动验证码作为切入点,分析了验证码可能存在的性能问题,并通过资源合并、DOM操作优化和选择性内联打包等方式有效减少页面加载时间。同时本文总结了移动端组件化适配容易遇到的问题,并提供了规范化的解决方案。希望本文能给前端做性能优化的同学提供一些不一样的实践思路。
零售商家的日常经营中,小票打印的场景无处不在,顾客的每笔消费都会收到商家打印出的消费小票,这个是顾客的消费凭证,所以小票的内容对顾客和商家都尤为重要。对有赞零售应用软件来说,小票打印功能也是必不可少的,诸多业务场景都需要提供相应的小票打印能力。
Next.js 是由 Vercel 团队研发的一款全栈应用开发框架,我们使用 Next.js 开发前端页面以及一些轻量级的后端 API,前端和后端都用 Javascript 技术栈,并且是前后端一体化的(在同一个项目中开发前后端)。另一个被大家所熟知的特性是它的服务端渲染能力,对 SEO 友好。Vercel 自身是一个用户体验极佳的 Serverless 平台,支持包括 Next.js 在内的几十种开发框架一键部署到 Vercel 平台。Vercel 平台自身拥有极强的适配扩展能力,第三方框架可以按照 Vercel 平台的适配规则自主进行适配。作为 Vercel 亲儿子的 Next.js 可以完美适配 Vercel 平台,通过 Next.js + Vercel,让开发和部署都能拥有极致的体验。Vercel 团队信奉着“吃自己的狗粮”原则,很多应用都是基于自己的工具和平台开发的。
微信小游戏推出后,LayaAir引擎也同步支持了微信小游戏的开发,由于很多开发者对微信小游戏的开发流程不够了解,不太清楚如何下手。为此,我们在2018年的开工首日,从简介篇,小游戏创建篇,综合介绍篇三部分,全面介绍微信小游戏的开发、测试,与重要项目规则。
因为 Serverless 的“无服务器架构”应用相比于传统应用有很多优点,比如:无需关心服务器、免运维、弹性伸缩、按需付费、开发可以更加关注业务逻辑等等,所以现在 Serverless 应用已经逐渐广泛起来。
rem适配文档上建议使用lib-flexible,flexible适配的原理是物理像素与逻辑像素的相互转化:物理像素px = window.screen.width(逻辑像素pt) * window.devicePixelRatio
说到 JS HTTP 请求,就不得不提 Axios,作为前端网络请求库领域中的霸主,被广泛应用于众多的 web 项目中。
微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题,或无法提供支持。本文提供一种基于 iframe 的全新微前端方案,完善的解决了这些核心诉求。
暗黑模式实现,最初的设计,就是参考之前的主题模式。所谓多套主题/配色/皮肤,就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。
最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3.0 + Vant 3.0 搭建种子项目。
单纯的控件只是展示了简陋的视觉UI和基本行为,在实际开发中需要用到的是经过各种样式装饰和动画还有丰富行为的UI,而且还会被重复利用。所以为了降低代码重复率,提高开发效率,一般开发会把一个或多个控件的结构、样式、行为、联动封装到一个文件中,这样一个组合文件就称为“组件”。
新建[Blogroot]\themes\butterfly\source\js\wow_init.js,配置特性动画的默认项。
移动端rem的适配已经淘汰了,目前大家使用的都是viewport。lib-flexible作者也在github明确地表示lib-flexible这个解决方案可以放弃使用了。
年初的时候发布了第一版的ea-router自动化路由库,欢迎大家安装使用。[Github地址] [npm地址]
好久不见~ 若羽又开篇Vue的内容了。 年初的时候发布了第一版的ea-router自动化路由库,欢迎大家安装使用。[Github地址] [npm地址]
当前国内小程序平台众多,微信小程序、支付宝小程序、头条小程序、以及未来还会出现的新小程序平台,所以为了解决一套代码可以在多个小程序平台上运行,出现了多种方案来解决,京东的 Taro、蚂蚁的 Remax、微信的 Kbone,各有特点,主要归为两种类型,编译时与运行时适配两种。
rem 相对于根元素 <html> 的 font-size 的大小来计算坐作为一个单位;simple-flexible 是根据手淘团队 lib-flexible.js,比较,改写的一个插件,兼容 UC 竖屏转横屏出现的 BUG,自定义视觉设计稿的宽度:designWidth,设定最大宽度:maxWidth 这里有 simple-flexible 的 Github 地址,下载下来用即可;
谷歌如何限制华为?停止商业合作,(1)禁用GMS套件 (2)不能获取更新与适配优化
2个月前,写过一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那篇文章的总结,可惜的是因为项目的关系,这两个月来几乎没有机会做移动类项目的工作,所以那些理论一直没有得到真正的实践。这次因为公司有一个app需要做一个推广的下载页面,虽然简单,但也值得一试那篇文章里提到的适配方法,所以本文的内容就是介绍该文中提到的淘宝的做法:《lib-flexible弹性布局方案》。(注:该文中提到的网易的做法跟淘宝的做法其实是大同小异,你访问http://3g.163.com/touch/看下页面源码顶部的JS就能明白了。相较于淘宝的做法,淘宝的方法更能称之为一个方案,网易的做法代码质量实在不敢恭维,所以从本文的角度,推荐淘宝的lib-flexible)
Transporter是一种用于在不同数据存储之间移动数据的开源工具。开发人员经常为诸如跨数据库移动数据,将数据从文件移动到数据库或反之亦然等任务编写一次性脚本,但使用像Transporter这样的工具有几个优点。
接着上面一篇《从Nuxt文档里发现色彩的配搭诀窍》的内容,本文是我继续对 Nuxt/Content 的探索。当我研究它的色彩系统的时候,我还发现它还提供了暗黑模式,这也算是色彩系统的一种吧,毕竟也是和色彩搭配有关。经过一番学习折腾之后发现它的暗黑模式实现非常简单,甚至不需要你对这个模式有多么深刻的理解,只需要设置几个选项就能完成,并且搭配了 tailwindcss 的 color 系统灵活性也非常的好。
据官方介绍,Kbone 是一个致力于微信小程序和Web端同构的解决方案。具体来说,因为微信小程序的底层模型和 Web 端不同,所以如果我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。
这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。
前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。
'https://github.com/conventional-changelog/commitlint/#what-is-commitlint',
大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。
美团外卖商家端基于 FlutterWeb 的技术探索已久,目前在多个业务中落地了App、PC、H5的多端复用,有效提升了产研的整体效率。在这过程中,性能问题是我们面临的最大挑战,本文结合实际业务场景进行思考,介绍美团外卖商家端在 FlutterWeb 性能优化上所进行的探索和实践,希望对大家能有所帮助或启发。
相信大多数移动端前端开发者都是用过 lib-flexible来作为移动端适配的解决方案。lib-flexible是淘宝项目组开发出来的一个小插件,属于开源项目,可以在各类项目中引入并使用,为移动端的开发者带来了无穷的便利。
好了,经过上一章节文章的介绍,就搭建好了 Uniapp 的开发环境,知道了如何通过 HBuilderX 将 Uniapp 编写的代码运行到浏览器当中,运行到微信开发者工具当中,运行到安卓模拟器上面去,了解完之后,接下来再来给大家介绍了解一下 Uniapp 默认项目的一个结构, 目录表达含义。
什么是微信小游戏? 看前几天的科技新闻,微信中的“跳一跳”小游戏从去年12月发布,截至到今年3月份已经积累了3.9亿玩家,这是一个多么恐怖的数字,“跳一跳”游戏带火了整个微信小游戏开发圈。微信小游戏
waterline和Sails.js同一团队开发,支持几乎所有的主流数据库,是nodejs下一款非常强大的orm,可以显著提升开发效率 一.waterline支持的数据库 二.waterline的配置
本帖为对冰老师的友链朋友圈项目的前端配置方案进行主题插件化适配的应援帖,并不包括关键的后端配置内容。后端配置请参看冰老师的原帖基于hexo的友链朋友圈 Beta1.0,本帖的内容对应原帖的步骤四:配置 HEXO 页面。考虑到冰老师的源项目也仍旧处于开发状态,故本帖也会尽可能的紧跟进度实时更新。
之前就有想法给主题适配一个暗黑模式,但就于目前大家的暗黑模式体验都不是很好。就一直被搁浅了。今天给新站移植RIPRO的时候,发现暗黑主题还蛮好玩的,开搞!
这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧。
在早期,我们如果想搭建一个网站,需要向商业小机房购租一台服务器,再由他们提供简单的运维服务,比如帮我们绑定公网 IP 和域名解析。如果网站出问题,需要找他们的运维同学处理(大部分情况只是重启一下服务)。我们除了需要支付服务器资源成本,另外,还需要支付运维服务费用。现在回想这段时期,就像石器时代一样原始。
在微信小程序的开发的过程中,我们会存在小程序和 H5 页面共存的场景,而让小程序原生和 web h5 独立开发,往往会遇到需要两套人力去维护。对开发者而言,加大了工作量成本,对于产品而言,容易出现展示形态同步不及时问题。在这种情况下,我们急需要找到一个既能平衡性能,也能满足快速迭代的方案。
flexible会为页面根据屏幕自动添加标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值。
领取专属 10元无门槛券
手把手带您无忧上云