强烈，希望官方视频播放方的组建，UI？

现在视频这么火，没有视频方面的APP，简直是开玩笑。。。

RT

第一章 浏览器和浏览器内核
1.渲染引擎的组成：HTML解释器、css解释器、布局（Layout）、JS引擎、绘图等

1. Blink和Webkit的不同： 》跨进程的iframe：为了解决iframe潜在的安全问题，为iframe创建一个单独的沙箱进程 》将DOM引入JS引擎中，提升js访问DOM的性能 》 接口的修改、性能优化等 3.浏览器和对应的渲染引擎： Trident	Gecko	Webkit
   IE	Firefox	Safari Chrome Android浏览器 ChromeOS等

   第二章 HTML网页和结构
   1.webkit渲染过程
   》通过资源加载器加载URL对应的网页
   》网页被交给HTML解释器转变成Token
   》HTML解释器依据Token构建节点，形成DOM树
   》如果节点是js代码，调用js引擎解释执行
   》如果节点是图片、css、视频等资源，会调用资源加载器来加载他们，因为他们是异步的，不会阻碍当前DOM树的继续创建；如果是js资源，
   则需要停止当前DOM树的创建，直到js资源加载并被执行后才会继续DOM的创建。
   第三章 Webkit架构和模块
   1.浏览器是多进程的，包括：Browser进程、每个网页的Render进程、插件进程、GPU进程等进程:
   》Browser进程和页面渲染是分开的，这保证了页面渲染的崩溃不会导致浏览器主界面的崩溃。
   》每个页面是独立的进程，保证了页面之间相互不影响。
   》插件的进程问题不会影响浏览器主界面和网页
   》GPU加速也是独立的
   2.浏览器中的进程基本上是多线程的，如Browser进程包括UI线程和I/O线程等，网页的Render进程包括渲染线程和I/O线程等，GPU进程包括I/O线程和GL线程等：
   》 Browser进程收到用户的请求，首先交由UI线程处理，而且将相应的任务交给I/O线程，它随即将该任务传递给Render进程。
   》Render进程的I/O线程经过简单的解释后交给渲染线程，渲染线程接受请求，加载网页并渲染网页，这其中需要Browser进程获取资源和需要GPU进程来帮助渲染。最后Render进程将结构有I/O线程传递给Browser进程。
   》Browser进程接收到结果并将结果绘制出来。
   第四章 资源加载和网络栈

2. 资源加载是一个很耗时的过程。异步执行资源(如图片、css等)的加载和执行是不会影响当前Webkit的渲染过程。同步执行的js文件会阻塞主线程的渲染过程，这会严重影响Webkit下载资源的效率；因为后面还有需要要下载的资源。这种情况下Webkit会启动另外一个线程去遍历后面的HTML网页，收集需要的资源URL，然后发送请求，这样可以避免被阻塞。与此同时，Webkit能够并发下载这些资源，甚至并发下载js代码，这种机制对于网页的加载提速是很明显的。
   2.渲染引擎、js引擎、js加载三者是互斥的？至少前两者是的。
   3.由于安全（Render进程是没有权限去获取资源的）和效率上的考虑，Render进程的资源获取实际上是通过进程间通信将任务交给Browser进程来完成，Browser进程有权限从网络和本地获取资源。
3. Chroumium的本地缓存包括一个索引文件和四个数据文件（如果缓存比较大，那么是一个数据文件）。
4. SDPY协议是HTTP2的基础，它的核心思想是多路复用，仅使用一个连接链传输一个网页中的众多资源：
5. 引入新的压缩技术（一方面使用gzip或compress压缩后再发送；另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段了，只发送索引号）

第五章 HTML解释器和DOM模型
1.HTML解释器的流程：字节流(bytes)->字符流(characters)->词语(token)->Xss验证(可选)->节点->DOM树。 DOM树的创建只能在渲染线程上创建和访问，从字符串到词语这个阶段可以交给单独的线程来做。

