移动互联网终端

1.方法一 <script type="text/javascript"> // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) { if(window.location.href.indexOf("?mobile") < 0) { try { if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { // 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载以下样式 setActiveStyleSheet("style_mobile_a.css"); } else if(/iPad/i.test(navigator.userAgent)) { // 判断访问环境是 iPad 则加载以下样式 setActiveStyleSheet("style_mobile

上代码： <template> <div> <div id="box"> <div class="bgColor"></div> <div class="txt" >滑动解锁</div> <!--给i标签添加上相应字体图标的类名即可--> <div class="slider"> <i v-show="!isSuccess" class="el-icon-d-arrow-right"></i> <i v-show="isSuccess" class="el-icon-check"></i> </div> </div> </div> </template> <script> export default { mounted(){ var self=this; //一、定义了一个获取元素的方法 function getEle(selector){ return document.querySelector(selector); } //二、获取到需要用到的DOM元素 var box = getEle("#box"),//容器 bgColor = getEle(".bgColor"),//背景色 txt = getEle(".txt"),//文本 slider = getEle(".slider"),//滑块 icon = getEle(".slider>i"),

cssrem ：一个CSS值转REM的VSCode插件； lib-flexible ：移动端弹性布局适配解决方案； vue-touch ：移动端相关点击，滑动，拖动，多点触控等事件封装； vee-validate ：适用于vue项目中表单验证插件； better-scroll ：可能是目前最好用的移动端滚动插件; fastclick ：解决移动端click 300ms延迟 vConsole ：手机前端开发调试利器 webpack之proxyTable设置跨域 vue组件之间通信（父向子通信，子向父通信，非父子通信）方法示例； ref 特性的使用； vue中setTimeout,setInterval的使用; 监听鼠标滚动事件,实现头部悬浮效果 this.$nextTick ; new FormData() 上传图像； vue @click="event()" ，添加()与不添加()的区别； 参考链接 https://zhuanlan.zhihu.com/p/44721397 来源： https://www.cnblogs.com/lvonve/p/11334732.html

移动端开发 多页面应用特点 页面跳转,返回html 优点: 首屏时间快，搜索引擎效果好 缺点: 页面切换慢 单页面应用特点(vue) 页面跳转,js渲染 优点: 页面切换快 缺点: 首屏时间稍慢，搜索引擎(SEO)优化效果差 服务器端渲染可以完美的解决单页面所遇到的问题 Viewport 基础 width 控制 viewport 的大小, device-width为设备的宽度 initial-scale 初始的缩放比例 minimum-scale 允许用户缩放到的最小比例 maximum-scale 允许用户缩放到的最大比例 user-scalable 用户是否可以手动缩放 < meta name = "viewport" content = " width = device - width , initial - scale = 1.0 , user - scalable = 1.0 , minimum - scale = 1.0 , maximum - scale = 1.0 " > 移动端300ms延迟 移动端浏览器click事件为什么会有300ms的延迟呢？因为在手机上有个双击方案: 在手机上快速点击两下，实现页面放大；再次双击，恢复到原始比例 那它是如何实现的呢？浏览器在捕捉到第一次点击事件后，会等待一段时间，如果在这段时间内，用户没有再次进行点击操作的话，就执行单击事件

首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" /> 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。 <meta content="yes" name="apple-mobile-web-app-capable" /> iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览 <meta content="black" name="apple-mobile-web-app-status-bar-style" /> iphone的私有标签，它指定的iphone中safari顶端的状态条的样式 <meta content="telephone=no" name="format-detection" /> 告诉设备忽略将页面中的数字识别为电话号码 1. h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。 /

一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。

本篇文章本想着写技术实现来着，写着写着写成了产品。产品就产品吧，之后我再按这个大纲写技术实现。这是一个不小的工程，每个点每个平台都是一篇文章。目前未完待续，先发一下大纲再持续更新。 程序中常见且通用的几个点 登录 如果程序涉及到会员注册用户，那么登录是必不可少的。用户模块会在很多的程序中见到。 应用程序做会员有诸多好处 一、成为注册会员方便了对于用户的管理与分析，包括活跃用户与留存用户等。 二、通过对用户的奖励机制，能够提高用户粘度，提高用户留存 三、通过账号的关联关系，用户可以实现多端数据同步 还有其他等等 当然也有一些坏处，如 一、用户反感登录采集个人隐私数据 二、注册登录流程麻烦，使用户失去兴致 常见登录方式罗列了一下，也是各有有缺点 账号登录 账号登录是互联网初期最常见的一种登录方式，也是在程序员学习时最常用到的方式。这种方式实现起来也简单，而且也不需要采集过多的数据。对于一个用户来讲，只需要有个账号和密码就可以。对于个人信息，可以说是采集度最低。 但是对于这种登录，弊端也是很大的。 首先账号的随意性大，没有什么规律。如果是数据库后台没有做字符限制的话，那也会有一些风险，比如特殊字符SQL注入之类的。 其次，对于用户来讲，账号可能是随意起的，如果不记住账号的话，很容易就忘掉了。本来密码就已经难记了，账号也想不起来是啥，会让用户放弃使用，或者直接注册一个新的账号

1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。 双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒

1. 同屏播放视频 < video src ="" x-webkit-airplay ="true" webkit-playsinline ="true" playsinline /> 2. 移动端视频预加载 由于移动端不能预加载视频，所以hack一种方案：监听WXJSBridge WeixinJSBridgeReady，先播放再暂停，这样当触发播放视频时就不用等待，就不会出现黑屏情况。 // 预加载视频hack function preload() { document.getElementById( 'video' ).play(); setTimeout( function () { document.getElementById( 'video' ).pause(); }, 200 ); } document.addEventListener( "WeixinJSBridgeReady", preload, false ); 3. 滑动播放视频 微信安卓环境下需要在touchmove事件中阻止掉默认事件，否则不能触发视频播放 // 滑动或点击播放视频 ele.addEventListener('touchmove', function (event) { event.preventDefault(); }); ele.addEventListener( 'touchend'

本文原文由作者“张小方”原创发布于“高性能服务器开发”微信公众号，原题《心跳包机制设计详解》，即时通讯网收录时有改动。 1、引言 一般来说，没有真正动手做过网络通信应用的开发者，很难想象即时通讯应用中的心跳机制的作用。但不可否认，作为即时通讯应用，心跳机制是其网络通信技术底层中非常重要的一环，有没有心跳机制、心跳机制的算法实现好坏，都将直接影响即时通讯应用在应用层的表现——比如：实时性、断网自愈能力、弱网体验等等。 总之，要想真正理解即时通讯应用底层的开发，心跳机制必须掌握，而这也是本文写作的目的，希望能带给你启发。 需要说明的是：本文中涉及的示例代码是使用 C/C++ 语言编写，但是本文中介绍的心跳包机制设计思路和注意事项，都是是些普适性原理，同样适用于其他编程语言。虽然语言可以不同，但逻辑不会有差别！ 学习交流： - 即时通讯/推送技术开发交流4群： 101279154 [推荐] - 移动端IM开发入门文章：《 新手入门一篇就够：从零开发移动端IM 》 （本文同步发布于： http://www.52im.net/thread-2697-1-1.html ） 2、相关文章 《 为何基于TCP协议的移动端IM仍然需要心跳保活机制？ 》（ 推荐 ） 《 微信团队原创分享：Android版微信后台保活实战分享(网络保活篇) 》（ 推荐 ） 《 移动端IM实践