移动互联网终端

京东前两天开源了自主研发框架Taro 1.3，昨天上午又偶然看到了一篇关于比较Flutter和ReactNative的文章，刚好我做过ReactNative,也了解过Flutter，下面我就跟大家谈谈对这两个前端框架的感悟。 前端繁荣昌盛的背后不断出新，三大成熟框架React, Vue，Angular自不必说。自从移动端火热发展后，为了解决H5在移动端性能表现的缺陷，大家又想办法推出新的框架，以便于集成Native端的高性能和Web端快速发版迭代的优势。在这个大背景下催生出了小程序，ReactNative和Flutter，以至于多端融合成为大前端新的发展趋势。关于这方面的内容我去年还专门写了一篇技术博客《基于React Native浅谈多端融合技术》，感兴趣的同学可以点击文章底部的链接进行阅览。 刚开始接触ReactNative是在去年6月份，当时部门要做一个内部办公平台APP，想尝试下新技术，就选了比较火热的ReactNative。当时我被派去开发这个项目时，整个人是懵逼的，因为啥都不懂呀。因为我当时主要负责Android开发的相关工作，对于web端还比较生疏。后来部门又派出了一个ios开发的同事，并从外面招了一个搞React开发的外包，我们前端临时3人组就成立了。别问我为啥不直接招一个搞ReactNative开发的，因为招不到啊，当时专门搞这个的人还比较少

1、从C到C++ 计算机诞生初期，用机器语言或汇编语言编写程序; 第一种高级语言FORTRAN诞生于1954年; BASIC语言(1964)是由FORTRAN语言的简化而成的是为初学者设计的小型高级语言; 最后，如果大家如果在自学遇到困难，想找一个C++的学习环境， 可以加入我们的C++学习圈，点击我加入吧 ，会节约很多时间，减少很多在学习中遇到的难题。 C语言是1972年由美国贝尔实验室的 D.M.Ritchie 研制成功的。它是为计算机专业人员设计的; 大多数系统软件和许多应用软件都是用C语言编写的。随着软件规模的增大，用C语言编写程序渐渐吃力了，于是便创造出了C++语言。 2、C++的特点 C++是由 AT&T Bell实验室 于20世纪80年代初在C语言的基础上成功开发出来的。C++保留了C语言原有的所有优点，并增加了面向对象的机制。 C++是由C语言发展而来的，与C兼容。用C语言写的程序基本上可以不加修改地用于C++。从C++的名字可以看出它是C的超集。C++既可用于面向过程的程序设计，又可用于面向对象的程序设计，是一种功能强大的混合型程序设计语言。 备注：C++不是纯面向对象语言。 3、C++是对C语言的“增强” (1) 在原来面向过程机制的基础上，对C语言的功能做了很多扩充。 (2) 增加了面向对象的机制。 面向对象程序设计，是针对开发较大规模的程序而提出来的

一、认识物理像素、设备独立像素、设备像素比 　　在css中我们一般使用px做单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同设备或不同环境中，CSS的1px所代表的物理像素是不同的。在pc端，CSS的1px一般对应着电脑屏幕的1个物理像素，但是在移动端，css的1px等于几个物理像素和屏幕像素密度有关。 物理像素(physical pixel) 　　物理像素又被称为设别像素，设备物理像素，它是显示器（电脑、手机）最小的显示单位，每个物理像素由颜色值和亮度组成。所谓的一倍屏、二倍屏（Retina）、三倍屏，指的是设备以多少物理像素来显示一个css像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个css像素点，在普通屏幕下的1个css像素对应一个物理像素，而在Retina屏幕下，1css像素对应的却是4个物理像素 设备独立像素(device-independent pixel) 　　设备独立像素又被称为css像素，是我们写css时所用的像素，他是一个抽象单位，主要使用在浏览器上，用来精确度量Web页面上的内容。 设备像素比（device pixel ratio） 　　设备像素比简称dpr，定义了物理像素和设备独立像素的对应关系，：设备像素比=物理像素、设备独立像素。 　　css的1px等于几个物理像素

前言： 　　近期，小弟根据GitHub、前端社区、掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总（ps：前端UI框架的应用是通过GitHub star数，社区热度和使用范围等进行的粗略的汇总【不分先后】）。希望对寻找UI框架的小伙伴们提供点帮助。 　　以下对前端UI框架的移动端、PC端和混合APP的应用进行了列举。 移动端UI框架 Mint UI（饿了么团队） 　　中文官网： http://mint-ui.github.io/#!/zh-cn 　　描述：基于vue的移动端UI框架 　　基于vue 　　组件库：　　　　 　　 　　GitHub地址： https://github.com/ElemeFE/mint-ui/ 　　star：8705，fork：1810 　　latest commit 2017.12.6 6pm 　　32 contributors 　　预览： 　　　　 http://elemefe.github.io/mint-ui/#/ 　　基础引入： 　　　　CDN: <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/mint-ui/lib

