系列文章目录导航：

• 提升HTML5的性能体验系列之一 避免切页白屏
• 提升HTML5的性能体验系列之二 列表流畅滑动
• [提升HTML5的性能体验系列之三 流畅下拉刷新]
• 提升HTML5的性能体验系列之四 使用原生UI（nativeUI）
• 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
• 提升HTML5的性能体验系列之六 降低内存占用

本文更新于2017-5-8

下拉刷新

为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）。
解决方案有如下2种。

1.原生circle下拉刷新
既然拉div卡，我们就不拉div，而是拉一个原生的圈圈下来。
在Android上，google官方提供了一个下拉刷新样式。5+引擎将其封装给js调用。如下图

在一个HTML页面中，title区域仍然是普通dom，不是双webview也不是原生头，在这个webview的style里指定下拉刷新的circle模式，配置起始位置高度，就可以在该webview拉到顶部后再次下拉时在指定位置出现一个旋转的箭头。
api见：http://html5plus.org/doc/zh_cn/webview.html里搜索circle。
示例代码参考Hello mui里pull to refresh（下拉刷新和上拉加载）中的单webview模式。
iOS上也可以使用circle方式。使用同样的代码，在iOS上也有同样的下拉刷新效果。

2. 双webview上下拉开式下拉刷新
   官方推荐使用高性能的circle下拉刷新方式，但如果实在不能接受circle这种风格，需要上下拉开的下拉刷新，那么可以使用如下方案。
   拉div卡那就不拉div，改拉webview。webview的拉动是原生的，回弹效果也是原生的，体验与原生一致。
   此时需要双webview的父子页面，思路是在父页面写title，title下面10像素左右写一个文字“下拉可刷新”。
   然后append一个子webview，并在style里设置为可下拉。
   那么在把子webview往下拉时，会露出父页面的“下拉可刷新”字样，并且在拉到一定距离后会触发一个事件，js捕获到这个事件后可以更改“下拉可刷新”为“松开可刷新”。同样松开也会触发一个事件。
   这种模式，下拉漏出的内容是在父页面的HTML中写的，所以样式可以随便定制，实现个性化下拉刷新。

但目前上下拉开的下拉刷新，Android和iOS有实现差异。
上述模式为Android模式。在iOS上，不能在父页面title下面随便定制下拉露出内容的样式，而是需要在子webview的style里配置。
API同样是在http://html5plus.org/doc/zh_cn/webview.html，搜索WebviewRefreshStyles，style里选default模式。
因为是配置方式，iOS上这种模式的下拉刷新无法实现非常个性化的效果。
如果实在需要iOS上做个性化下拉刷新，也可以使用div方式，毕竟iOS上的div拉动性能还是没多大问题的。
为了方便开发者一套代码解决问题，mui框架对2种方案进行了统一封装，即Android上使用双webview自定义下拉刷新，iOS上使用了div下拉刷新。
参考：http://dev.dcloud.net.cn/mui/pulldown/

注意双webview模式增加了app的内存和渲染压力，官方首推的是单webview的circle模式的下拉刷新。

上拉翻页

App里很常见的列表是滚到最下面时载入下一页内容。
传统的思路里，是依靠js监听滚动条位置来实现。这导致任意滚动列表时，都会造成这个监听事件触发，容易引发列表滑动卡顿。
HTML5Plus扩展了一个事件，是原生的下拉到底事件，在webview滚动条到底部时会自动触发。
这样js只需监听这个拉到底事件即可，提升了App的执行性能。
5+ API参考：http://www.html5plus.org/#specification#/specification/Events.html
MUI封装参考：http://dev.dcloud.net.cn/mui/pullup/

这些代码示例在Hello H5+和Hello mui中都有。

1. 新建web项目，选微信模板。创建好后的项目页面内容自带了微信JS SDK的初始化代码。

2. 在js里敲wx，会出现微信JS SDK对象及大量代码块，由于微信JS SDK有不少匿名函数用法，代码比较多，这些整理好的代码块可以大幅提升开发效率。

3. wx对象的框架语法库以sdocml的形式已经预置在HBuilder里，自动挂载在微信项目上。
   所有微信JS SDK的语法提示、参数都可以无死角提示，并且自带API说明。

如果新建项目不选微信模板，也可以通过以下2种方式做提示：

1. 对项目点右键，引入框架语法，选微信JS SDK框架语法库。
2. 引用微信JS-SDK的js文件<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>，HBuilder会自动识别并加载微信的JS-SDK的框架语法库。

注意，由于微信并不支持HTML放在手机端离线运行，所以微信项目模板仍属于web项目分类。
移动App项目是指在手机端本地运行的App。

