零基础的你在今年这个时间开始学习移动开发真是最好不过了，每个人应该都有一些移动应用的创意，而且你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识， 懂一些CSS和JavaScript就够了，跨平台移动APP开发是利用HTML5+CSS3+JS，快速开发出本地App，一次开发，多平台适配，效果与原生App相媲美。从零基础到实战！学习跨平台app开发就在这里>>>跨平台app开发全套课程

Dcloud官方合作培训机构-国内首推跨平台app开发培训-东翌学院 咨询课程老师QQ2971611409，小班直播教学+课后辅导+全套课程视频+源码，从零基础到实战，30天学会跨平台App开发！Tel：17090057793

color(颜色)

mui中组件以iOS 7为基础，补充部分Android特有控件，颜色值主要有以下五种：

primary => #007aff; //蓝色(blue)  
success => #4cd964; //绿色(green)  
warning => #f0ad4e; //黄色(yellow)  
danger  => #dd524d; //红色(red)  
royal   => #8a6de9; //紫色(purple)

注：上述primary等颜色值关键词在引用的时候可以替换成对应的颜色单词，如.mui-btn-primary等效于.mui-btn-blue;

badge（数字角标）：默认背景为灰色，另外mui内置了蓝色（primary/blue）、绿色(success/green)、黄色(warning/yellow)、红色(danger/red)、紫色（royal/purple）五种颜色，通过给button或者a标签添加.mui-badge-* 类添加背景颜色。如：

<span class="mui-badge">1</span>  
<span class="mui-badge mui-badge-primary">2</span>  
<span class="mui-badge mui-badge-success">3</span>  
<span class="mui-badge mui-badge-warning">4</span>  
<span class="mui-badge mui-badge-danger">5</span>  
<span class="mui-badge mui-badge-royal">6</span>

button（按钮）：默认背景为白色，另外mui内置了蓝色（primary/blue）、绿色(success/green)、黄色(warning/yellow)、红色(danger/red)、紫色（royal/purple）五种颜色，通过给button或者a标签添加.mui-btn-* 类添加背景颜色。

<button type="button" class="mui-btn">默认</button>  
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>  
<button type="button" class="mui-btn mui-btn-success">绿色</button>  
<button type="button" class="mui-btn mui-btn-warning">黄色</button>  
<button type="button" class="mui-btn mui-btn-danger">红色</button>  
<button type="button" class="mui-btn mui-btn-royal">紫色</button>

switch(开关)：默认值为绿色，可选颜色为蓝色，添加.mui-switch-blue类即可。

<div class="mui-switch mui-active">  
    <div class="mui-switch-handle"></div>  
</div>  
<div class="mui-switch mui-switch-blue mui-active">  
    <div class="mui-switch-handle"></div>  
</div>

任意元素：可以给任意元素添加.mui-bg-*类添加背景颜色，可选参数为primary/positive/negative。

<div class="mui-bg-primary">我是蓝色背景</div>  
<div class="mui-bg-positive">我是绿色背景</div>  
<div class="mui-bg-negative">我是红色背景</div>

文字(font)

文字位置： 可以给文字添加 .mui-text-left、.mui-text-center、.mui-text-right设置文字位置。

<div class="mui-text-left">我在左边</div>  
<div class="mui-text-center">我在中间</div>  
<div class="mui-text-right">我在右边</div>

溢出隐藏：当文字内容超过一行或者多行时，溢出文本用省略号代替。

显示单行：

<p class="mui-ellipsis">我在一行内，当我超出了会显示省略号。我在一行内，当我超出了会显示省略号。我在一行内，当我超出了会显示省略号。我在一行内，当我超出了会显示省略号。</p>

显示两行：

<p class="mui-ellipsis-2">我在两行内，当我超出了会显示省略号。我在两行内，当我超出了会显示省略号。我在两行内，当我超出了会显示省略号。我在两行内，当我超出了会显示省略号。我在两行内，当我超出了会显示省略号。</p>

若需要设置显示多行，通过设置-webkit-line-clamp属性，如显示三行添加style="-webkit-line-clamp:3":

<p class="mui-ellipsis-2" style="-webkit-line-clamp:3">我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。</p>

布局(layout)

基本整体布局

mui中提供了几种常见的布局系统，大家可以很方便的构建出一个手机页面，一个最简单的例子为：

<header class="mui-bar mui-bar-nav">  
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
    <h1 class="mui-title">标题</h1>  
