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写错了。

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

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

HBuilder默认只提示标准的HTML5语法。很多框架有自己的HTML、JS语法，也希望在开发中被提示。
HBuilder提供如下扩展方案。

JS部分

1. 基于sdocml的框架语法库
   对工程点右键，引入框架语法，可以看到我们已经做了的一些常用框架语法库，包括jquery、zepto、mui。
   其他框架语法，大家可参考这些语法库的sdocml文件格式，来自己做。
   做好后提交到 https://github.com/dcloudio/WebFrameworkGrammar 以共享给更多开发者。
2. jsdoc
   HBuilder兼容jsdoc规范，如果开发者的jsdoc写的完善，一样可以被HBuilder的代码助手良好的提示出来。
   jsdoc+的扩展规范地址：http://ask.dcloud.net.cn/article/129
   jsdoc的好处是分发容易，跟着js文件一起分发；坏处是造成js文件体积变大，影响性能。
   常见的做法是提供2个js文件给开发者，比如ext-dev.js和ext-min.js。dev包括jsdoc而min是压缩版。
   另外注意js文件的体积，比如ext-dev.js的官方文件高达6M，这样的文件HBuilder解析起来还是有压力的。
3. js代码块
   我们也可以通过代码块的方式来扩展js提示。
   点菜单工具-扩展代码块-js，可以看到详细说明和教程。
   代码块并不是简单的xml配置，而是可以使用ruby编程的，功能很强大。
   扩展的代码块，可以提交到 https://github.com/dcloudio/HBuilderRubyBundle 以共享给更多开发者。

HTML部分

HTML部分目前只能通过代码块扩展，代码块的扩展包括标签和属性2部分，在工具-扩展代码块-HTML里有说明。
扩展的代码块，可以提交到 https://github.com/dcloudio/HBuilderRubyBundle 以共享给更多开发者。

系列文章导航：
状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
Android平台设置沉浸式状态栏显示效果
iOS平台设置沉浸式状态栏显示效果

正文：

应用可视区域到系统状态栏下透明显示效果，如下图所示：

此模式下应用占用全屏区域，而系统状态栏会拦截用户操作事件，此时需要预留出系统状态栏高度。
获取系统状态栏高度及沉浸式状态判断参考：如何动态判断沉浸式状态栏模式。

HBuilder创建的应用默认不使用沉浸式状态栏样式，需要进行如下配置开启：
打开应用的manifest.json文件，切换到代码视图，在plus -> statusbar 下添加immersed节点并设置值为true。

"plus": {  
    "statusbar": {  
        "immersed": true  
    }  
}

如下图所示：

保存后提交App云端打包

注意事项：

1. 真机运行不生效，需提交App云端打包后才生效；
2. 此功能仅在iOS7及以上系统有效。
   3. 设置沉浸式状态栏后顶部有灰条的问题解决
   iOS11以上系统当启用沉浸式式状态栏后，webview默认会调整内容至安全区域之内，视觉效果如下图:
   如果不需要自动调整可以在meta(name="viewport")节点的content属性值中添加viewport-fit=cover
   
   
   
   
   

状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
iOS平台5+SDK原生环境配置方法
Android平台设置沉浸式状态栏显示效果

服务器无法接收到提交的数据