1. 当渲染引擎接收到一个事件的时候，它会通过HitTest(Webkit中一种检查触发事件在哪个区域的算法)检查哪个元素是直接的事件目标。
2. 影子(Shadow)DOM：如<vedio>标签，其内部功能是很复杂的，但是对外只暴漏一个html标签；相当于对节点内部封装，外部看到的有限，但是内部逻辑是很复杂的。它主要解决了一个文档中可能需要大量交互的多个DOM树建立和维护各自功能边界的问题。 createShadowRoot是js中提供的创建影子DOM的方法。

第六章 CSS解释器和样式布局
1.CSS的样式规则、选择器(标签、类型、ID、属性、后代、子女、相邻同胞)、盒模型、包含块(Containing Block)模型、样式属性(背景、文本、字体、列表、表格、定位)。

1. CSSOM：CSS对象模型。它的思想是在DOM中的一些节点接口中加入获取和操作CSS属性或者接口的js接口
2. 布局计算是一个递归的过程，这是因为一个节点的大小通常需要计算它的子女节点的位置、大小等信息。当首次加载、viewport大小改变、动画以及通过js改变样式信息时都会触发重新计算布局。
   第七章 渲染基础
   1.Webkit的布局计算使用RenderObject树并保存计算结果到RenderObject树中，RenderObject树同其他树（如：RenderLayer树）构成Webkit渲染的主要基础设施。
3. 为一个DOM树节点创建RenderObject对象的规则：
   》DOM书中的document节点
   》DOM树中的可视节点，如html、body、div等。Webkit不会为非可视化节点(如meta标签)创建RenderObject对象
   》某些情况下Webkit需要建立匿名RenderObject节点，该节点不对应于DOM树种的任何节点，而是为了Webkit处理的需要
   》RenderObject树节点和DOM树节点不是一一对应的关系
   3.为RenderObject节点创建新的RenderLayer节点的规则是：(不同于css3硬件加速中的复合图层)
   》document节点
   》document的子女节点，也就是html节点对应的RenderBlock节点
   》显式的指定CSS位置的RenderObject节点
   》有透明效果的RenderObject节点
   》节点有溢出(overflow)、alpha或者反射等效果的RenderObject节点
   》使用Canvas 2D或 3D(webGL)技术的RenderObject节点
   》Vedio节点对应的RenderObject节点
   4.Webkit的渲染方式主要包括三种：
   》软件渲染：绘图操作由CPU来完成
   》硬件加速渲染：绘图操作由GPU来完成
   》混合模式： 多个层的渲染结果合并到一个图像中，称之为合成渲染
   硬件渲染比较适合于3D绘图。2D绘图时GPU不一定比使用CPU有优势，主要因为：
   1.CPU的缓存机制有效的减少了重复绘制；
   2.GPU资源相对CPU的内存来说比较紧张；
   1. 软件渲染对待更新区域的处理可能优化到只需计算一个极小的区域，而硬件渲染可能需要重新绘制一层或则多层。