</header>  
<footer class="mui-bar mui-bar-footer">  
    底部  
</footer>  
<div class="mui-content">  
    主体  
</div>

当底部内容为选项卡时候，我们会将.mui-bar-footer替换为.mui-bar-tab：

<nav class="mui-bar mui-bar-tab">  
    <a class="mui-tab-item mui-active">  
        <span class="mui-icon mui-icon-home"></span>  
        <span class="mui-tab-label">首页</span>  
    </a>  
    <a class="mui-tab-item">  
        <span class="mui-icon mui-icon-phone"></span>  
        <span class="mui-tab-label">电话</span>  
    </a>  
    <a class="mui-tab-item">  
        <span class="mui-icon mui-icon-email"></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-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中。

局部元素布局

设置边距：可以给块元素设置.mui-content-padded类添加边距，默认为10px外边距。

设置元素为内联块对象：可以给元素设置.mui-inline类，将元素呈递为内联对象，但是对象的内容作为块对象呈递。

<div class="mui-content-padded">  
    <div class="mui-inline">我是A</div>  
    <div class="mui-inline">我是B</div>  
    <div class="mui-inline">我是C</div>  
</div>

设置元素为块元素对象：可以给元素设置元素.mui-block，将元素设置为块元素。

浮动：可以给元素设置.mui-pull-left或者.mui-pull-right类，从而设置浮动效果，可以使用.mui-clearfix清除浮动。

<div class="mui-clearfix">  
    <div class="mui-pull-left">我在左边</div>  
    <div class="mui-pull-right">我在右边</div>  
</div>

块级表格：mui中使用CSS表格的方式定义了.mui-table块级表格布局方式，会作元素为块级表格来显示。

<div class="mui-table">  
    <div class="mui-table-cell mui-text-center">  
        我是A  
    </div>  
    <div class="mui-table-cell mui-text-center">  
        我是B  
    </div>  
    <div class="mui-table-cell mui-text-center">  
        我是C  
    </div>  
</div>

列表去掉默认样式：可以给ul元素设置.mui-list-unstyled类去掉ul标签在浏览器中默认的原点和内边距。

<ul class="mui-list-unstyled">  
    <li>我是第1条</li>  
    <li>我是第2条</li>  
    <li>我是第3条</li>  
</ul>

列表显示为内联元素：可以给ul元素设置.mui-list-inline类将li标签元素设置为内联块元素。

 <ul class="mui-list-inline">  
    <li>我是第1条</li>  
    <li>我是第2条</li>  
    <li>我是第3条</li>  
</ul>

设置元素显示与隐藏：.mui-visibility默认为设置元素可见，.mui-hidden默认为设置元素隐藏。

<div id="loading">  
    loading...  
</div>  

<script type="text/javascript">  
    setTimeout(function(){  
        document.getElementById("loading").classList.add('mui-hidden');  
    },3000)  
</script>

OS环境判断多平台适配：

mui会通过.mui.os.*方法判断环境，将.mui-plus，.mui-plus-stream，.mui-ios，.mui-android，.mui-wechat，.mui-ios-version，.mui-android-version，.mui-wechat-version绑定在document.body.classList中，我们可以通过这些样式类判断当前的运行判断，于是可以做出一些适配，如：

<div class="mui-input-row mui-plus-visible">  
    <label>mui-plus-visible</label>  
    <input type="text" class="mui-input-speech mui-input-clear" placeholder="我在web环境下隐藏5+环境下显示">  
</div>  
<div class="mui-input-row mui-plus-hidden">  
    <label>mui-plus-hidden</label>  
    <input type="text" class="mui-input-clear" placeholder="我在web环境下显示5+环境下隐藏">  
</div>

mui中默认在plus环境下和微信环境下设置了样式几个样式：

.mui-plus-visible：在plus环境下显示，非plsu环境下隐藏
.mui-wechat-visible：在wechat环境下显示，非wechat环境下隐藏
.mui-plus-hidden：在plus环境下隐藏，非plsu环境下显示
.mui-wechat-hidden：在wechat环境下隐藏，非wechat环境下显示

栅格系统布局：mui中定义了一个简单适用的栅格系统，将每一行宽度平均分为12份，每一份作为一个子栅格，每一行的内容置于.mui-row行容器中，通过.mui-col-xs-*和.mui-col-sm-*将行分成若干行。使用以下媒体查询（media query）将.mui-row像素宽度400px作为分界，.mui-row像素宽度低于400px的使用.mui-col-xs-*，当.mui-row像素宽度高于400px使用.mui-col-sm-*。.mui-row宽度若不设置，默认为屏幕像素宽度。

