var bind_name = "input";//定义所要绑定的事件名称
if (navigator.userAgent.indexOf("MSIE") != -1)
bind_name = "propertychange";//判断是否为IE内核 IE内核的事件名称要改为propertychange
/输入框键盘离开事件绑定/
$(".className").bind(bind_name, function ()
{
//事件
});

建议可以调用 Intent.setAction(Intent.ACTION_SEND);
那连第三方分享模块都省啦

集成到
http://www.dcloud.io/docs/api/zh_cn/messaging.shtml#plus.messaging.TYPE_EMAIL

在Webview窗口中如果存在子Webview的情况下，使用html中的css来做页面遮罩无法覆盖子Webview，为了解决此问题，WebviewStyle对象添加mask属性，用于设置Webview窗口的遮罩层。

mask属性值为字符串类型，可取值：

• rgba字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"；
• “none"，表示不使用遮罩层。

Webview的遮罩层会覆盖Webview中所有内容（包括子Webview），并且截获Webview窗口的所有触屏事件。此时Webview窗口的点击操作会触发maskClick事件。
使用方法如下：

// 创建Webview窗口带遮罩层  
var wd=plus.webview.create('http://www.dcloud.io/','dcloud',{mask:'rgba(0,0,0,0.5)'});  
wd.show();  

// 动态修改Webview窗口的遮罩层  
var ws=plus.webview.currentWebview();  
ws.setStyle({mask:"rgba(0,0,0,0.5)"});  
// 用户点击Webview窗口后不显示遮罩层  
ws.addEventListener("maskClick",function(){  
    ws.setStyle({mask:"none"});  
},false);

注意：

• 显示遮罩层后仍然不会影响JS的执行；
• 在Android平台显示遮罩层后仍然可监听到backbutton事件；
• 在iOS平台显示遮罩层后仍然可以操作侧滑返回。

HBuilder JSDoc+规范

目录

介绍

支持标签

类型语法

特殊类型

介绍

JSDoc有2个作用，导出API文档和明确代码类型，辅助代码提示。
JSDoc描述了函数或变量的功能、值域、示例等很多代码提示时需要的数据，还可以通过类型定义，给动态的JS变量或函数赋予明确的类型。
HBuilder/HBuilderX支持JSDoc3的书写和解析，JSDoc 3详细的标签介绍及语法请参考JSDoc 3。
但标准的JSDoc是不够的，为了提高JS代码类型解析的精确性和实现更强大的代码助手提示，我们扩展了JSDoc。

-对于普通开发者，书写JSDoc有助于代码可读性的提升，在很多要求严格的大公司，JSDoc是强制要求编写的。
完善的JSDoc也能让开发者自定义的函数在引用时得到更方便的代码提示。
-对于框架开发者，书写好的JSDoc是必须的，除了生成API手册，良好的JSDoc可以让框架在IDE里得到更好的提示。
-开发者们也可以给别人的JS框架补充JSDoc，以便在HBuilder里得到更好的提示。
如果你完成了某个框架的JSDoc，请提交到https://github.com/dcloudio/WebFrameworkGrammar，广大开发者都在期待你给大家带来的便利。
另外共享框架语法是可以获得HBuilder积分奖励的哦。

JSDoc写法

/** 文档注释写在这里 ，生成JSDoc的快捷操作是敲/**回车。 */。

支持标签

下面是HBuilder会解析的一些标签，对JS解析引擎确定变量类型时有一定的帮助。

@alias

使用@alias可以给一个变量或者函数指定一个别名，代码提示时会提示该别名

语法

@alias aliasName

例子

(function(){  
/**  
 * @alias foo  
 */  
function _fooBar(){  

}  
window.foo = _fooBar;  
})();  
foo();

@constructor

使用@constructor可以标识一个函数是构造函数

语法

@constructor

例子

/**  
 * @constructor  
 */  
function Animal(name,weight){  
    this.name = name;  
    this.weight = weight;  
}  
var animal = new Animal('恐龙',10000);  
alert(animal.name);

@description

使用@description可以在代码提示时显示被描述变量或者函数的描述信息。

语法

@description 描述内容

例子

/**  
 * @description 这是一个构造函数  
 * @constructor  
 */  
function Animal(name,weight){  
    this.name = name;  
    this.weight = weight;  
}

代码截图

@example

使用@example可以提示代码示例。