5.软件渲染结果基本上存储在CPU内存的一块区域，多数情况下是一个位图(Bitmap)；存储结果会被copy到Browser的存储空间，然后通过Browser进程渲染出来。
第八章 硬件加速机制
1.GPU主要用来绘制3D图形，而且性能很好。GPU不能像软件渲染那样只计算其中更新的区域，需重绘所有区域；因此为了提高GPU的性能，需要对网页进行分层。分层后，部分区域的更新只在网页的一层或者几层，而不需将整个网页重绘；绘制完成后把层合成起来，即利用了GPU能力，又能减少不必要的重绘开销。
2.硬件加速机制在RenderLayer树建立后需要做三件事情来完成网页渲染：
》Webkit决定将哪些RenderLayer对象组合在一起，形成一个有后端存储的新层，这一新层不久后用户之后的合成(Compositing)，这里称之为合成层(Compositing Layer)
》将每个合成层包含的这些RenderLayer内容绘制在合成层的后端存储中
》合成器将这些合成层合成起来，形成网页的最终可视化结果
3.RenderLayer对象具有以下特征之一，那么它就是合成层(参考css3硬件加速中的复合图层)：
》RenderLayer 具有CSS 3D属性或者 CSS 透视效果
》RenderLayer 包含的 RenderObject 节点表示的是使用硬件加速的视频解码技术的vedio元素
》RenderLayer 包含的 RenderObject 节点表示的是使用硬件加速的Canvas 2D元素或者 WebGL 技术
》RenderLayer 使用了CSS透明效果的动画或者CSS变换的动画
》RenderLayer 使用了硬件加速的 CSS FIlter 技术
》RenderLayer 使用了剪裁(clip) 或者反射(Reflection) 属性，并且它的后代中包含一个合成层
》RenderLayer 有一个Z坐标比自己小的兄弟节点，且该节点是一个合成层
4.硬件加速最终会调用OpenGL/OpenGLES库。GPU进程最终绘制的结果不再像软件渲染那样通过共享内存传递给Browser进程，而是直接将页面的内容绘制在浏览器的标签窗口内。
5.页面加载后进行绘制时，会经历计算布局、绘图和合成三个阶段，前两者耗时较多。鉴于此提升浏览器渲染性能的两者方法：
》使用合适的网页分层技术以减少需要重新计算的布局和绘图
》使用CSS 3D 变形和动画技术：浏览器不需要重新布局，也不需要重新绘图，只需使用合成功能，而合成功能耗时非常少。
第九章 JavaScript引擎
1.解释性语言(如 js)和编译型语言(如 java c++)的区别：编译确定位置、偏移信息共享以及偏移信息查找。 三者概括起来讲是因为编译型语言可以在编译的时候确定指针位置，而解释性语言只有在执行的时候才会确定。如果找js的属性只能通过属性名匹配去查找，而c++中可以根据偏移位置去直接找到。
2.一个js引擎要包括以下几部分：
》编译器：将源代码编译成抽象语法树，某些引擎中还包括将抽象语法树转成字节码
》解释器：某些引擎中，解释器主要接受字节码，解释执行这个字节码，同时也依赖垃圾回收机制
》JIT工具：(Just-In-Time技术) 它的主要思想是当解释器将源代码解释成内部表示的时候(java字节码就是一个典型的例子)，js的执行环境不仅是解释这些内部表示，而且将其中的一些字节码(主要是使用效率高的部分)转成本地代码(汇编代码)，这样可以被CPU直接执行，而不是解释执行，从而极大地提高性能。
》垃圾回收器和分析工具：它们负责垃圾回收和手机引擎中的信息，帮助改善引擎的性能和功效
3.引擎的流程：
源代码 -> 抽象语法树 -> 字节码 -> 解释器 -> JIT -> 本地代码
4.v8引擎的工作原理
》数据表示： 数据和句柄，句柄指向数据存储地址。当进行垃圾回收的时候，不需要移动数据(开销大)，只需修改句柄中的指针。
》V8不会把抽象语法树转成字节码或者其他中间表示，而是通过JIT直接生成本地代码。 优点：减少了抽象语法树到字节码的转换时间。 缺点：减少了中间表示(字节码)可能的优化机会、有些场景没必要生成本地代码(过度优化)
》优化回滚：编译器认为某些代码比较稳定，变量类型不会发生改变，然后生成高效的本地代码；如果引擎发现变量类型发生变化，需要使用一种机制将它做的这些错误决定回滚到之前的一般情况，这个过程就是优化回滚。优化回滚是一个很费时的操作，所以能够不回滚，肯定不要回滚。

 var count = 0;  
  function ABC(){  
      count++;  
      if(count < 1000000){  
        return 123;  
      }  
      return new Date();  
  }