通过给每一行中的列设置1~12的数值，相应列的宽度会随着.mui-row像素宽度变化。若一行中列的数值和大于12，多余的列所在元素会作为一个整体另起一行排列。

<style type="text/css">  
    .mui-row{  
        height: 50px;  
        line-height: 50px;  
        text-align: center;   
    }  
    .mui-col-sm-3{  
        border: 1px solid #aaa;  
    }  
    .mui-col-sm-9{  
        border: 1px solid #aaa;  
    }  
</style>  
<div class="mui-row">  
    <div class="mui-col-xs-4 mui-col-sm-3">  
        .mui-col-sm-3  
    </div>  
    <div class="mui-col-xs-8 mui-col-sm-9">  
        .mui-col-sm-9  
    </div>  
</div>

这样我们得到了两列元素，当.mui-row像素宽度低于400px时，左侧宽度为4份子栅格宽度，右侧宽度为8份子栅格宽度；当.mui-row像素宽度高于400px时，左侧宽度为4份子栅格宽度，右侧宽度为8份子栅格宽度。

区域滚动布局：mui中封装了一个scroll控件用于实现区域滚动，在使用区域滚动组件时候需要注意几个细节，scroll控件有固定的dom结构，需手动初始化scroll控件，需要手动设置滚动区域的位置（一般设置为top和bottom）。

固定DOM结构：

<div class="mui-scroll-wrapper">  
    <div class="mui-scroll">  
        <!--这里放置真实显示的DOM内容-->  
    </div>  
</div>

初始化scroll控件：

// 常用配置项  
var options = {  
    scrollY: true, //是否竖向滚动  
    scrollX: false, //是否横向滚动  
    startX: 0, //初始化时滚动至x  
    startY: 0, //初始化时滚动至y  
    indicators: true, //是否显示滚动条  
    deceleration:0.0006 //阻尼系数,系数越小滑动越灵敏  
    bounce: true, //是否启用回弹  
}  

eg：  
mui('.mui-scroll-wrapper').scroll({  
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006  
});

手动设置高度：
一般在scroll控件最外面设置div为绝对定位，设置top,bottom,left,right值，为了方便，mui默认设置有个全屏类.mui-fullscreen。

.mui-fullscreen {  
    position: absolute;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    left: 0;  
}

我们可以在scroll控件外面添加这个类，然后手动修改top和bottom值。

效果预览：JS Bin on jsbin.com

零基础的你在今年这个时间开始学习移动开发真是最好不过了，每个人应该都有一些移动应用的创意，而且你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识， 懂一些CSS和JavaScript就够了，跨平台移动APP开发是利用HTML5+CSS3+JS，快速开发出本地App，一次开发，多平台适配，效果与原生App相媲美。从零基础到实战！学习跨平台app开发就在这里>>>跨平台app开发全套课程

Dcloud官方合作培训机构-国内首推跨平台app开发培训-东翌学院 咨询课程老师QQ2971611409，小班直播教学+课后辅导+全套课程视频+源码，从零基础到实战，30天学会跨平台App开发！Tel：17090057793

零基础的你在今年这个时间开始学习移动开发真是最好不过了，每个人应该都有一些移动应用的创意，而且你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识， 懂一些CSS和JavaScript就够了，跨平台移动APP开发是利用HTML5+CSS3+JS，快速开发出本地App，一次开发，多平台适配，效果与原生App相媲美。从零基础到实战！学习跨平台app开发就在这里>>>跨平台app开发全套课程

Dcloud官方合作培训机构-国内首推跨平台app开发培训-东翌学院 咨询课程老师QQ2971611409，小班直播教学+课后辅导+全套课程视频+源码，从零基础到实战，30天学会跨平台App开发！Tel：17090057793

此im聊天demo模拟了三个用户，下载下来可直接运行（app项目），本人测试过的。如需后台介入，请自行修改，需要访问后台的代码也在里面（被注释掉的），此demo中有简单的im（文字，图片和语音，因无后台，故图片和语音无中转服务器，所以暂时不能使用，只需要后台开一个上传下载的即可，代码已经在里面注释掉了，打开就可使用）。使用dcloud自带的页面加上自己集成的融云的websdk和个推进行推送，实现了相关的功能，现分享出来供大家参考，如有需要改进的地方大家可自行根据需求改动，此demo中需要自己申请websdk的appkey添加到对应的文件中,获取融云token的地方也需要自己根据需求编写代码，图片和语音的文件上传下载也需要自己编写代码
因有很多朋友私聊说不知道具体改哪些地方，现抽空整理出来，方便大家参考：

