随笔分类 - 移动开发
摘要：建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本次使用 webpack。 第一步、安装全局包 第二步、创建根目录 创建一个根目录，目录名为：reactApp，再使用 npm init 初始化，生成 package.json 文件： 第三步、添
阅读全文
摘要：在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 问题： 带着问题，往下看… 在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统
阅读全文
摘要：UI的闪烁 Angular的自动数据绑定功能是亮点，然而，他的另一面是：在Angular初始化之前，页面中可能会给用户呈现出没有解析的表达式。当DOM准备就绪，Angular计算并替换相应的值。这样就会导致出现一个丑陋的闪烁效果。 上述情形就是在Angular教程中渲染示例代码的样子： <body
阅读全文
摘要：介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面
阅读全文
摘要：什么是JSX？ 在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是利用JSX，组件
阅读全文
摘要：Web 发展了几十个春秋，风起云涌，千变万化。我很庆幸自己没有完整地经历过这些年头，而是站在前人的肩膀上行走。Web 技术发展的速度让人感觉那几乎不是继承式的迭代，而是一次又一次的变革，一次又一次的创造。这几年的前端，更为之甚！我从 12 年底开始接触前端，12 年之前的前端发展情况只能从上一辈的笔...
阅读全文
摘要：1. 页面需求这是要做的页面效果（不要对设计置评，这不是开发人员决定的）：这是尺寸标注图（750*1334）：然后美工在750*1334的设计稿之上，按我的要求提供以下素材的切图：包括两个下载按钮的背景图片，logo，底部梯形的渐变背景和body部分的mobile 背景图。注意这些图片都是在750*...
阅读全文
摘要：1. 问题的引出如果html5要适应各种分辨率的移动设备，可以使用rem这样的尺寸单位，针对各个分辨率范围在html上设置font-size的代码：html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px...
阅读全文
摘要：meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari体验demo，解决在主屏幕打开页面后，点击页面链接不会跳转到系统自带的Safari将网站添...
阅读全文
摘要：单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block 和 text-align实现.parent{t...
阅读全文
摘要：常见的问题问题：手机端click事件会有大约300ms的延迟原因：手机端事件touchstart--\>touchmove-->touchendortouchcancel-->click，因为在touch事件触发之后，浏览器要判断用户是否会做出双击屏幕的操作，所以会等待300ms来判断，再做出是否触...
阅读全文
摘要：rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in windo...
阅读全文
摘要：移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。 ...
阅读全文
摘要：解决方案：给要使用live绑定事件的元素，添加“cursor:pointer”样式即可！如：a,input,td{cursor:pointer;}
阅读全文
摘要：SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。准备工作首先我们必须将SweetAlert插件的js文件和css文件引入到页面...
阅读全文
摘要：这是一款不依赖任何js框架、纯javascript实现的画廊效果。它支持移动设备手势操作，如手势触摸滑动、放大和关闭图片，它还支持PC上的键盘操作，总之它是WEB开发者不可或缺的图片画廊插件，它叫photoswipe。HTML首先加载所需的CSS和js文件。以上文件大家不要担心，月光光都打包好了，您...
阅读全文
摘要：CSSREM一个CSS的px值转rem值的Sublime Text 3自动完成插件。插件效果如下：安装下载本项目，比如：git clone https://github.com/flashlizi/cssrem进入packages目录：Sublime Text -> Preferences -> B...
阅读全文
摘要：在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth、微信浏览器内打开,照样能看你源码~使用fiddler来抓包需要先做一些简单的准备工作:一台带有无线网卡的PC或者笔记本电脑，然后将电脑和手机连接到同一个Wi-Fi网络中，并且保证二者是在同一个...
阅读全文
摘要：Document css样式#animationTipBox { font-family: "Microsoft Yahei","微软雅黑",Arial,Tahoma; font-size: 14px; width: 250px; height...
阅读全文
摘要：不少设计师和工程师都被安卓设备纷繁的屏幕搞得晕头转向，我既做UI设计，也做过一点安卓界面布局，刚好对这块内容比较熟悉，也曾在公司内部做过相关的讲座，在此，我将此部分知识重新梳理出来分享给大家！1、了解几个概念（1）分辨率。分辨率就是手机屏幕的像素点数，一般描述成屏幕的“宽×高”，安卓手机屏幕常见的分...
阅读全文
浙公网安备 33010602011771号