微信JS SDK的官方API手册说明地址： http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

  关于mui官方提供的文档，个人感觉有点儿杂乱，很不利于开发。故鄙人专门花了一天时间，对官网提供的api进行了一下整理，编辑成chm格式。现发布在此，供广大的开发者免费学习使用。对于本文档，只可用于开发者学习使用，严禁以营利为目的的下载、传播等。  
  若在使用该文档过程中发现bug，可向zsf513@gmail.com发邮件进行反馈，大家一起来进行完善。  

1.切换到你想用快捷键的视图（如开发视图、边改边看视图）

2. 点击视图、定制透视图
   
3. 选择命令选项卡
   
4. 选择SVN或Git
5. 设置成功后会在帮助菜单前生成SVN、Git等菜单
6. 在工具-选项-快捷键中为SVN、Git等操作绑定快捷键即可

从14年8月开始正式使用hbuilder到现在也有快半年了，我们的app经过漫长的历程终于有成果了。
简单说说，14年3月接触hbuilder，觉得这真是一个非常不错的工具，之前都是用phonegap+jquerymobile来做app，由于不是走的android和ios开发路线，
也碰到很多问题，但是一直觉得移动互联网是未来的一个发展趋势，5月公司外包app给别公司做，但是两个月后出来的app实在不咋的，关键是源生的app
在某个功能上还不支持，导致app没有上线，8月我极力推荐使用webapp，至少能解决那个源生app不支持的功能(与银行有关)，8月底项目正式开始，从页面
设计，到后台设计，前台开发，历时1个月终于在国庆节时完成(吐槽一下，那真是黑暗的一个月，程序猿命苦)，期间各种问题，各种想办法解决，特别是不同机型在某些
页面上会出很多稀奇古怪的bug，即使相同机型不同的android版本也是如此(对android无力吐槽)，android完成后ios就特别快了，几天搞定(但是未提交审核)，完成后给一些重要
的客户试用了一下，提了一些问题，然后重新进行了一些调整，在11月底正式面向所有用户推出了android版本，以上都是废话，下面才是重点。

说下ios的版本，要先到ios的开发者中心申请一个appid，再缴$99获得一年的开发权，申请一个用户appstore使用的appid，然后要在mac上创建一个私钥，根据这个私钥在ios开发者中心
里创建一个cer证书，下载这个证书到本地，在证书管理里面和私钥一起生成一个.p12的私钥证书文件，至此所有的准备工作完成，通过hbuilder的线上打包，打完是个ipa文件，这个文件
就可以通过mac上的application loader程序提交了，友情提示，如果出现error description not available这个错误提示，可能是网络问题，建议用手机建一个热点，mac连上后再上传文件，
最后从itunes conect里提交审核，审核时间如果不出意外一般在15天左右，如果出现意外(我们的app被拒了一次)，一次意外加一周，我们的app除去圣诞大概在23天左右审核通过了。
感谢DCloud-App导师，感谢DCloud-MUI-CHB的帮助。

以下接着废话，蛋疼的是审核时间太长，android已经更新了两个版本，所以要在下个版本进行同步了。
中间多少汗和泪就不说了，走这条路确实辛苦，但是也有很多收获，希望大家多多交流，一起进步，活跃在论坛的各个角落。
我们的网址是(www.dtcash.com)，论坛里有网站方面的高手可以加我qq聊聊最新的一些技术 我的qq是524014724

更新：目前plus.share已经实现了对系统分享的调用。已无必要使用Native.js调用系统分享。参考http://www.html5plus.org/doc/zh_cn/share.html#plus.share.sendWithSystem

============================================================================

先说明，我对原生只是有一点点了解。我的目的是教大家，希望大家也可以自己写native.js。
前几天我问为什么不集成 Intent.ACTION_SEND 分享，@DCloud_heavensoft 说官方刚好正在做。
今晚读了一下：
http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/114
http://www.dcloud.io/docs/api/zh_cn/android.shtml
对比了一下示例和网上找的原生代码，试着捣鼓，也捣鼓出来了。
二楼放代码，三楼放教程。

二楼不支持MD，那这里更新好了，直接拿去用就行了

function share(shareTip,shareText){  
var Context = plus.android.importClass("android.content.Intent");  
var Main = plus.android.runtimeMainActivity();  
var shareIntent=new Context(Context.ACTION_SEND);  
shareIntent.setType("text/plain");   
shareIntent.putExtra(Context.EXTRA_TEXT, shareText);  
Main.startActivity(Context.createChooser(shareIntent,shareTip));  
}  
//调用  
share('分享到...','要分享的文本');

带注释