• 确保手机网络畅通，能访问服务器地址（可用手机浏览器打开请求的网址）
• 确保提交的数据内容格式（XMLHttpRequest默认提交的content-type为“text/plain;charset=UTF-8”）

  var xhr=new plus.net.XMLHttpRequest();  
  xhr.onreadystatechange=function(){  
  console.log('onreadystatechange: '+xhr.readyState);  
  };  
  xhr.open( ‘POST’, ‘http://demo.dcloud.net.cn/test/xhr/’ );  
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  
  xhr.send('user=HBuilder&test=value');

XMLHttpRequest的setRequestHeader改不了contentype

http://ask.dcloud.net.cn/question/672

XMLHttpRequest的post请求时怎么传值？

http://ask.dcloud.net.cn/question/202

XMLHttpRequest在IOS中不可用？

http://ask.dcloud.net.cn/question/422

此文档已过期，文件上传不支持断点续传功能，上传数据使用HTTP/HTTPS标准规范Multipart/form-data格式

技术规范

文件上传传输协议基于标准的http协议中的multipart/form-data格式，为支持断点续传功能，采用对HTTP协议扩展，规定单个文件上传的Range，用于保存上传的数据段位置信息。
文件上传业务需兼容https协议，可无缝切换到https传输通道。

文件上传业务流程

为了兼容各种服务器，5+ runtime需兼容两种模式，在连接不支持断点续传的服务器时采用非断点方式上传，在连接支持断点续传的服务器时采用断点模式分段提交数据。

文件删除传输协议

1. 向服务器询问是否支持断点续传
   该查询包括服务器是否支持扩展协议和任务上传的状态，每次任务启动时都要进行查询，如果服务器发送的格式错误认为不支持，直接使用标准HTTP协议传输。
   上传数据格式（POST）：
   HTTP头
   Content-Type：application/x-www-form-urlencoded
   数据体
   数据体格式为url参数对需要进行url编码，包括以下字段：
   server：固定为字符串"uploader" ；
   action：固定为字符串"query"；
   boundary：采用multipart/form-data格式的boundary值；
   如：
   server=uploader&action=query&boundary= ----WebKitFormBoundaryaXBIy1C8VXJFfgdS
   Boundary 值为客户端提交的上传任务唯一标识,由客户端生成提交。

2. 服务器返回断点续传信息
   服务器下发数据为JSON格式，内容携带protocal、 support、file、data等字段，格式如下：
   {
   protocol: "uploder",
   support: true,
   boundary: "boundary",
   file: [ { name: "headimage",
   range: "0-102400"
   }
   ],
   data: [ { name: "name"
   }
   ]
   }
   protocol 值为uploader可没有
   support 值为Bool，必选 用来只是服务器是否支持此协议
   boundary 值为boundary，必选 跟客户端上传的boundary一致
   file值为file对象数组，关于file对象的约定，name为单个文件的唯一标识，值跟客户端上上传的字段名一致，必须包含range字段标识服务器已经接受的数据范围，其他属性不做要求

3. 客户端向服务器提交上传数据
   数据发送采用标准HTTP MIME封装格式的扩展Content-Type为multipart/form-data；boundary=%boundaryid%，其中boundaryid值用于标识上传任务，客户端需通过算法生成任务标识保证其唯一性。
   为了支持上传文件的断点续传，在multipart/form-data格式的数据段中，需扩展Content- Disposition字段，添加range属性，其值用于表明当前传输的数据段，格式如下：
   Content- Disposition: …; range=”start-end/totalsize”，示例如下：
   Content- Disposition: form-data; name="file"; filename="image.jpg"; range=”102400-204800/456770”
   若服务器不支持断点续传，则不传输range属性数据。
   服务器在收到数据后根据Range进行文件组装，成功完整后返回200，客户端发送下一段数据。

4. 服务器返回提交上传数据结果 服务器接收到上传数据后根据Range进行文件组装，操作成功后返回200，并在数据体中下发JSON数据，内容携带result字段，格式如下： { result: "OK", code: %ErrorCode%, message: "Error message" } result 值为上传数据的结果，上传成功固定值为"OK"，上传失败固定值为"ERROR"。 code 值为可选数据，数字类型，通常在上传失败时用于保存错误代码，成功时其值为0，参考错误列表。 message 值为可选数据，通常在上传失败时用于保存错误提示信息。 服务器如果接收数据失败则http头中的，如4xx。 错误列表：	错误代码	说明
   0	Success
   4001	File exceeded upload_max_filesize
   4002	File exceeded max_file_size
   4003	File only partially uploaded
   4004	No file uploaded
   4006	Cannot upload file: No temp directory specified
   4007	Upload failed: Cannot write to disk
   4008	File upload stopped by extension

示例

1. 向服务器询问是否支持断点续传
   POST /FileUploader/ HTTP/1.1
   Host: www.baidu.com
   Accept-Encoding: gzip, deflate
   Content-Type: application/x-www-form-urlencoded
   Content-Length: 46
   Accept-Language: en-us
   Accept: /
   Connection: keep-alive
   User-Agent: MSC_Pandora/1.0 CFNetwork/609.1.4 Darwin/11.4.2
   server=uploader&action=query&boundary=----WebKitFormBoundaryaXBIy1C8VXJFfgdS

2. 服务器返回断点续传信息
   HTTP/1.1 200 Found
   Date: Mon, 25 Mar 2013 03:00:35 GMT
   Server: Apache
   Location: http://www.baidu.com/search/error.html
   Cache-Control: max-age=86400
   Expires: Tue, 26 Mar 2013 03:00:35 GMT
   Content-Length: 222
   Connection: Keep-Alive
   Content-Type: text/html; charset=iso-8859-1
   {protocol:”uploder”,support:true,boundary:”----WebKitFormBoundaryaXBIy1C8VXJFfgdS”, file:[{name:”headimage”,range:”0-102400”}],data:[{name:”name value”}]}

3. 客户端向服务器提交上传数据
   POST /FileUploader/servlet/Uploader HTTP/1.1
   Host: localhost:8080
   Referer: http://localhost:8080/FileUploader/
   Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
   Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaXBIy1C8VXJFfgdS
   Content-Length: 104010
   Accept-Language: en-us
   Origin: http://localhost:8080
   Accept-Encoding: gzip, deflate
   Cookie: JSESSIONID=D59492623EA81462A605B216B4A9E976
   Connection: keep-alive
   User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B141

------WebKitFormBoundaryaXBIy1C8VXJFfgdS
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg

......JFIF.............XExif..MM.*...................i.........&.............................6...........5.......C.........................................
......QE..QE..QE..QE..QE..QE..QE..QE..QE..QE..QE..QE..QE..QE..QE..QE..QE..QE....
------WebKitFormBoundaryaXBIy1C8VXJFfgdS
Content-Disposition: form-data; name="file"; filename="image.jpg"; range=”102400-204800/456770”
Content-Type: image/jpeg

......JFIF.............XExif..MM.*...................i.........&.............................6...........5.......C.........................................
....
------WebKitFormBoundaryaXBIy1C8VXJFfgdS
Content-Disposition: form-data; name="submit"

......
------WebKitFormBoundaryaXBIy1C8VXJFfgdS--

4. 服务器返回上传数据结果
   HTTP/1.1 200 OK
   Date: Mon, 25 Mar 2013 03:00:35 GMT
   Server: Apache
   Location: http://www.baidu.com/search/error.html
   Cache-Control: max-age=86400
   Expires: Tue, 26 Mar 2013 03:00:35 GMT
   Content-Length: 222
   Connection: Keep-Alive
   Content-Type: text/html; charset=iso-8859-1
   {result:”OK”}