语法

@example 示例内容

例子

/**  
 * @description 这是一个构造函数  
 * @example   
 * var animal = new Animal('恐龙',1000);  
 * @constructor  
 */  
function Animal(name,weight){  
    this.name = name;  
    this.weight = weight;  
}

代码截图

@extends

使用@extends用于标识继承于某个类型。

语法

@extends {Type}

例子

/**  
 * @description 这是一个构造函数  
 * @example   
 * var animal = new Animal('恐龙',1000);  
 * @constructor  
 */  
function Animal(name,weight){  
    this.name = name;  
    this.weight = weight;  

    this.say = function(){}  
}  

/**  
 * @extends {Animal}  
 */  
function Dog(){  
    this.say = function(){  
        console.log(this.name+":wang wang wang ...");  
    }  
}  
Dog.prototype = new Animal();  
var dog = new Dog();  
dog.name = "gougou";  
dog.say();

代码截图

@param

使用@param可以描述一个函数的参数以及参数类型，HBuilder扩展了参数值域的写法（目前只支持字符串值域）

语法

@param {Type[,Type,...]} ParameterName=[Value1|Value2[|Value3|...]] 参数描述

例子

/**  
 * 这是一个方法描述  
 * @param {String} method = [get|post] 可选值域包括get和post，get是直接请求，post是提交数据  
 */  
function Request(method) {}

代码截图

@property

使用@property可以描述一个对象的属性

语法

@property {Type[,Type,...]} propertyName 属性描述

例子

/**  
 * @property {IDString} id id元素  
 * @property {ClassString} classNames class样式  
 */  
var htmlOptions = {  
    id:null,  
    classNames:null  
}  
htmlOptions.id = "123";  
htmlOptions.classNames = "arrow area"

代码截图

@return

使用@return可以描述一个对象的属性

语法

@return {Type[,Type,...]}

例子

/**  
 * @return {HTMLDocument}  
 */  
function getDocument() {  
    //some code  
}  
getDocument().getElementById("123");

代码截图

@type

使用@type可以定义某个变量的类型

语法

@type {Type[,Type,...]}

例子

/**  
 * @type {IDString}  
 */  
var htmlId = null;  
htmlId = "123";

代码截图

类型语法

在上述JSDoc语法使用时，我们经常看到类型。不管是@extends、@param、@property还是@type，都涉及类型语法，都有些什么类型呢？
HBuilder定义了一套非常完善的类型系统，包括各种类型的组合，在写类型时提供了丰富的智能提示。

单一的类型

语法

{TypeName}

例子

这里定义一个类型为Document的变量  
/**  
 * @type {Document}  
 */  
var foo = null;

代码截图

多个类型

语法

{TypeName,TypeName[,TypeName,...]}

例子

这里定义一个类型为Document,HTMLElement的变量  
/**  
 * @type {Document,HTMLElement}  
 */  
var foo = null;

代码截图

这里的foo既是Document，同时也是HTMLElement，同时可以提示这2种类型的属性和方法。

函数类型

语法

{Function(firstParamType,secParamType,...):returnType}

例子

//这里定义一个参数为Event的回调函数  
/**  
 * @param {Function(Event)} callback  
 */  
function testCallBack(callback){}  

//这里定义一个返回类型是参数为IDString返回值为HTMLElement的函数。  
/**  
 * @return {Function(IDString):HTMLElement}   
 */  
function testFunctionReturn(){  
    return foo;  
}  
var rFunc = testFunctionReturn();  
rFunc('id').getElementsByClassName('classA');

代码截图

特殊类型

HBuilder为了对一些比较特殊的类型列表进行更智能的提示（比如id列表、样式列表、颜色列表、图片列表...的提示），特别定义了一批特殊类型列表。下面是扩展的各种类型的名字一览表。
IDString : 提示id的列表
ClassString : 提示class的列表
TagString : 提示html标签(tag)的列表
AttrString : 提示html标签属性的列表
AttrValueString : 提示html标签属性值域的列表
cssPropertyString : 提示css属性的列表
cssPropertyValueString : 提示css属性值域的列表
HTMLString : 能够支持在该字符串内部写html代码
CSSString : 能够支持在该字符串内部写css代码
URIString : 提示项目下所有文件的列表
ImageURIString : 提示项目下所有图片的列表
JSURIString : 提示项目下所有JS文件的列表
CSSURIString : 提示项目下所有CSS文件的列表
MultimediaString : 提示多媒体文件的列表
ColorString : 提示颜色的列表
FontString : 提示预置的字体列表
EventString : 提示事件名称的列表