》隐藏类和内嵌缓存：V8使用类和偏移位置思想，将本来需要通过字符串匹配来查找属性值的算法改进为使用类似C++编译器的偏移位置机制来实现，这就是隐藏类

  function ABC(x, y){  
    this.x = x;  
    this.y = y;  
  }  
  var a = new ABC(1,1);  
  var b = new ABC(1,2);

上述例子中的a、b两个对象包含相同的属性名，因此它们被归为同一个组，也就是隐藏类，这些属性在隐藏类中有相同的偏移值。当访问这些对象的属性时，可以通过偏移值知道它们的位置并进行访问。
内嵌缓存的基本思想是将使用之前查找的结果缓存起来，也就是说V8可以将之前查找的隐藏类和偏移值保存下来。当下次查找的时候，首先比较当前对象是否也是之前的隐藏类，如果是的话，可以直接使用之前的偏移值，从而减少查找表的时间。
》内存管理：V8采用的分代垃圾回收机制，分为年轻分代、年老分代等。
》快照机制：快照机制就是将这些内置的对象和函数(如 Math、String、Array)加载之后的内存保存并被序列化。序列化之后的结果很容易被反序列化，经过快照机制的启动时间，可以缩减几毫秒。
5.JavaScriptCore和V8不同，它会生成平台无关的字节码(和java类似)，然后基于此做优化，同时它的句柄不论在32位还是64位平台上，都使用64位来表示。

1. 编写高效的JavaScript代码：
   》类型：把相同类型的元素放到一个数组中，这样引擎可以通过偏移位置来访问他们
   》数据表示：简单类型的数据可以直接保存在句柄中，这样可以有效地减少寻址时间和内存的使用。对于数值来说，能使用证书的尽量不要使用浮点数。
   》内存：及时触发垃圾回收，可以把不再使用的对象的变量设置为空：a.x=null，或者通过delete关键字进行删除：delete a.x ;但是后者有可能会由于使用了隐藏类，需要创建新的隐藏类，进而带来一些复杂的额外操作。
   》优化回滚：不要写触发优化回滚的代码
   》新机制：如通过requestAnimationFrame替代setInterval实现动画等。

作者：狐尼克朱迪
链接：https://www.jianshu.com/p/506447128ed4
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
css3硬件加速
https://www.jianshu.com/p/f8b1d6e598db

jquery为开发插件提供了两个方法，分别是：

jQuery.fn.extend(object);  
jQuery.extend(object);

jQuery.fn.extend(object);给jQuery对象添加方法。
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
注意用法上的区别
jQuery.fn.myPlugin的用法为 $('.ye').myPlugin
jQuery.extend的用法为 $.add(3,5);

jQuery.fn.myPlugin = function(options) {  
                $options = $.extend({  
                    html: "no messages",  
                    css : {  
                        "color":"red",  
                        "font-size": "14px"  
                    }},  
                    options);  
                    return $(this).css({  
                          "color": $options.css.color  
                    }).html($options.html);  
            }  
            $('.ye').myPlugin({  
                html: "so esay,yes?",  
                css: {"color":"green","font-size":"20px"}  
            });

1.合并多个对象
这是使用的就是$.extend( )的嵌套多个对象的功能。
所谓嵌套多个对象，有点类似于数组的合并的操作。但是这里是对象。举例说明：
用法 jQuery.extend（obj1，obj2，obj3...）

var css1 = {size:"10px",style: "oblique"};  
var css2 = {size:"12px",style:"oplique",weight:"bolder"};  
jQuery.extend(css1,css2);  
//结果：css1的size属性被覆盖，而且继承了css2的weight属性  
//css1 = {size: "12px",style: “oblique” ,weight: "bolder"}

2.深度嵌套对象