上图为demo的文件结构：index.html为启动首页，do.js为通讯处理js，common.js为存放一些公用信息类，push.js为处理接收到的推送方法，其余为每个html的js和mui提供的一些工具方法。

hbuilder无法安装应用到android studio启动的手机模拟器中

零基础的你在今年这个时间开始学习移动开发真是最好不过了，每个人应该都有一些移动应用的创意，而且你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识， 懂一些CSS和JavaScript就够了，跨平台移动APP开发是利用HTML5+CSS3+JS，快速开发出本地App，一次开发，多平台适配，效果与原生App相媲美。从零基础到实战！学习跨平台app开发就在这里>>>跨平台app开发全套课程

Dcloud官方合作培训机构-国内首推跨平台app开发培训-东翌学院 咨询课程老师QQ410355878，小班直播教学+课后辅导+全套课程视频+源码，从零基础到实战，30天学会跨平台App开发！Tel：010-57201298

现在有个项目客户需要使用跨平台框架开发，我们现有技术是DCloud，但人力不足，所以需要外聘一些兄弟来帮忙。合作好的话后续项目也很多。联系我QQ1939445542。备注DCloud开发。

之前碰到过视频播放全屏的问题，但是并没有很好解决，后面做网站时用到过一款视屏播放插件jwplayer，后面把它嵌入mui中实现全屏播放了，仅Android端测试，ios未测试。

<div id="myElement">Loading the player ...</div>  
mui.init();  
mui.plusReady(function () {  
    var nwaitings = plus.nativeUI.showWaiting();  
    jwplayer("myElement").setup({  
        file: "1.MP4",//测试视频，也可引用网络链接  
        height: 200,//视频播放器的高度  
        width: "100%",  
        events: {  
            onReady: function () {  
                nwaitings.close();  
                //jwplayer初始化结束后在显示  
                $(".mui-content").show();  
                $(".jw-icon-fullscreen").on("tap", function () {  
                    var height = $("#myElemen").height();  
                    //根据之前设定的播放器高度确认当前状态是否全屏  
                    if (height == 200) {  
                         //锁定竖屏  
                         plus.screen.lockOrientation("portrait-primary");  
                        //设置延时，屏幕旋转需要一定时间  
                        setTimeout(function () {  
                            //退出全屏  
                            plus.navigator.setFullscreen(false);  
                        }, 200)    
                    } else {  
                        plus.screen.lockOrientation("landscape-primary");  
                        setTimeout(function () {  
                            plus.navigator.setFullscreen(true);  
                        }, 200)  
                    }  
                })  
            }  
        }  
    });  
})  
//虚拟键处理  
mui.back = function () {  
    var height = $("#myElement").height();  
    //虚拟键退出全屏  
    if (!(height == 200)) {  
        plus.screen.lockOrientation("portrait-primary");  
        //jwplayer退出全屏  
        jwplayer("myElement").setFullscreen(false);  
        setTimeout(function () {  
            plus.navigator.setFullscreen(false);  
        }, 200)  
    } else {  
        var self = plus.webview.currentWebview();  
        //关闭播放页面  
        self.close("slide-out-right", 200)  
    }  
}

附件上传Jwplayer插件，里面有使用demo，更多jwplayer的api请百度。
代码中使用了jQuery库，请注意引用。
打开视频播放页面时需要打开硬件加速

mui.openWindow({  
    url: "test.html",  
    waiting: {  
        autoShow: false  
    },  
    show: {  
        aniShow: 'pop-in',  
        duration: 200  
    },  
    styles: {  
        hardwareAccelerated: true//开启硬件加速  
    }  
})

ps:有什么错误望各位支出，或者给出一些意见

我相信许多人在实际开发中会遇到这种问题

如图，这是一个子页面，需求是点击图片预览大图。
ok，大家把mui的图片预览拿过来用

纳尼？图片是预览大图出来了，那为虾米下面的tab导航怎么还在？不是全屏的么？

我在此解释一下，因为当初这4个页面是作为父页的子页面的，设置的样式 是 bottom:'51px'

sogo，所以子页面的大小是 屏幕高度-51px，这样图片预览全屏认的是子页面的全屏，所以tab导航还在啦

