在React Native中引入antd-mobile-rn

Ant Design Mobile终于推出了React Native版本,但是使用起来依然比较麻烦。对于我个人而言,平时做项目也只用其中的几个组件。而无论是antd-mobile还是antd-mobile-rn,按需加载都比较麻烦。所以本文主要记录如何以按需引入的方式使用antd-mobile-rn 官方描述 UI 样式高度可配置,拓展性更强,轻松适应各类产品风格 基于 React Native 的 iOS / Android / Web 多平台支持,组件丰富、能全面覆盖各类场景 (antd-mobile) 提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案,一体式开发 使用 TypeScript 开发,提供类型定义文件,支持类型及属性智能提示,方便业务开发 全面兼容 react / preact 安装…

再谈移动端适配

引言 移动端适配一向是很令人头大的问题,因为随着移动设备型号数量的爆发式增长,手机屏幕尺寸越来越多样化,网页内容自适应屏幕尺寸进行显示的需求也就越来越强烈。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题,但是对于页面有复杂结构或者视觉上有特殊要求的,就需要通过其他手段来解决了。 像素基础 像素 像素是一个老生常谈的问题了。不论是做前端开发还是做UI设计,都离不开这个话题。其实真要深究起来,像素是一个十分复杂的概念。追溯到上世纪6、70年代,计算机的输出设备还是点阵式打印机,如何使打印机打印出文字和图形?科学家们研究出了很多点组成的阵列,通过控制每一个点的黑白,最终组成文字和图形。现代计算机的显示器也借鉴了这个设计,发明了像素。 像素分为两种: 物理像素 又称设备像素(Device Pixel, DP),这是组成显示设备的最小单位。可以理解为显示器上的一个一个的点,这些点组成一个个阵列。因为这些点间隔太短,排布太密集,所以肉眼观察不到颗粒感,物理像素通过RGB显色系统,分别控制RGB三基色通道的明与暗,形成了各种颜色。这就是所谓的视觉欺骗效果。任何显示设备的物理像素的数量都是不变的,出厂前就已经设定好。 物理像素的单位是pt,计算公式为: 1pt = 1 / 72 inch 设备独立像素…

寒假比赛总结(八) - 比赛总结