jQuery.extend(  
{name: "John",location: {city: "Boston"}},  
{last: "Resig",location:{state: "MA"}}  
);  
//结果  
// => {name:"John",last: "Resig",location:{state:"MA"}}   
//单层合并，city值丢失，后边的location覆盖了前边的location  

//更深入的 .extend()  
jQuery.extend(true,  
{name: "John",location: {city: "Boston"}},  
 {last: "Resig",location:{state: "MA"}}  
);  
//结果  
// => {name:"John",last: "Resig",location:{city:"Boston",state:"MA"}}  
//city与state合并为新的对象

3.可以给jQuery添加静态方法

$.extend({  
        add: function (a,b){  
            return a + b;  
        },  
        minus: function(a,b){  
            return a - b;  
        },  
        multiply: function(a,b){  
            return a*b;  
        },  
        divide:function(a,b){  
            return Math.floor(a/b);  
        }  
});  
var sum = $.add(3,5) + $.minus(3,5) + $.multiply(3,5)+ $.divide($options,7);  
console.log(sum);

JSON转换工具
JSON-handle.crx——支持多个浏览器

翻墙扩展
翻墙0.8.1_0.crx——免费的

原型查看扩展
Axure RP.crx

apiz扩展
apiano2.0.1.crx——查看API

以上是本人几个常用的扩展，大家有更好更实用的，欢迎留言

问题：
界面输入框接收焦点时，虚拟键盘出现挡住输入框。
环境：
1、全屏显示，不显示状态栏
2、Android系统
3、在云打包后没有出现问题，但是离线打包后就出现这个问题。

既然云打包没有问题，而离线打包后出现了这个问题，那么应该是我离线打包的设置有问题，我打包后其它地方没有问题，这个坑咋都过不去！
求高手给指导。

实现的功能：
1.用户中心：动态生成菜单；判断是否登录，如果登录：显示登录用户资料并显示退出按钮，如果没有登录：显示登录按钮；
2.用户登录页面：输入三位数以上的用户名可以模拟登录，实际项目需要调用api进行登录；
3.用户注册页面：
第一步：输入11位手机号码；
第二步：验证手机号和短信验证码；
第三步：输入用户注册资料；
第四步：注册成功。

可以在APP预览demo
点击下载APP

写在前面

• 页面需要设置如下css样式,
• 页面里实在没办法设置成如下所述样式的,
• 我还没找到办法实现监听键盘弹出/收起

html,body{width:100%;height:100%;overflow:hidden;}

可解决的问题:

1.ios输入文字时header/input不听话

1. 弹出/收起键盘时要想要做一些事情

2. 等问题

   • 附:mui的im-chat的demo,
   • 可尝试用ios手机访问,
   • 体验下我想描述的问题

心路历程

(唔...应该可以跳过)

1.这周六、日因为年前快放假了导致加班

2.刚刚好要写个聊天室的UI

3.聊天室顶部有个header.mui-bar.mui-bar-nav(由于一些原因,用不了父页面的header)

4.底部有个类似手机QQ的输入框
(但是比较简单,只有个输入框和发送按钮)

5.然后重点来了,主角上场了——坑爹的ios

6.所以,输入文字的时候header和底部的textarea开始不听话了

本人又比较菜,大佬们说的各种什么解决方案,
不知道是不是我姿势不对,好像都不是很有效,
具体什么方法,都在公司电脑的浏览器记录里,
就不去翻了,css布局倒是学到了一些,
js方面的,试了的不管用,要不就是很要原生插件配合什么的,
反正最终效果挺不满意的.

进入正题

开发调试信息

• 安卓:一加三
• 苹果:6s
• IDE:hb8.8.1&hb8.8.5

dom结构

header.mui-bar.mui-bar-nav
div.mui-content
footer.mui-input-row>span.mui-btn+textarea

主要样式

