webkit

前言： 大概两个月前投身于一个项目中去，项目是一个移动端的项目，所选用的框架是时下比较流行的vue。这篇文章也是针对这个项目和以前自己学习时的一些总结，包括一些通用的移动端开发要注意的事项、vue开发遇到的一些问题。本文的目的是为了在以后的开发中我们可以避免这些坑，提高我们的开发效率。 一、移动端开发特有问题： 1、移动端样式的兼容性： 在当前移动端的开发要面对各种不同的手机，不同的手机DPI也是不同的，比如Iphone 8的DPI就是2，Iphone 8P的DPI就是3。为了让页面可以兼容不同的手机，解决方案如下： 　　1）对手机的视口进行设置强行无视设备的真实分辨率，设置最大最小的缩放比例并且禁止用户进行缩放，从而达到统一的分辨率的效果。 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,use-scalable=no" 　　2）针对不同的手机对2x和3x的图片进行处理：我采用stylus自己定义了一个方法来解决。在需要的地方直接引入即可。 bg- image($url) background -image url($url + "@2x.png" ) @media ( -webkit-min-device-pixel

测试 <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title ></ title > < style > .anim-opacity2 { animation : 2s opacity2 0s infinite ; -webkit-animation : 2s opacity2 0s infinite ; -moz-animation : 2s opacity2 0s infinite ; } @keyframes opacity2 { 0%{opacity : 0 } 50% { opacity : .8 ; } 100% { opacity : 0 ; } } @-webkit-keyframes opacity2 { 0%{opacity : 0 } 50% { opacity : .8 ; } 100% { opacity : 0 ; } } @-moz-keyframes opacity2 { 0%{opacity : 0 } 50% { opacity : .8 ; } 100% { opacity : 0 ; } } </ style > </ head > < body > < h1 class ="anim-opacity2" > 测试 </ h1 > </

A.download HTML5的A标签有一个 download 属性，可以告诉浏览器下载而非预览文件，很实用，参考链接： http://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/ 有时候，WEB端临时创建了一个文件，供用户下载，怎么办呢？示例如下： // 从canvas提取图片数据 var raw = ctx.getImageData( 0, 0, 300, 300); // 压缩为JPEG图片 // https://github.com/owencm/javascript-jpeg-encoder var jpegURI = ( new JPEGEncoder()).encode(raw, 75); // 弹出对话框，交由用户保存图片 saveFile(jpegURI, '文件名'); // saveFile函数 function saveFile( d, a) { var b = document.createElement( 'a'); b.href = d; b.download = a; var c = document.createEvent( "MouseEvents"); c.initMouseEvent( "click", true, false, window

FlexiableBox即是弹性盒，用来进行弹性布局，一般跟rem（ rem伸缩布局（转） ）连起来用比较方便，flexbox负责处理页面布局，然后rem处理一些flex顾及不到的地方（rem伸缩布局主要处理尺寸的适配问题），布局还是要传统布局的。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。 以下内容主要参考了下面两篇文章： A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{display:flex;} 行内元素也可以使用Flex布局。 .box{display:inline-flex;} Webkit内核的浏览器，必须加上-webkit前缀。

Android 上，因为各个软件使用的浏览器渲染引擎不一样，所以视频播放的效果差异也很大，这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。 而iOS是不允许使用第三方浏览器内核的，就是Google Chrome也是用的系统内建的Webkit浏览器内核 (就是WebView了)，APP 都是使用的系统自带的浏览器进行页面渲染,所以IOS的微信浏览器是Chrome的webkit内核。 这就导致H5页面在android和iOS微信中的部分表现差异，但由于X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎，所以除了对video标签的挟持，和下载页跳转被腾讯应用宝挟持外，其他表现上还没有遇到特别折磨人的差别。 1.视频播放自动全屏问题 这个问题在iOS和安卓下都有，浏览器默认全屏播放视频，解决办法很简单，给video加以下属性就可以解决： playsinline="true" webkit-playsinline="true" //webkit内核 x5-playsinline="true" //X5内核 2.音视频自动播放问题 在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。 < video autoplay ></ video > 如果用

实现图片翻转，首先来分析一下我们希望实现的是怎样的翻转效果？又该如何去实现呢？ 一、希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果，翻转过后显示出背面的说明文字。 鼠标没有悬停在上面的效果 鼠标悬停在其中一张图片上的效果： 二、实现方法 每幅图片的翻转效果都是沿着Y轴进行反转的，可以是用 3D变换 来实现这种效果。下面来具体分析实现的各个步骤。 HTML结构部分： 1、首先将变换图片和文字放在一个父容器中，因为设置了五张图片所以需要五个父容器。这五个父容器又被放置在一个div（舞台）内进行变换。 2、在每个父容器里面有包含两个部分：(1) 正面显示的图片(2)背面的说明文字 3、最后采用层定位，让图片和文字部分出现叠加的效果，经过3D变换后面的文字就会被显示出来。 CSS样式部分 ： 1、首先默认样式清零，规定图片（img）的宽高，为主体部分（body）设置背景颜色（这里的是#7a4390） 2、为最外面的"舞台"（.piclist），设置宽高和位置（垂直方向200px，水平方向上居中）。 3、设置父容器样式（.picbox），浮动定位排列一行，宽高和外边距，由于父元素里面包含需要变换的内容，要为其定义3D变换（transform-style:preseve-3d）,变换完成时间1.5s； 设置层定位的方式 相对定位 鼠标悬停在父容器上时发生绕Y轴的180°旋转