该如何解决呢？？？？

打开预览的时候，当前页面必须全屏显示，关闭预览的时候就要回到之前的样子。

然而并没有这个功能，没关系，

我们来查看mui.previewimage.js的源码，会发现有两个比较明显意图的方法名：proto.open 和 proto.close
这就是打开和关闭图片预览的相应方法拉！各位看官现在应该也知道我要做什么坏事了吧？没错

嘿嘿，在插件初始化的时候，传入两个函数，fun1，fun2，当然大家可以自行命名，在这，我用fun1为打开预览时的回调函数，fun2为关闭预览的回调函数

然后在open和close的事件中 ，调用我们自己传入的fun1fun2


ctrl+s保存一下js文件，ok，现在去试用一下。

在这里我分别为打开和关闭设置了2个回调函数，打开预览时，窗口全屏，关闭预览时窗口回到之前的样子。

大功告成，不要吐槽我的fun1 fun2。

前言

这段时间以来一直有人问5+ sdk怎么在原生中集成，每次给了文档和没给没啥大区别，这部分人之所以不能根据文档写出想要的结果，无非有两种情况，一种对于原生完全懵逼，毕竟基于mui做APP毕竟前端还是占多数，而前端中熟悉原生的人毕竟是少数，很多人声称会原生哪里还会用h5。就大趋势而言，应用web化是现在的潮流所向，现在即使有资金和技术实力的大厂也在做混合式开发和H5的APP，不然dcloud官方也不会花大力气在流应用上。近来越来越多的原生开发者朋友和我交流h5，他们很多是被逼着转前端，这些人懂原生，但是不懂h5，所以这些朋友从原生转mui过程中可能还是不能够理解如果用5+ sdk，中间的交互怎么解决，这就是第二种人的困境？

正是基于这种现实窘境，我打算把自己一知半解的android开发经验重新拿起来，试着去写点什么，抛砖引玉，仅此而已。本文作为混合式开发的第一篇，暂时不会介绍离线打包集成5+ sdk的相关内容，先用nativejs练练手。

步骤分解

在开始集成5+sdk之前，我们先来用native.js写一个文件管理的功能，以此熟悉native.js的相关API。先来预览一下效果：

经常有人问使用5+怎么系统文件，其实用nativejs就可以实现，有人又要问nativejs怎么引用。每次遇到这种问题，真的要喷血而出。

nativejs是集成在5+ app中，默认不需要引入就可以直接引用。nativejs是通过js调用系统原生方法，从而实现5+标准中没有提及的方法，所以说白了你还是要会原生，或者有人用nativejs将原生的方法转成了js，这样你只需要在页面中调用js的方法就可以实现调用原生。nativejs在这里充当一个“语法糖”的作用。

对于这样一个遍历文件系统的功能，用原生方法写，我们会这样写：
1.在AndroidManifest.xml下设置权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>

5+ APP中这一步默认设置了，我们不要管。

2.导入Java类对象

import android.os.Environment;

Native.js中使用plus.android.importClass方法：

var environment = plus.android.importClass("android.os.Environment");

3.判断SD卡是否插入(涉及到SDK的读取，最好先判断SDK是否插入)

Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED)

nativejs这样写：

environment.getExternalStorageState() === environment.MEDIA_MOUNTED

4.获得sd卡根目录：

File skRoot = Environment.getExternalStorageDirectory();

nativejs这样写：

var sdRoot = environment.getExternalStorageDirectory();

5.遍历sd卡根目录下的所有文件和文件夹（返回值为数组）

File[] files = sdRoot.listFiles();

nativejs中使plus.android.invoke调用对象（类对象/实例对象）的方法：

var files = plus.android.invoke(sdRoot,"listFiles");

6.过滤系统隐藏文件

import java.io.File;  
import java.io.FileFilter;  

FileFilter ff = new FileFilter() {  
    public boolean accept(File pathname) {  
           return !pathname.isHidden();//过滤隐藏文件  
    }  
};  
File[] files = sdRoot.listFiles(ff);

nativejs中可以这样写：

// 遍历sd卡根目录下的所有文件和文件夹  
var files = plus.android.invoke(sdRoot,"listFiles");  
var len = files.length;  
for(var i=0; i<len; i++){  
    var file = files[i];  
    // 过滤隐藏文件  
    if(!plus.android.invoke(file,"isHidden")){  
        // 非隐藏文件执行操作  

    }  
}