function share(shareTip,shareText){  
    //导入Java类对象  
    var Context = plus.android.importClass("android.content.Intent");  
    //获取应用主Activity  
    var Main = plus.android.runtimeMainActivity();  
    //将类Context的这个行为(Action)ACTION_SEND，赋给shareIntent  
    var shareIntent=new Context(Context.ACTION_SEND);  
    //***以下两种写法是一样的  
    //plus.android.invoke(shareIntent,"setType","text/plain");  
    //plus.android.invoke(shareIntent,"putExtra",Context.EXTRA_TEXT,shareText);  
    //设置分享类型  
    shareIntent.setType("text/plain");   
    //设置分享文本  
    shareIntent.putExtra(Context.EXTRA_TEXT, shareText);  
    //***以上两种写法是一样的  
    //指定分享的包名  
    //shareIntent.setPackage('com.tencent.mm',);  
    Main.startActivity(Context.createChooser(shareIntent,shareTip));  
}

原生代码这样写，大家对比下，就发现不难懂，字符对应上

Intent sendIntent = new Intent(android.content.Intent.ACTION_SEND);  
sendIntent.putExtra(Intent.EXTRA_TEXT, "This is my text to send.");  
sendIntent.setType("text/plain");  
startActivity(Intent.createChooser(sendIntent,'send to...'));

由于mui中自带的下拉组件存在bug，一个项目中无法有多个，因此改造了iscroll5作为下拉刷新的组件，以下是代码，请参考。

首先是页面布局，iscroll的推荐的wrapper和scroller两个div，也使用了mui的一些样式。

<div id="wrapper" class="mui-content mui-iscroll-wrapper">  
                <div id="scroller">  
                    <div id="pullDown" class="ub ub-pc c-gra">  
                        <div id="pullDownIcon"></div>  
                        <div id="pullDownLabel">下拉刷新</div>  
                    </div>  
                    <ul class="mui-table-view mui-table-view-chevron" id="dataList"></ul>  
                    <div id="pullUp" class="ub ub-pc c-gra">  
                        <div id="pullUpIcon"></div>  
                        <div id="pullUpLabel">上拉显示更多...</div>  
                    </div>  
                </div>  
</div>

样式的css，主要是下拉和上拉以后的一些样式定义，比较简陋

<style>  
            #wrapper {  
                position: absolute;  
                top: 40px;  
                bottom: 0px;  
                left: 0;  
                width: 100%;  
                background: #ccc;  
                overflow: hidden;  
            }  
            #pullDown,  
            #pullUp {  
                height: 40px;  
                line-height: 40px;  
                padding: 5px 10px;  
                font-weight: bold;  
                font-size: 14px;  
                color: #888;  
            }  
            #pullDown .pullDownIcon,  
            #pullUp .pullUpIcon {  
                display: block;  
                float: left;  
                width: 40px;  
                height: 40px;  
                background: url(img/pull-icon@2x.png) 0 0 no-repeat;  
                -webkit-background-size: 40px 80px;  
                background-size: 40px 80px;  
                -webkit-transition-property: -webkit-transform;  
                -webkit-transition-duration: 250ms;  
            }  
            #pullDown .pullDownIcon {  
                -webkit-transform: rotate(0deg) translateZ(0);  
            }  
            #pullUp .pullUpIcon {  
                -webkit-transform: rotate(-180deg) translateZ(0);  
            }  
            #pullDown.flip .pullDownIcon {  
                -webkit-transform: rotate(-180deg) translateZ(0);  
            }  
            #pullUp.flip .pullUpIcon {  
                -webkit-transform: rotate(0deg) translateZ(0);  
            }  
            #pullDown.loading .pullDownIcon,  
            #pullUp.loading .pullUpIcon {  
                background-position: 0 100%;  
                -webkit-transform: rotate(0deg) translateZ(0);  
                -webkit-transition-duration: 0ms;  
                -webkit-animation-name: loading;  
                -webkit-animation-duration: 2s;  
                -webkit-animation-iteration-count: infinite;  
                -webkit-animation-timing-function: linear;  
            }  
            .-webkit-keyframes loading {  
                from {  
                    -webkit-transform: rotate(0deg)translateZ(0);  
                }  
                .to {  
                    -webkit-transform: rotate(360deg) translateZ(0);  
                }  
            }  
        </style>  

关键的js代码