下面是扩展的各种类型的代码提示样例截图。

IDString 提示id的列表。

ClassString 提示class的列表。

TagString 提示html标签(tag)的列表。

AttrString 提示html标签属性的列表。

AttrValueString 提示html标签属性值域的列表。

cssPropertyString 提示css属性的列表。

cssPropertyValueString 提示css属性值域的列表。

HTMLString 能够支持在该字符串内部写html代码

CSSString 能够支持在该字符串内部写css代码

URIString 提示项目下所有文件的列表。

ImageURIString 提示项目下所有图片的列表。

JSURIString 提示项目下所有JS文件的列表。

CSSURIString 提示项目下所有CSS文件的列表。

MultimediaString 提示多媒体文件的列表。

ColorString 提示颜色的列表。

FontString 提示预置的字体列表。

EventString 提示事件名称的列表。

mui如何增加自定义icon图标
===
mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；其次，mui中的图标并不是图片，而是字体，至于为什么使用字体图标而不是图片，相信web开发者多少都有所了解，简单列举几条：

• 多个图标字体合成一个字体文件，避免每张图片都需要联网请求；
• 字体可任意缩放，而图片放大会失真、缩小则浪费像素；
• 可通过css任意改变颜色、设置阴影及透明效果；

在实际项目中，开发者难免会需要自定义图标，此时该如何操作呢？本文以阿里巴巴矢量图标库为例（同样的网站有很多，比如icomoon，欢迎热心用户分享其它平台的使用方法），介绍一种用户自定义图标的方法，假设我们要做一个电商项目，需要补充男装、女装、购物车三个图标，如下为分步实现操作；

登录

浏览器访问阿里巴巴矢量图标库官网，选择登录方式，可直接使用新浪微博账号登录；

搜索图标

在右上角搜索“男装”，会列出当前网站上的所有男装图标，如下：

选择自己喜欢的图标，点击，会添加到右上角的购物车中，如下：

同样的方式分别搜索选择女装、购物车图标，结果如下：

之后点击“存储为项目”，输入项目名字，例如“mui-icon-custom”，点击“存储”按钮后，会跳转到项目管理页面，如下图所示：

下载字体

点击“下载到本地”按钮，会将合并后的字体文件及自动生成的css全部下载，如下：

修改css

默认的css代码如下：

@font-face {font-family: "iconfont";  
  src: url('iconfont.eot'); /* IE9*/  
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
  url('iconfont.woff') format('woff'), /* chrome、firefox */  
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */  
}  

.iconfont {  
  font-family:"iconfont" !important;  
  font-size:16px;  
  font-style:normal;  
  -webkit-font-smoothing: antialiased;  
  -webkit-text-stroke-width: 0.2px;  
  -moz-osx-font-smoothing: grayscale;  
}  

.icon-nanzhuang:before { content: "\e600"; }  

.icon-nvzhuang:before { content: "\e601"; }  

.icon-gouwuche:before { content: "\e602"; }

我们可稍作如下修改：

• 为保证和mui目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性；
• 只兼容iOS和Android版本的话，我们仅需要ttf格式的字体即可，其它字体可以删除；同时，我们也仅需保留-webkit前缀语法，-moz前缀部分可以删除；

修改后的css代码如下：

    @font-face {font-family: "iconfont";  
        src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
    }  

    .iconfont {  
        font-family:"iconfont" !important;  
        font-size:16px;  
        font-style:normal;  
        -webkit-font-smoothing: antialiased;  
        -webkit-text-stroke-width: 0.2px;  
    }  

    .icon-nanzhuang:before { content: "\e600"; }  

    .icon-nvzhuang:before { content: "\e601"; }  

    .icon-gouwuche:before { content: "\e602"; }

集成mui