上面的预览效果可以看出我们对文件夹和文件进行了不同的操作，接着需要在遍历中判断。
7.文件及文件夹类型判断：

for(File file : files){  
    if(file.isDirectory()){  
        // 文件夹  
    }else{  
        // 文件  
    }  
}       

nativejs写法：

for(var i=0;i<len;i++){  
    if(plus.android.invoke(file,"isDirectory")){  
        // 文件夹  
    }else{  
        // 文件  
    }  
}

8.文件大小及单位转换(这里直接上nativejs版本):

// 读文件大小  
var FileInputStream = plus.android.importClass("java.io.FileInputStream");  
var fileSize = new FileInputStream(file);  
var size = fileSize.available();  
// 单位转换  
var fileSizeString;  
if(size == 0){  
    fileSizeString = "0B";  
}else if(size < 1024){  
    fileSizeString = size + "B";  
}else if(size < 1048576){  
    fileSizeString = (size/1024).toFixed(2) + "KB";  
}else if (size < 1073741824){  
    fileSizeString = (size/1048576).toFixed(2) + "MB";  
}else{  
    fileSizeString = (size/1073741824).toFixed(2) + "GB";  
}

9.创建文件夹与删除文件(文件夹)

/**  
 * 创建文件夹  
 * @param {Object} path  
 */  
function creatFolder(path){  
    var File = plus.android.importClass("java.io.File");  
    var fd = new File(path);  
    if(!fd.exists()){  
        fd.mkdirs();  
        plus.nativeUI.toast("创建成功");  
    }  
}  

/**  
 *  删除文件(文件夹)  
 * @param {Object} path  
 */  
function deleteFile(path){  
    var File = plus.android.importClass("java.io.File");  
    var fd = new File(path);  
    if (fd != null && fd.exists()){  
        fd.delete();  
        plus.nativeUI.toast("删除成功");  
    }         
}

10.打开目录和打开文件
我们在打开目录的时候，会遍历该目录下的文件夹和文件，实现方法同上面，打开文件我们可以使用5+ runtime openFile调用第三方程序打开指定的文件。

void plus.runtime.openFile( filepath, options, errorCB );

参数：

• filepath: ( String ) 必选 打开文件的路径
  字符串类型，文件路径必须是本地路径，否则会导致打开文件失败。
• options: ( OpenFileOptions ) 可选 打开文件参数
• errorCB: ( OpenErrorCallback ) 必选 打开文件失败的回调
  打开文件操作失败时回调，返回失败信息。

本文完整代码：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title></title>  
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>  
    <link rel="stylesheet" type="text/css" href="css/circles.css"/>  
    <style type="text/css">  
        .loading {  
            position: absolute;  
            top: 50%;  
            left: 50%;  
            width: 200px;  
            height: 200px;  
            margin-top: -100px;  
            margin-left: -100px;  
            z-index: 9999;        
        }  
        .loading .card {  
            display: table-cell;  
            text-align: center;  
            vertical-align: middle;  
            width: 200px;  
            height: 200px;  
        }  
        .mui-backdrop {  
            background-color: #15b5e9;  
        }  
    </style>  