var firstresult = 0;  
                    var pagesize = 20;  
                    var stocktype = 0;  

                    var myScroll;  
                    var pullDownEl, pullDownL;  
                    var pullDownc, pullUpc;  
                    var pullUpEl, pullUpL;  
                    var Downcount = 0,  
                        Upcount = 0;  
                    var loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新    

                    function pullDownAction() { //下拉事件    
                        setTimeout(function() {  
                            var el, li, i;  
                            //plus.nativeUI.showWaiting();  
                            console.log('触发了下拉更多');  
                            removeClass(pullDownEl, 'loading');  
                            pullDownL.innerHTML = '下拉显示更多...';  
                            pullDownEl['class'] = pullDownEl.className;  
                            pullDownEl.className = '';  
                            pullDownEl.style.display = 'none';  
                            initData(stocktype);  

                            loadingStep = 0;  
                            //plus.nativeUI.closeWaiting();  
                        }, 1000); //1秒    
                    }  

                    function pullUpAction() { //上拉事件    
                        setTimeout(function() {  
                            var el, li, i;  
                            console.log('出发了上拉刷新事件');  
                            removeClass(pullUpEl, 'loading');  
                            pullUpL.innerHTML = '上拉显示更多...';  
                            pullUpEl['class'] = pullUpEl.className;  
                            pullUpEl.className = '';  
                            pullUpEl.style.display = 'none';  
                            nextPage(stocktype);  
                            //myScroll.refresh();  
                            loadingStep = 0;  
                        }, 1000);  
                    }  

                    function loaded() {  
                        pullDownEl = document.getElementById('pullDown');  
                        pullDownL = document.getElementById('pullDownLabel');  

                        pullDownEl['class'] = pullDownEl.className;  
                        pullDownEl.className = '';  
                        pullDownEl.style.display = 'NONE';  

                        pullUpEl = document.getElementById('pullUp');  
                        pullUpL = document.getElementById('pullUpLabel');  
                        pullUpEl['class'] = pullUpEl.className;  
                        pullUpEl.style.display = 'NONE';  

                        myScroll = new IScroll('#wrapper', {  
                            probeType: 2, //probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。    
                            scrollbars: true, //有滚动条    
                            mouseWheel: true, //允许滑轮滚动    
                            fadeScrollbars: true, //滚动时显示滚动条，默认影藏，并且是淡出淡入效果    
                            bounce: true, //边界反弹    
                            interactiveScrollbars: true, //滚动条可以拖动    
                            shrinkScrollbars: 'scale', // 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.    
                            click: true, // 允许点击事件    
                            keyBindings: true, //允许使用按键控制    
                            momentum: true // 允许有惯性滑动    
                        });  

                        //滚动时    
                        myScroll.on('scroll', function() {  
                            if (loadingStep == 0 && !pullDownEl.className.match('flip|loading') && !pullUpEl.className.match('flip|loading')) {  
                                if (this.y > 5) {  
                                    //下拉刷新效果    
                                    pullDownEl.className = pullUpEl['class'];  
                                    pullDownEl.style.display = '';  
                                    myScroll.refresh();  
                                    pullDownEl.className += 'flip';  
                                    pullDownL.innerHTML = '准备刷新...';  
                                    loadingStep = 1;  
                                } else if (this.y < (this.maxScrollY - 5)) {  
                                    //上拉刷新效果    
                                    pullUpEl.className = pullUpEl['class'];  
                                    pullUpEl.style.display = '';  
                                    myScroll.refresh();  
                                    pullUpEl.className += 'flip';  
                                    pullUpL.innerHTML = '准备刷新...';  
                                    loadingStep = 1;  
                                }  
                            }  
                        });  
                        //滚动完毕    
                        myScroll.on('scrollEnd', function() {  
                            if (loadingStep == 1) {  
                                if (pullUpEl.className.match('flip|loading')) {  
                                    removeClass(pullUpEl, 'flip');  
                                    addClass(pullUpEl, 'loading');  

                                    pullUpL.innerHTML = 'Loading...';  
                                    loadingStep = 2;  
                                    pullUpAction();  
                                } else if (pullDownEl.className.match('flip|loading')) {  
                                    removeClass(pullDownEl, 'flip');  
                                    addClass(pullDownEl, 'loading');  

                                    pullDownL.className = 'Loading...';  
                                    loadingStep = 2;  
                                    pullDownAction();  
                                }  
                            }  
                        });  
                        //初始化数据  
                        initData();  
                    }  

                    function initData() {  
                        firstresult = 0;  
                        getData('0', stocktype);  
                        document.getElementById("dataList").innerHTML ='';  
                        //refresh  
                        myScroll.refresh();  
                    }  

                    function nextPage() {  
                        firstresult += pagesize;  
                        getData('1', stocktype);  
                        myScroll.refresh();  
                    }  

                    function getData(flag) {  
                        var url = ‘’;  

                        JSONP({  
                            url: url,  
                            data: {  
                                firstresult: firstresult,  
                                maxcount: pagesize  
                            },  
                            success: function(data) {  

                                var source = document.getElementById("contact-template").innerHTML;  
                                var template = Handlebars.compile(source);  
                                var wos = {  
                                    wos: data.result  
                                };  
                                if (flag == '1') {  
                                    document.getElementById("dataList").innerHTML += template(wos);  
                                } else {  
                                    document.getElementById("dataList").innerHTML = template(wos);  
                                }  

                            },  
                            error: function(data) {  
                                console.log(objToString(data));  
                            }  
                        });  
                    }

项目用了handlerbars。

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，修改后预览效果如下：