2018.12.30更新 --------------------------------------------------------------------分割线--------------------------------------------------------------------------------- 认识博客园的组件 选择皮肤：设置-博客设置- （该皮肤为简洁） 下面还有四个文本框为别为：css，侧边栏，页首，页脚 怎么添加在页面添加github的链接 需要用到以上css文本框和页首两个文本框 参考 作者：雨临Lewis 原文：https://blog.csdn.net/lewky_liu/article/details/81149145 1 /* GitHub Cornor */ 2 .github-corner :hover .octo-arm { 3 animation : octocat-wave 560ms ease-in-out ; 4 } 5 @media (max-width: 991px) { 6 .github-corner >svg { 7 fill : #fff !important ; 8 color : #222 !important ; 9 } 10 .github-corner .github-corner:hover

一、项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例，实现消息发送/动态表情，图片/视频预览，拖拽图片/粘贴截图发送，朋友圈/红包/换肤等功能。 二、效果图 三、技术栈 框架技术：electron + electron-vue + vue 状态管理：Vuex 地址路由：Vue-router 字体图标：阿里iconfont字体图标库 弹窗插件：wcPop 打包工具：electron-builder 环境配置：Node.js + Chromium 图片预览：vue-photo-preview 视频组件：vue-video-player 如何配置开发环境及使用electron-vue，这里不作多介绍，可查阅官网及搜资料 https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ https://github.com/SimulatedGREG/electron-vue 注意： 由于electron-vue作者长时间未更新，里面electron版本v2.0.4太旧，如遇问题，可升级到最新版本 ◆ Electron主进程index.js 通过BrowserWindow创建和控制浏览器窗口

NoHttp的Cookie管理原理 在文档的 初始化配置 一章讲了NoHttp如何配置或者禁用cookie自动管理。 NoHttp的Cookie自动维护，严格遵守Http协议，即区分临时Cookie和有效期Cookie。 临时Cookie在本次App运行期内一直有效，直到App被杀死即被清除。 有效期Cookie会带有一个过期时间，不论App是否被杀死过，这个Cookie在到期时会被自动清除。 关于Session的维持登录 Session是对于服务端来说的，客户端是没有Session一说的。Session是服务器在和客户端建立连接时添加客户端连接标志，最终会在服务器软件（Apache、Tomcat、JBoss）转化为一个临时Cookie发送给给客户端，当客户端第一请求时服务器会检查是否携带了这个Session（临时Cookie），如果没有则会添加Session，如果有就拿出这个Session来做相关操作。 综上所述Session也就是客户端在一次运行期内一直有效，客户端被重启或者杀死时这个Session转化来的临时Cookie即被清除，下次客户端启动后请求服务器时会重新有一个新的Session。 有写开发者是用Session维持App端用户登录状态的，根据上述描述，App重启后上次登录时的Session就失效了，此时要想维护Session的持续有效有两个办法： 一

一、前言 在现在很多的应用系统中，会提供一个地图模块，地图相关的应用和app也是非常多，最广泛的应用就属于导航，地图基本上分在线的和离线的两种，在线的一般都是实时的，数据也是最新的，速度很快路线很准，缺点是耗费流量，一直需要收发数据，而离线的需要先把地图包和对应的文件下载到本地，直接读取本地的地图数据进行交互。 用Qt做过很多个商业项目，其中有几个涉及到加载地图用于展示设备的分布，之前做的是在线的地图，通过网页的交互来获取和设置数据，最近几年越来越多需要离线地图的需求，离线地图最核心的就是地图数据包，也叫瓦片地图，需要通过下载器下载到本地使用，网上查了下，还非常多公司专门做这个离线瓦片地图的下载器，绝大部分都是收费的。 越来越多的地图服务用到瓦片技术，例如我国实行发布的天地图服务就运用了地图瓦片技术。其实切片之后的地图瓦片是栅格图像，并不具备定位信息，不过切片运用了相关切片算法之后，可以计算出具体定位的位置。例如采用WGS84大地坐标系为空间参考，对地图进行切片，采用一定的切片算法，例如用经纬度步长等比例分割形成地图瓦片，当需要对一个具体地方进行定位时，可以根据经纬度步长来计算具体位置，以此来达到定位的功能。 近期抽空特意将大屏系统中常用的区域地图以及地图功能模块重新封装了下，使得支持在线和离线两种模式，同时支持webkit、webengine、ie 三种方式，支持闪烁点图、迁徙图