/*总体布局*/  
html,body,.mui-content{width:100%;height:100%;overflow:hidden;}  
/*顶部header*/  
header.mui-bar.mui-bar-nav{width: 100%;position: absolute;top: 0px;}  
/*变化动画,可删除*/  
.mui-focusin header.mui-bar.mui-bar-nav{transition: top 0.5s;}  
/*聊天内容*/  
header.mui-bar.mui-bar-nav~.mui-content{position: absolute;top: 0px;bottom: 50px;padding: 44px 0px 50px;overflow: auto;}  
/*底部*/  
footer.mui-input-row{width: 100%;height: 50px;position: absolute;bottom: 0px;padding: 5px 10px;background-color: #EFEFF4;border-top: 1px solid #DEDEDE;}  
/*发送按钮*/  
footer.mui-input-row>span.mui-btn{padding: 10px 0px;margin: 1.5px 0px;}  
/*输入框*/  
footer.mui-input-row>.mui-btn~textarea{width: 82.5%;height: 40px;line-height: 30px;margin-right: 2.5%;padding: 5px 0px;}

解决过程

• 发现ios弹出键盘时,是用键盘将webview"顶起来"弹出键盘的
• (ios在h5+中的webview在弹出键盘时似乎不会触发scroll事件)
• (需要设置softinputMode:adjustResize以触发键盘弹出/收起事件)
• 安卓就是挤压webview咯
• 上面两点,想必各位dalao比我了解
• 所以,我何不监听对应的事件呢

好了,上干货

// 这些demo代码是结合解决"ios的浏览器端输入文字时header/input可能不听话"问题来写的  
// 有其他需求可结合具体逻辑修改  
(function($,doc,win){  
    $.qs = function(selector,context){  
        return $.qsa(selector,context)[0];  
    }  
    var body = doc.body,  
        header = $.qs('header',body),  
        header_style = header.style,  
        content = $.qs('.mui-content',body),  
        content_style = content.style,  
        footer = $.qs('footer',body),  
        text_input = $.qs('textarea',footer),  
        init_width = body.offsetWidth,  
        init_height = body.offsetHeight,  
        is_web_ios = $.os.ios&&!$.os.plus&&!$.os.android,  
        tap_y = 0;  
    // 阻止window滚动  
    function block_window_scroll(e){  
        e.preventDefault();  
        e.stopPropagation();  
    }  
    // 阻止在header/footer上触发iso网页上的滚动/弹性拖拽  
    // 如果在获得焦点时通过header/footer触发了滚动/弹性拖拽,  
    // 会有不想看到的情况  
    header.addEventListener($.EVENT_MOVE,block_window_scroll);  
    footer.addEventListener($.EVENT_MOVE,block_window_scroll);  
    //阻止已经滚动了顶部/底部时,继续拖拽  
    content.addEventListener($.EVENT_START,function(e){  
        tap_y = e.touches[0].screenY;  
    });  
    content.addEventListener($.EVENT_MOVE,function(e){  
        ((!(this.scrollTop)&&(e.touches[0].screenY - tap_y)>0)||((this.scrollTop == (this.scrollHeight-  this.offsetHeight))&&(e.touches[0].screenY - tap_y)<0))&&block_window_scroll(e);  
    });  
    // 键盘弹出事件  
    is_web_ios&&win.addEventListener('keyboardShow',function(e){  
        var keyboard_height = e.detail.keyboardHeight;  
        header_style.top = keyboard_height + 'px';  
        content_style.paddingTop = keyboard_height + 44 + 'px';  
    });  
    // 键盘关闭事件  
    is_web_ios&&win.addEventListener('keyboardHide',function(e){  
        header.removeAttribute('style');  
        content.removeAttribute('style');  
    });  
    // 如果是ios,在浏览器第一次弹出键盘时  
    // 我的6s(ios 11.2.1)footer会错位(浏览器会,html5+的webview不会)  
    // 需要在第二次打开时才不会错位  
    // (第一次不是指的刷新后的第一次)  
    // (而是访问网页后的第一次,哪怕是刷新了,但不是访问的第一次,就不会出现问题)  
    // 很是奇怪,所以在第一次想要弹出键盘时,先阻止一下,  
    // 让用户以为没点到,用户自然会重点一次  
    is_web_ios&&text_input.addEventListener('focus',(function(){  
        var first_focus = true;  
        return function(){  
            if (first_focus) {  
                this.blur();  
                return !(first_focus = false);  
            }  
        }  
    })());  
    // 键盘弹出/收起实现  
    // ios的webview通过设置softinputMode:'adjustResize',  
    // 表现会和android一样不会有header/footer不受控制的情况  
    $.os.ios&&$.os.plus?null:(is_web_ios?win:body).addEventListener(is_web_ios?'scroll':'resize',(function(){  
        var timer;  
        return is_web_ios?function(){  
            clearTimeout(timer);  
            var scroll_height = win.scrollY;  
            // 实时触发  
            // scroll_height>=0&&$.trigger(win,scroll_height?'keyboardShow':'keyboardHide',{  
            //     keyboardHeight:scroll_height  
            // });  
            // 弹出后&收起后触发  
            timer = setTimeout(scroll_height>=0?function(){  
                $.trigger(win,scroll_height?'keyboardShow':'keyboardHide',{  
                    keyboardHeight:scroll_height  
                });  
            }:$.noop,100);  
        }:function(){  
            clearTimeout(timer);  
            if(body.offsetWidth != init_width){ //横竖屏的resize  
                init_height = body.offsetHeight;  
                init_width = body.offsetWidth;  
                return;  
            }  
            var resize_height = init_height - body.offsetHeight;  
            // 实时触发  
            // $.trigger(win,resize_height?'keyboardShow':'keyboardHide',{  
            //     keyboardHeight:resize_height  
            // });  
            // 弹出后&收起后触发  
            timer = setTimeout(function(){  
                $.trigger(win,resize_height?'keyboardShow':'keyboardHide',{  
                    keyboardHeight:resize_height  
                });  
            },100);  
        }  
    })());  
    $.plusReady(function(){  
        // ios在h5+环境中需要设置softinputMode:'adjustResize'  
        // 通过resize来监听键盘弹出/收起  
        // 但是ios的"第一次"获得焦点时  
        // 键盘高度似乎不准确  
        // 不知道是什么原因  
        // 个人觉得和上面监听focus注释描述的问题有关  
        $.os.ios&&plus.webview.currentWebview().setStyle({  
            softinputMode:'adjustResize'  
        });  
    });  
})(mui,document,window);  

demo代码见附件

谁推荐个苹果手机上好用的录屏软件,我去录个gif上来

> 本帖已集成到: hx产品文档

下载HBuilderX，点菜单帮助-markdown语法说明，会打开一个md文件，里面详细演示了HBuilderX对markdown的强化。
推荐在那里实际体验
总体来说，编写md文件，HBuilderX最快最高效。

以下补充一个笔记技巧：

HBuilderX搭配markdown用于云同步笔记的技巧

1. 云同步工具
   首先推荐一个云同步工具，微软的onedrive。https://skydrive.live.com/
   在dropbox被墙后，onedrive成为最佳选择，免费、稳定、安全、多平台。
   win10平台自带onedrive客户端，其他平台可在上述网址下载安装。（一定要安装客户端，web版也需要翻墙）
   配置onedrive账户后，在本机我的电脑上会出现一个onedrive文件夹，在里面新建一个“note”的文件夹（名字可自定），然后把HBuilderX写的md都存到这个文件夹中。
   每次在HBuilderX中保存md文件后，onedrive会自动同步这个文件到云端。
   使用其他电脑或手持设备后，也会自动看到这个文档。
   onedrive手机端不支持直接查看markdown，可另行安装手机App，iOS上推荐使用mweb，安卓上推荐使用锤子便签。

2. svn、git同步
   本机装好node后，利用watch监听文件变化，发现文件修改可自动提交到svn或git。
   团队共享的待办事项同步可以用这种方式处理。

在DCloud内部，个人文档大多采用方式1，公司协作文档均采用方式2。并行使用。

这套方案适用于pc端编写，手机端查看的场景。这个场景下，HBuilderX+markdown拥有远胜于evernote、OneNote等笔记软件的体验。启动更快捷、编写更高效、阅读更美观。
但如果经常在手机端编写并同步的话，还是云笔记本软件更合适。

总看电视和刷短视频，会让人变傻。
打开HBuilderX，在键盘上敲出凝结思绪的markdown，会让你变聪明。

这次遇到了这样的需求：考试成绩的总分为40分，计算的时候分为5个段，30-40权重为20，20-29权重为15，10-19权重为10，1-9权重为5，依次递减， 0分为0.
分析：每个段在计算的时候递减5。临界值的判断。每次计算的区间为10.
第一步：用Math.floor的方法，当成绩在31-40之间的时候Math.floor的计算结果为0，在21-30之间的时候Math.floor的计算结果为1，在11-20之间的时候Math.floor的计算结果为2，在1-10之间的计算结果为3。方法如下

Math.floor((40 - score) / 10)

第二步：总权重20，每个段减5

20 - (Math.floor((40 - score) /10) * 5);

这样好像“完美”的解决了问题，但还有些临界值遗漏，我们继续。
第三步：当score为30时候，权重应该为20，但根据上面的方法，我们计算的结果为15，因此当遇到score为30、20、10的时候我们需要将权重增加5。方法如下：

20 - （Math.floor((40-score)/10)*5）+ 5;

可也以写成

25 - （Math.floor((40 - score) / 10) * 5);