</head>  
<body>  
    <div class="loading">  
        <div class="card">  
            <span class="circles-loader">Loading&#8230;</span>  
        </div>  
    </div>  

    <header class="mui-bar mui-bar-nav">      
        <h1 class="mui-title">文件系统</h1>  
        <a id="add" class="mui-icon mui-icon-plus mui-pull-right"></a>  
    </header>  
    <div class="mui-content">  
        <ul id="list" class="mui-table-view mui-table-view-chevron"></ul>  
    </div>  

    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>  
    <script src="js/njs-io.js" type="text/javascript" charset="utf-8"></script>  
    <script type="text/javascript">  
        mui.init({  
          gestureConfig:{  
           longtap: true //默认为false  
          }  
        });  

        var mask;  
        mui.ready(function () {  
            mask = mui.createMask();//callback为用户点击蒙版时自动执行的回调；  
            mask.show();//显示遮罩  
        })  

        var sdRoot = null;  
        document.addEventListener("plusready", function(){  
            init();  
        }, false);  

        // 渲染列表  
        function init(){  
            // 获得sd卡根目录  
            sdRoot = getSDRoot();  
            // 遍历sd卡根目录下的所有文件和文件夹  
            var files = plus.android.invoke(sdRoot,"listFiles");  
            var len = files.length;  

            var list = document.getElementById("list");  
            var fragmentFolder = document.createDocumentFragment();     
            var fragmentFile = document.createDocumentFragment();     
            var li;  
            for(var i=0;i<len;i++){  
                var file = files[i];  
                // 过滤隐藏文件  
                if(!plus.android.invoke(file,"isHidden")){  
                    var name = plus.android.invoke(file,"getName");  
                    li= document.createElement('li');  
                    li.className = 'mui-table-view-cell mui-media';  
                    li.setAttribute('name',name);  

                    // 判断是文件还是文件夹  
                    if(plus.android.invoke(file,"isDirectory")){  
                        // 设置标志为文件夹，供后面使用  
                        li.setAttribute('data-type', 'Folder');  
                        // 读取文件夹下子文件夹及子文件数目  
                        var obj = readSonFilenum(file);  
                        li.innerHTML = '<a class="mui-navigate-right">'+  
                            '<img class="mui-media-object mui-pull-left" src="img/folder.png">'+  
                            '<div class="mui-media-body">'+ name +  
                            '<p class="mui-ellipsis">文件夹数量：'+ obj.subFolderNum + ' 文件数量：'+ obj.subFileNum +'</p></div></a>';  
                        fragmentFolder.appendChild(li);  
                    }else{  
                        li.setAttribute('data-type', 'File');  
                        // 读文件大小  
                        var fileSizeString = readFileSize(file);          
                        li.innerHTML = '<a class="mui-navigate-right">'+  
                            '<img class="mui-media-object mui-pull-left" src="img/file.png">'+  
                            '<div class="mui-media-body mui-ellipsis">'+ name +  
                            '<p class="mui-ellipsis">'+ fileSizeString +'</p></div></a>';  
                        fragmentFile.appendChild(li);  
                    }  
                };  
            }  
            list.appendChild(fragmentFolder);     
            list.appendChild(fragmentFile);    
            // 关闭遮罩  
            mask.close();  
            document.querySelector('.loading').style.display = 'none';  
        }  

        // 点击打开文件  
        mui('.mui-table-view').on('tap','li',function(){  
            var name = this.getAttribute('name');  
            var fileType = this.getAttribute('data-type');  
            var filepath = sdRoot + '/' + name;  
            if(fileType === 'Folder'){  
                // 打开目录详细页面  
                mui.openWindow({  
                    url: 'sub.html',  
                    id: 'sub',  
                    extras:{  
                        name: name,  
                        filepath: filepath  
                    }  
                })  
            }else{  
                // 打开文件  
                plus.runtime.openFile(filepath);  
            }  
        })   

        // 创建文件夹  
        document.querySelector('#add').addEventListener('tap',function (e) {  
            e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了  
            var btnArray = ['取消', '确定'];  
            mui.prompt('请输入要创建的文件夹名:', '文件夹名', '创建文件夹', btnArray, function(e) {  
                if (e.index == 1) {  
                    creatFolder(sdRoot+"/"+e.value);  
                } else {  
                    plus.nativeUI.toast('你点了取消按钮');  
                }  
            })  
        })  

        // 长按删除文件  
        mui('.mui-table-view').on('longtap','li',function(){  
            var name = this.getAttribute('name');  
            var btnArray = ['取消', '确定'];  
            mui.confirm('你确定要删除这个文件夹？', '删除文件夹', btnArray, function(e) {  
                if (e.index == 1) {  
                    deleteFile(sdRoot+"/"+name);  
                } else {  
                    plus.nativeUI.toast('你点了取消按钮');  
                }  
            })  
        })   
    </script>  
</body>  
</html>

原生文件操作

判断SD卡是否插入

Environment.getExternalStorageState().equals(  
android.os.Environment.MEDIA_MOUNTED);

获得sd卡根目录：

File skRoot = Environment.getExternalStorageDirectory();

获得私有根目录：

File fileRoot = Context.getFilesDir()+"\";

文件夹或文件夹操作：

获得文件夹和文件路径

• 获得文件或文件夹的绝对路径和相对路径。区别:

String path = File.getPath();//相对  
String path = File.getAbsoultePath();//绝对

• 获得文件或文件夹的父目录

  String parentPath = File.getParent();

• 获得文件或文件夹的名称：

String Name = File.getName();

判断是文件或文件夹

File.isFile()  
File.isDirectory()

建立文件或文件夹

File.createNewFile();//建立文件  
File.mkDir(); //建立文件夹

列出文件夹下的所有文件和文件夹名

File[] files = File.listFiles();