前言到今天(2018-03-01)20点,为期一个多月的寒假比赛就结束了。按照惯例,每次比赛结束都写一些总结,把比赛过程中学到了什么、有哪些地方做得好的、哪些地方没做好的都记录一下。也可以当作反思。在比赛中吸取经验,这样会成长得更快。学到了什么规范的操作无论做什么事情,规范是必需遵守的。在比赛时,为了更好地与后端进行合作,我从前端页面的角度制定了一篇文档,在上面详细描述了每个页面所需接口的字段名、方法等等。(这篇文档目前还在:http://docs.lenconda.top/petlog/)在实际的操作中,我前端这边是严格按照文档规定的格式编写调用后端接口的逻辑。然而,后端似乎并没有认真按照这篇文档的规范进行编写:很多接口都是规定GET方法,后端却只允许POST方法;有很多接口的字段存在拼写错误(avatar拼成avater、字段名中少了s或多了s、follow漏了ed(原本是followed)等等),给前后端对接交互造成很大的麻烦,也浪费了很多时间(我们从2月26日开始对接,到2月28日修改完Bug进入预备阶段,前后花了两天的时间),而且后端接口初次测试十有八九都是500,这些500中肯定有很多是没有遵守规范造成的。这件事给我很深的感触,我认为前后端分离的开发模式下,规范一定是要严格遵守的东西。但是就我这次和两位后端的合作过程来看,家园的研发培训时并没有强调规范的重要性,或者说家园研发的新生并没有很强的规范意识,…

寒假比赛总结(七) - 各种坑

前言在开发的过程中遇到了一些奇妙的坑。与其说坑,倒不如说自己以前从来没有遇见过或者考虑过这些东西。甚至其中某几个还曾一度被我认为是Bug。在查阅资料后发现那种设计还是有其道理的。1. 关于伪元素在比赛中用到伪元素的地方不多也不少,其实我认为伪元素的出现给开发带来了很多方便,代码也变得很干净整洁。因为伪元素并不是真正的元素,却又和真正的元素没什么差别。但是,伪元素也有其限制。现有需求如下图:因为头像右下角的相机在样式上是不变的,所以首选应该就是伪元素。于是我开始编写此代码:HTML:<img src="avatar.png" /> img { width: 83px; height: 83px; border-radius: 50%; position: relative; &::after { content: ''; position: absolute; bottom: 0; right: 0; display: block; width: 22.5px; height: 22.…

寒假比赛总结(六) - 关于使用到的一些从未遇见过的东西

前言此文章用于记录在寒假比赛的过程中遇到的一些需求及其解决方法。主要涉及到之前工作学习的过程中未遇见过的技巧。既是为了复现一遍以增强理解,也为了在以后需要的时候能够随时记起。1. 自定义单/复选框HTML单/复选框是由类型为Radio的Input元素实现的,但是这个类型的元素会形成一个小圆圈/小方框,并且随浏览器样式的不同而不同。如果需要自定义这些组件,我的解决方法是将Input元素本身隐藏起来,然后在外层添加一个<label>元素包裹Input,再添加一个Input的兄弟元素,这个兄弟元素就是自定义的,用于表示该组件被选中与否的元素。以下列出代码:HTML:<label> <input type="radio" v-model="value" value="value1" style="display: none" /> <i class="indicator"></i> </label> LESS:…

寒假比赛总结(五) - 基于现有解决方案实现背景虚化

前言我对目前比较成熟的背景虚化方案还不是很熟悉,但是这次比赛项目需要用到这个功能,具体体现在使用虚化的用户头像当作头像展示的背景,类似于下图:采用这种方法的好处就是在保证大体美观的情况下减轻研发量(因为减去了用户上传背景图片的功能)。解决方案1.基于CSS3的高斯模糊滤镜此方案具体实现就是类似于实现毛玻璃特效的blur()滤镜,通过叠加背景图片达到高斯模糊效果。此方案我最开始是在Lea Verou所著的《CSS揭秘》一书中发现的,并且作者最初也是为了实现毛玻璃特效使用了高斯模糊。之所以认为它可以用于实现这个需求,是因为其本质是背景图片模糊。过程建立一个容器,宽高指定,指定所需背景图片:HTML<div class="head-wrapper" :style="{background: `url(../../../static/images/${this.avatar})`}"> Less.head-wrapper { min-height: 161px; height: auto; width: 100%; position: relative; background-repeat: no-repeat !important; background-size: 80% !important; background-position:…

寒假比赛总结(四) - 重新认识'router-link'

前言接触Vue.js的时间有半年了,正式将Vue.js用于项目开发也有将近三个月了。Vue中有个<router-link>的东西比较有意思,这个组件里有很多很有意思的小细节当时没注意到,不过比赛项目正好又要用上这个东西。一个看似不起眼的需求我们的比赛项目采用的布局是目前流行的APP布局,即:顶部一个Panel,中间是内容,底部是一个两个或两个Logo以上的Tabbar,用于不同功能之间的切换。而问题出在这个被激活的Tabbar元素上:这个匹配到当前路由的Tab需要被点亮,就像下图:因为我这边Tabbar采用的是Flexbox布局,然后每个元素用一层<router-link>包起来,然后分别跳转到各自匹配的路由上去。但是如何将匹配到的Tab点亮呢??绞尽脑汁想了很久,还是没有一个比较完美的解决方案,期间想过Vuex,想过在data中绑定,但是每个想法都十分麻烦。发现ActiveClass突然想起一个月前在观看慕课网上一个Vue.js高仿饿了么的视频,里面貌似用过这个东西,好像是顶部的Tabbar,也是匹配了不同的路由,当点击其中一个时,文字变红,底部多了一个红色的下划线,切换另一个时,另一个变成上述状态,先前那个恢复原状。于是赶紧翻开视频,发现讲师演示代码的时候没有过任何与之相关的代码编写,当其在Chrome中展示的时候,发现被激活的Tab的<a&…

HackWeek踩坑记(1) - 移动端H5适配

开篇 有幸参加了2017年南昌大学家园工作室举办的为期两周的黑客马拉松(Hack Weeks)。其实我很想通过类似的活动提升自己的能力。只不过当我真正参与到项目的开发中,才会发现,自己还是太年轻! 本系列文章记录了我在参与整个团队协作过程中遇到的问题和心得体会,其内容将会涵盖前端开发、UI设计原则、SQL语法、服务器配置以及如何高效地进行团队协作等方面的内容。 第一个坑:移动端适配与视觉稿的呈现 可以说在这次Hack Week活动中折磨我最久的就是视觉稿。因为我以前并没有移动端适配和根据视觉稿来编写UI的经验,所以,当我拿到设计师给我的视觉稿时,其实我是一脸懵逼的。对视觉稿使用的不熟练以及移动端适配经验的缺失,成为在后来的两个星期中,不断折磨我的梦魇,也出于这些原因,给设计师带来很大的麻烦。因此,我深感自己的能力不足,尤其是移动端H5页面制作方面的知识,亟待补充。 今天我们的项目终于完成了调试工作,趁此机会赶紧补习了移动端适配的方案。 在下面的文章中,我将参考使用Flexible实现手淘H5页面的终端适配学习移动终端H5适配 几个概念 物理像素(Physical Pixel) 物理像素又被称为设备像素(Device Pixel),他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。 举例:iPhone 6的dp为 750 × 1334 设备独立像素(…