第三步：解决了临界值，需要根据不同的条件来选择不同的计算方法，当（40 - score）/ 10 为整数时用25 - （Math.floor((40 - score) / 10) 5);来计算，否则用 20 - (Math.floor((40 - score) /10) 5); 来计算。方法如下：
根据正则来判断是否为正整数

/^[0-9]*[1-9][0-9]*$/.test(( 40 -score ) / 10 ) ? 25 - Math.floor((40 - score) / 10 )* 5  :  20 - Math.floor((40 - score) / 10 ) * 5

第四步：好像已经可以满足需求了，但是我们把成绩为0的情况遗漏了，最后一步

score == 0 ？0 ：(/^[0-9]*[1-9][0-9]*$/.test(( 40 -score ) / 10 ) ? 25 - Math.floor((40 - score) / 10 )* 5  :  20 - Math.floor((40 - score) / 10 ) * 5)；

这样就用三元表达式一行代码解决了我们的需求。

var leval = score == 0 ？0 ：(/^[0-9]*[1-9][0-9]*$/.test(( 40 -score ) / 10 ) ? 25 - Math.floor((40 - score) / 10 )* 5  :  20 - Math.floor((40 - score) / 10 ) * 5)；

考试成绩的总分为40分，成绩为30-40权重为20，成绩为20-29权重为15，成绩为10-19权重为10，成绩为1-9权重为5，依次递减， 0分为0.

大神提供了一种更为简单的写法，这种写法比较适合在分段比较少的情况下使用：

score>0?score>9?score>19?score>29?20:15:10:5:0;  
也可以写成  
score>0?(score>9?(score>19?(score>29?20:15):10):5):0;

不足之处请指正！

之前在做微信授权登录的时候，遇到了用户取消:-2的问题，从网上查了一下，也没有找到什么解决方案，最后自己还是把它解决了，和大家分享一下，弄了半天，原来是自己申请错了，我给申请成了网站应用了，使用的网站的appid和appsecret，在打包后安装了就报用户取消-2，还有就是在打包的使用使用自有证书，不要使用公有证书，公有证书是在真机测试的时候才有时候会用