修改文件夹和文件名

File.renameTo(dest);

删除文件夹或文件

File.delete();

这里列出原生的常用方法，大家可以根据需要进行实现。

后记

写到这里，本篇本应该继续讲讲5+ sdk集成中的各种细节，但是想想本篇作为nativejs的开篇，先简单介绍这个实例，让大家根据需要自己实现或许更好，本文仅供参考。

文章最后还是要放上文档和本文详细工程：
Native.js android API文档
5+ App开发Native.js入门指南
Native.js示例汇总
本文详细工程 njs-io

DCloud的webapp解决方案功能强大，但是官方所集成的是个推并且版本非常老，许多功能（比如说别名推送等等）不能使用，因此为它集成JPush（极光推送）。
集成具体方法如下：

1、下载极光sdk

在极光官方网站下载极光推送ios sdk 网址：http://docs.jiguang.cn/resources/

将其库文件(如下图所示)提取出来，

将其导入Hbuilder XCode工程的Frameworks中（如下图所示）

（1）导入步骤1

（2）导入步骤2

2、添加文件

在inc/tools（或其它文件夹）下建立文件PGJiguanPush.h与PGJiguanPush.m，内容见附件jpush-hbuilder.zip

(根据业务需求，没有具体写自定义消息的方法，只使用了标准消息，如果有需要可以自己弄)

3、增加全局描述

在Supporting Files目录下找到pch文件，在文件最后加上

static NSString *appKey = @"你的appkey";// appkey,极光创建app时能拿到  
static NSString *channel = @"0";// App Store等渠道，乱填也行~  
static BOOL isProduction = 0; //值要与Build Settings的Code Signing配置的证书环境一致 0开发 1生产

4、添加注册、接收等方法
参考极光官方文档，网址：http://docs.jiguang.cn/guideline/ios_guide/
修改inc/AppDelegate.m如下：

（1）在头部添加引用

import "JPUSHService.h"

（2）在官方注释"程序启动时收到push消息"的代码做如下修改：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
{  
    // 设置当前SDK运行模式  
    BOOL ret = [PDRCore initEngineWihtOptions:launchOptions  
                                  withRunMode:PDRCoreRunModeNormal];  
    [JPUSHService registerForRemoteNotificationTypesUIUserNotificationTypeBadge |  
                                                      UIUserNotificationTypeSound |  
                                                      UIUserNotificationTypeAlert)  
                                          categories:nil];  
    [JPUSHService setupWithOption:launchOptions appKey:appKey  
                          channel:channel  
                 apsForProduction:isProduction  
            advertisingIdentifier:nil];  
    return ret;  
}

（3）官方注释“远程push注册成功收到DeviceToken回调”的代码做如下修改：

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken  
{  
    [PDRCore handleSysEvent:PDRCoreSysEventRevDeviceToken withObject:deviceToken];  
    [JPUSHService registerDeviceToken:deviceToken];  
}

（4）官方注释“远程push注册失败”的代码做如下修改：

- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error  
{  
    [PDRCore handleSysEvent:PDRCoreSysEventRegRemoteNotificationsError withObject:error];  
    NSLog(@"did Fail To Register For Remote Notifications With Error: %@", error);  
}  
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {  
    [PDRCore handleSysEvent:PDRCoreSysEventRevRemoteNotification withObject:userInfo];  
    [JPUSHService handleRemoteNotification:userInfo];  
    NSLog(@"JPush成功接收消息，可以在webview中获取了");  
}

5、在webview中获取推送事件
完成以上修改后，使用XCode运行APP可以在LOG中看到类似

2016-08-02 19:03:07.690 | JPUSH | I - [JPUSHDeviceTokenReport] upload device token success

的消息则说明极光推送已经集成成功，如果在极光推送后台统计页面可以看到此时的应用安装数量增加了1

由于是直接在AppDelegate.m的didReceiveRemoteNotification中写的[JPUSHService handleRemoteNotification:userInfo]，因此消息直接传给了基座，可以直接在webview网页中用plus.push获取消息。

例如，我直接在index.html中写了

mui.plusReady(function() {  
   plus.push.addEventListener( "click", function ( msg ) {  
       alert( "用户点击了消息: " + JSON.stringify(msg) );  
   }, false );  
   plus.push.addEventListener( "receive", function ( msg ) {  
       alert( "app收到了消息: " + JSON.stringify(msg) );  
   }, false );  
});

6、测试
推送消息

静默推送与推送参数