将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，然后即可在mui中引用刚生成的字体图标，我们以选项卡为例，代码如下：

    <nav class="mui-bar mui-bar-tab">  
        <a class="mui-tab-item mui-active">  
            <span class="mui-icon iconfont icon-nanzhuang"></span>  
            <span class="mui-tab-label">男装</span>  
        </a>  
        <a class="mui-tab-item">  
            <span class="mui-icon iconfont icon-nvzhuang"></span>  
            <span class="mui-tab-label">女装</span>  
        </a>  
        <a class="mui-tab-item">  
            <span class="mui-icon iconfont icon-gouwuche"></span>  
            <span class="mui-tab-label">购物车</span>  
        </a>  
        <a class="mui-tab-item">  
            <span class="mui-icon mui-icon-gear"></span>  
            <span class="mui-tab-label">设置</span>  
        </a>  
    </nav>

主要代码：将mui默认的icon（如mui-icon-home）替换成iconfont icon-nanzhuang，修改后预览效果如下：

包括CSS 和JS的API部分 一直都没有找到一个详细的说明 请官方尽快完善，谢谢！！

plus.device.dial( number, confirm )启动的是拨打电话的界面，并不会直接拨出电话。
直接拨出电话的nativeJs代码：

var Uri = plus.android.importClass("android.net.Uri");
var Intent = plus.android.importClass("android.content.Intent");
var number = new Uri.parse("tel:4001109999");
var callIntent = new Intent(Intent.ACTION_CALL, number);//这步是关键，ACTION_CALL而不是ACTION_DIAL
plus.android.runtimeMainActivity().startActivity(callIntent);

后来发现，原来官方的文档里是有的。

JSDoc规范的注释能生成吗；还有就是发起问题的时候选择不了分类是怎么回事

手机拍照的图片很大，直接上传很慢很费流量。

html5+的app

此时有几种处理方式：

1. 使用HTML5+提供的plus.zip里的compressImage
   具体见：http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage
2. 使用前端的js图片处理库来压缩图片
   方案1：http://ask.dcloud.net.cn/question/2089
   方案2：用canvas处理http://ask.dcloud.net.cn/question/2078
   方案3：jq有图片压缩插件http://ask.dcloud.net.cn/question/1791
3. 使用Native.js
   Android手机有个系统级的api，可以可视化的裁剪图片。
   http://ask.dcloud.net.cn/question/8314

几种方式的特点和取舍。
plus api效率高，同时兼容ios和Android，但没有可视化界面，如果要指定区域裁剪，需要自己做可视化界面。
前端的处理方式性能略低，但好处是如果想同时用在公众号、wap站里，可以直接复用。
Native.js的方式只适合Android，并且部分Android手机有兼容性问题，但好处是如果做可视化裁剪，可视化界面不用自己做了，系统自带了。

关于录音压缩，由于录音时已经调用了系统的压缩算法，所以没必要进一步压缩了。
视频压缩参考：https://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressVideo

uni-app

• 图片压缩：https://uniapp.dcloud.io/api/media/image.html#chooseimage
• 视频压缩：https://uniapp.dcloud.io/api/media/video.html

DOM结构

关于mui页面的dom，你需要知道如下规则。

固定栏靠前

所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；

一切内容都要包裹在mui-content中

除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：

    .mui-bar-nav ~ .mui-content {  
        padding-top: 44px;  
    }  
    .mui-bar-footer ~ .mui-content {  
        padding-bottom: 44px;  
    }  
    .mui-bar-tab ~ .mui-content {  
        padding-bottom: 50px;  
    }

你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。

始终为button按钮添加type属性

若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

窗口管理

页面初始化：必须执行mui.init方法

mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；

页面跳转：抛弃href跳转

当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用mui.openWindow方法打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；
扩展阅读：

• hello mui中的无等待窗体切换是如何实现的
• 提示HTML5的性能体验系列之一 避免切页白屏

页面关闭：勿重复监听backbutton

mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。

手势操作

点击：忘记click

快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，统统使用如下代码：

    element.addEventListener('tap',function(){  
        //点击响应逻辑  
    });

常见错误

Uncaught ReferenceError: plus is not defined

在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，否则可能会报“plus is not defined”的错误；
mui为简化开发，将plusReady事件封装成了mui.plusReady()方法，凡涉及到HTML5+的api，建议都写在mui.plusReady方法中；

打开一个新窗口，使用mui.openWindow,然后报出mui is not defined,这个错误无法定位bug，折腾了好一会，最终发现是url写错了。

或许有谁也报了这种错误，然后找到错误原因，也贴在这下面，能减少我们这些新手很多困惑。

不知官方对于异常是否能优化一下，抛出更明确的错误信息。而不是现在这样的