1.单独制作移动端页面（主流） 　流式布局（百分比布局） 流式布局，就是百分比布局，也称为非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动 web 开发使用的比较常见的布局方式。 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-height 最小高度） 　常用初始化样式： 　body{ 　　margin：0 auto； 　　min-width：320px； 　　max-width：640px； 　　background：#fff； 　　font-size：14px； 　　font-family：-apple-system，Helvetica，sans-serif； 　　line-height：1.5； 　　color：#666； 　} 　flex 弹性布局（强烈推荐） 　less + rem + 媒体查询布局 　混合布局 2. 响应式页面兼容移动端（其次） 　媒体查询 　bootstrap 　　 来源： https://www.cnblogs.com/qtbb/p/11766154.html

webkit-user-select:none 问题 学习了：https://bugs.webkit.org/show_bug.cgi?id=82692 最近两天做移动端游戏举报页面。遇到一个问题，移动端的input都不能输入了，后来发现可能是 －webkit－user-select ：none ; 在移动端开发中，我们有时有针对性的写一些特殊的重置，比如： ＊ { -webkit - touch - callout: none; //-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为 //禁用Webkit内核浏览器的文字大小调整功能。 -webkit-text-size-adjust: none; //避免点击a标签或者注册了click事件的元素时产生高亮 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // //禁止用户进行复制.选择. -webkit-user-select: none; }其中，－webkit－user-select ：none ；会产生一些问题。 这是webkit内核浏览器下的一个bug，具体可以参考这篇文章：https://bugs.webkit.org/show_bug.cgi?id=82692

前言 公司开发一个项目，把安卓和IOS原生开发的同事加了进来，参与h5页面开发。测试时，发现各种适配问题。UI设计的同事问我：你们是不是没有按设计稿来的？检查一看，通篇是px,我做的em适配完全没有用到。因此整理一下移动端WEB页面适配问题记于此。 在这里也要吐槽一下，现在的公司为了省钱，一个人干了几个人的活，有的人还是跨语言开发。难怪很多人吐槽现在的互联网APP没有精品。 实现适配移动端WEB页面的几种方式 通过js判断，动态加载css样式 根据适配的机型不同，动态加载css文件 ( function ( win ,doc) { var width = doc.documentElement.clientWidth ; var link = doc.createElement ( 'link' ) ; if ( wdth<=320 ) { link.href = 'min.css' } else if ( 320<width&&width<375 ) { link.href = 'b.css' } ..... } ) ( window ,document) 通过meta标签放大或缩小 根据meta标签,动态设置user-scalable,maximum-scale,minimum-scale的值 < meta name = "viewport" content = "width

最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4； 3.修改本地项目中IP地址 找到项目中config文件夹，下面index.js文件打开； 找到host: ‘localhost’, 改为上面本地IPv4地址； 4.制作二维码 借助二维码生成工具修改后项目生成二维码。当然不嫌麻烦，地址栏手动输入也可以。例如：草料二维码 https://cli.im/text?41ef018751ee495bd8d8ecba3a8fed09 来源： https://www.cnblogs.com/wangRong-smile/p/11764280.html

项目 ：移动端H5电商项目 痛点 ：慢！！！ 初始方案 ：最基本的图片懒加载，静态资源放到cdn，predns等等已经都做了。但是还是慢，慢在哪？ 显而易见的原因 ：由于前后端分离，所有的数据都由接口下发，之后根据模板渲染页面。也就是说，我们需要先加载js，等到js加载完毕之后，请求接口，接口返回数据之后，渲染页面，加载图片等等。尽管使用了模块化的加载方式，但是对于要求高的首页和活动页，给用户的感知也不是很好。 最初，由于时间紧迫，基本上都是从客户端作优化处理，基本上可以总结为以下几个方面。 我们做了本地缓存优化的策略，第一次请求之后就把接口数据缓存到localStorage里面，并且存储当时的时间，设定过期时间，一般设置为5分钟，用户在5分钟内重复打开页面，不会再次请求接口，从localstorage中拿取数据，直接渲染页面。 后续干脆把模板渲染好的html片段存储了起来，直接拼接，省去了模板计算的时间。 基本实现方案如下： var cache = localStorage.getItem('cache') , expires = 5 * 60 * 1000 ; // 判断是否过期 function isOverdue(pastTime, expires) { return Date.now() - pasttime >= expires; } if (cache &&

1、如果想保持容器能够滚动，同时不想看到丑陋的滚动条，chrome、firefox和移动端上不考虑兼容性直接 　　element::-webkit-scrollbar{ 　　　　display:none 　　} 2、移动端卡顿，加一个属性就能解决了 　　element{　　 　　　　-webkit-overflow-scrolling: touch; } 文章来源: css隐藏滚动条、移动端滚动卡顿的解决