MUI提供了非常多的控件，我想其中的侧滑导航大多数MUI使用者都在使用，并且遇到不少难题，而我就是其中一个。大家可以发现MUI模板里面有一个非常亮眼的侧滑导航当属缩放式导航（类手机QQ），这是一个DIV模式的缩放式侧滑，它的优点是可以跟着手势滑动，缺点是不可以复用，其实它还有其它缺点，比如在主页面拥有子webview的情况下，这种缩放式侧滑就无法使用了，由于是div模式的，子webview并不会跟着一起缩放。这就不得不让人舍弃主页面的子webview了，但是一般主页面都有下拉刷新控件的，而下拉刷新最佳的拖动性能是必须使用一个单独的webview去装载下拉刷新，如下图，中间下拉刷新是一个webview，导航和底部菜单是一个webview，因此遇到这种情况我们就需要采用webview模式的缩放式侧滑。

这里我讲解一下我使用webview模式开发的缩放式侧滑，做的不好的地方请指教。首先有一个侧滑页面的webview和主页面的webview，主页面下有一个子webview。我们先预加载左边的侧滑页面member/left.html，代码如下：

// 预加载侧滑页面，先让页面藏在显示区域之外-100%    
            var memberLeftView = mui.preload({    
                url:'views/member/left.html',    
                id:'views/member/left.html',    
                styles: {    
                    left: "-100%",    
                    zindex: -9997,    
                    render:'always'    
                }    
            });  

然后在触发侧滑的时候设置页面webview的移动位置，侧滑页面首先右移到显示区域，主页面的webview移动到left: '70%',top: '10%',bottom: '10%',的位置，同时打开遮罩，动画300毫秒的移动时间，注意：切勿使用mui.createMash(callback);去创建遮罩，因为主页面是有子webview，会造成不同步且会出现闪动情况。接着在关闭遮罩的时候，再移回原来的位置，这样就实现了简单的webview模式的缩放式侧滑。注意：恢复正常界面的时候隐藏侧滑页面，避免资源消耗。代码如下：

// 我的头像的点击事件    
document.getElementById('reho-left-me').addEventListener('tap', function() {    
    // 侧滑页面出现右移到显示区域    
    GO_Index.memberLeftView.show('none', 0, function() {    
        GO_Index.memberLeftView.setStyle({    
            left: '0',    
        });    
    });    
    // 主界面右移    
    GO_Index.indexView.show('none', 0, function() {    
        GO_Index.indexView.setStyle({    
            left: '70%',    
            top: '10%',    
            bottom: '10%',    
            mask: 'rgba(0,0,0,0.5)',    
            transition: {    
                duration: 300    
            }    
        });    
    });    

    // 每次移除遮罩点击事件，避免重复添加监听    
    GO_Index.indexView.removeEventListener('maskClick');    
    // 点击关闭遮罩时    
    GO_Index.indexView.addEventListener('maskClick', function(){    
        // 主界面移动到最大显示区域    
        GO_Index.indexView.setStyle({    
            left: '0',    
            top: '0',    
            bottom: '0',    
            mask: 'none',    
            transition: {    
                duration: 300    
            }    
        });    
        // 侧滑界面移出显示区域之外    
        GO_Index.memberLeftView.setStyle({    
            left: "-100%",    
            transition: {    
                duration: 300    
            }    
        });    
        // 隐藏侧滑页面，setTimeout避免竞争资源    
        setTimeout(function() {    
            GO_Index.memberLeftView.hide();    
        }, 300);    

    },false);    

});  

实现效果如下图：

（更多精彩内容请访问DCloud官网（http://www.dcloud.io/））

效果：（菜单中间的那个图标比较大，需要凸显出来）

设置菜单层级和样式

mui.init({  
                            subpages:[{  
                                  url:'nav.html',  
                                  id:'nav.html',  
                                  styles:{  
                                    zindex:"90",  
                                    width:"100%",  
                                    height:"70px",  
                                    bottom:"0px",//默认为0px，可不定义；  
                                    background:"transparent"  
                                  }  
                            }]  
                        });  
                        var subpages = ['bf.html', 'straight.html', 'find.html', 'expert.html', 'person.html'];  
                        var subpage_style = {  
                            zindex:"20",  
                            top: '0px',  
                            bottom: '50px'  
                        };

点击菜单切换的代码

for(var i=0;i<subpages.length;i++){  

                        if(subpages[i]==targetTab){  
                            plus.webview.show(subpages[i]);  
                            plus.webview.show('nav.html');  
                        }else{  
                            plus.webview.hide(subpages[i]);  
                        }  
                    }  

	

  


	

  

注意：这个plus.webview.show('nav.html');一定要加上去（原因：在ios上面，plus.webview.show(）这个方法会默认把这个层显示在最上面）

基本上是对着Native.js和百度的Android原生代码撸出来的。暂未测试多台机型。

            (function($) {  
                var receiver, main, context, TelephonyManager;  
                $.plusReady(function() {  
                    context = plus.android.importClass('android.content.Context'); //上下文  
                    TelephonyManager = plus.android.importClass('android.telephony.TelephonyManager'); //通话管理  
                    main = plus.android.runtimeMainActivity(); //获取activity  
                    receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {  
                        onReceive: doReceive //实现onReceiver回调函数  
                    });  
                    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
                    var Intent = plus.android.importClass('android.content.Intent');  
                    var filter = new IntentFilter();  
                    //filter.addAction(Intent.ACTION_AIRPLANE_MODE_CHANGED); //监听飞行模式  
                    filter.addAction(TelephonyManager.ACTION_PHONE_STATE_CHANGED); //监听电话状态  
                    main.registerReceiver(receiver, filter); //注册监听  
                });  

                function doReceive(context, intent) {  
                    plus.android.importClass(intent);  

                    var phoneNumber = intent.getStringExtra(TelephonyManager.EXTRA_INCOMING_NUMBER),  
                        telephony = context.getSystemService(context.TELEPHONY_SERVICE),  
                        state = telephony.getCallState();  
                    switch(state) {  
                        case TelephonyManager.CALL_STATE_RINGING:  
                            console.log("[Broadcast]等待接电话=" + phoneNumber);  
                            break;  
                        case TelephonyManager.CALL_STATE_IDLE:  
                            console.log("[Broadcast]电话挂断=" + phoneNumber);  
                            break;  
                        case TelephonyManager.CALL_STATE_OFFHOOK:  
                            console.log("[Broadcast]通话中=" + phoneNumber);  
                            break;  
                    }  
                    console.log(intent.getAction());  
                }  

            }(mui));

其实是支付宝和HB共同的坑

1. 服务器公钥的配置，2个地方要配置，1是开放平台的 2是合作伙伴的，否则出现ATL65错误
2. 不要使用最新网关https://openapi.alipay.com/gateway.do的参数配置，否则死的很惨，因为HB不支持。会出现ATL2075错误
3. SIGN RSA私钥加密的字符串一定是key="value"&key="value"格式，这个不能错，否则签名有问题
4. 私钥加密可以不用排序
5. HB中提交的数据格式也一定是key="value"&key="value"，否则出错
6. 关于NOTIFY异步回传验证是否为支付宝，原HTTP地址不能用了，只能用HTTPS地址：https://mapi.alipay.com/gateway.do?service=notify_verify&partner=2088002396712354&notify_id=RqPnCoPT3K9%252Fvwbh3I%252BFioE227%252BPfNMl8jwyZqMIiXQWxhOCmQ5MQO%252FWd93rvCB%252BaiGg
7. NOTIFY SIGN验证要使用公钥
8. 参数notify_data不在回传参数内，目前WAP网页支付还是支持
9. 回传参数验证SIGN需要ksort排序，否则出错
10. HB的支付提交错误返还的参数e.code没卵用

关于mui-slider组件动态生成之后无法滚动切换等问题
1.这个组件呢，里面具体的实现我不知道，但是动态生成造成部分功能缺失大概都是因为下面的原因

2. 也就是说这个组件在浏览器检测到mui-slider类样式的时候就开始了初始化（纯属个人猜测）。
3. 怎么解决呢？我们用这个滑动组件一般都是事先不知道有多少个，都是动态数据，这就是他们设计这个组件的时候的缺陷，这个必须改进
4. 解决方案如下：
   5.我们把整个slider组件的html都动态来生成也就是这样的
   var temphtml = "<div id='slider' class='mui-slider mui-fullscreen reg_jacc'><div id='sliderSegmentedControl' class='mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted'><div id='username' class='mui-scroll'></div></div><div id='userInfo' class='mui-slider-group'></div></div>";
   var temphtmlnode = zqnb.dom(temphtml);
   document.getElementById("tempHtml").appendChild(temphtmlnode);
   6.请不要纠结生成dom并且放入dom树的代码，只是告诉你们步骤，拼接html字符串、转dom、放入dom树。
5. 这样我们的滑动组件有了，滑动组件里面的容器也有了，下面的工作就是获取容器dom填充数据了。
6. 谢谢。

分享的开源项目类型可以包括以下几种：

1. 采用5+、MUI技术开发的App类项目（比如资讯、电商、金融、游戏等）。
2. 基于5+、MUI的开源组件，建议大家分享可大幅节省开发时间的开源组件，目前推荐但不局限于以下几类：

• 跨平台适配：比如兼容5+ App、微信、QQ浏览器、UC浏览器的分享组件，兼容5+ App、微信、普通手机浏览器的支付组件；

• 基于mui现有组件实现扩展组件，比如：基于scroll控件实现左右滑动的专辑封面切换效果，基于图片轮播实现上下移动或渐隐渐现的轮播效果；

• 包含交互效果的模板，比如类似微信公众号消息列表的模板、朋友圈UI模板（包含图片预览、点赞、评论等交互功能）

参赛方式为进入HBuilder活动页面【点击HBuilder菜单帮助>>活动】点击立即参加然后提交项目链接，同时大家可以将已实现好的开源工程，在https://github.com/dcloudio/casecode提交pull Request，我们会关联展示。

对于本次“DCloud产品技能分享大赛”活动如有疑问，可以在本文章评论中进行提问，我们会及时为你解答。

本次活动参赛方式为进入HBuilder活动页面【点击HBuilder菜单“帮助”>>“活动”】,点击“立即参加”然后提交你的作品链接。

下方有附件可直接下载使用。

页面一

HTML代码

<a class="_button" onclick="go()">Hbuilder</a>

CSS代码

._button{  
    padding:8px 10px;  
    background:#f60;  
    margin:50px auto;  
    display: block;  
    width:120px;  
    text-align:center;  
    color:#FFFFFF;  
    border-radius: 3px;  
}

JS代码

function plusReady(){  
    //创建底部图片  
    issue = new plus.nativeObj.Bitmap('bmp');  
    issue.load('images/footImg.png',function(){  
        console.log('图片加载完成!');  
        createView();  
    },function(e){  
        console.log('图片加载失败!'+JSON.stringify(e));  
    });  
}  

// 创建原生View控件  
function createView(){  
    view = new plus.nativeObj.View('FootImg',{top:'90%',left:'43%',height:'55px',width:'55px',background:'#f60'});  
    view.drawBitmap( issue, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );  
    view.show();  

    view.addEventListener("click",ViewClick, false);  
}  

//View点击事件  
function ViewClick(){  
    alert('你点击的view');  
}  

if(window.plus){  
    plusReady();  
}else{  
    document.addEventListener("plusready",plusReady,false);  
}  

/* 页面切换  */  
function go(){  
    var subpage = mui.openWindow({  
        url:'list.html',   
        id:'list.html',  
    });  

    //页面转场的时候清除掉view。  
    subpage.addEventListener('loaded', function() {  
        subpage.show('slide-in-right', 200, function() {  
            view.clear();  
        });  
    });  
}  

//监听list返回  
window.addEventListener('_title',function(){  
    //一监听到就可以创建View了，但是View的点击没用（事件应该是绑上了，用createView()的话会发现点击的时候会弹窗两次），应该是位置的问题吧。  
    view = new plus.nativeObj.View('FootImg',{top:'90%',left:'43%',height:'55px',width:'55px',background:'#f60'});  
    view.drawBitmap( issue, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );  
    view.show();  

    // createView(); 这样写的话点击会被执行两次。  

    //所以等待窗体动画到位在绑定事件  
    setTimeout(function(){  
        view.addEventListener("click",ViewClick, false);  
    },400);  
});

页面二

JS代码

$('._back').on('tap',function(){  
    mui.init({  
        beforeback: function(){  
//          var viewPage = plus.webview.getWebviewById('view.html'); //如果不是首页面就用这个获取指定ID，否则用下面的获取首页窗体；  
            var viewPage = plus.webview.getLaunchWebview();  
            mui.fire(viewPage,'_title',{/* 这里可以传值  */});  
            return true;  
        }  
    });  
    mui.back();  
})

实现思路：创建左右两个容器，在数据导入的时候获取两个容器的高度，把即将要导入的数据，导进高度低的一个容器即可。

HTML代码

<body style="background-color: #f3f3f3;">  
    <!-- 商品列表 -->  
    <div class="twoRankedBox">  
        <ul class="BoxLeft">  

        </ul>  

        <ul class="BoxRight">  

        </ul>  
    </div>  
</body>

CSS代码

*{  
    padding:0px;  
    margin:0px;  
    list-style: none;  
    font-style:normal;  
    font-family: arial;  
    font-family: Microsoft YaHei,arial;  
}  
.twoRankedBox{  
    margin:6px 8px;  
    overflow: hidden;  
    padding-bottom:25px;  
}  
.twoRankedBox ul{  
    width:49%;  
    float: left;  
}  
.twoRankedBox ul:last-child{  
    margin-left:2%;  
}  
.twoRankedBox ul li{  
    padding:5px;  
    margin-bottom:6px;  
    padding-bottom:8px;  
    background-color: #FFFFFF;  
}  
.twoRankedBox ul li p:first-child{  
    padding-top:0px;  
}  
.twoRankedBox ul li p{  
    padding-top:4px;  
}  
.product_picture img{  
    display: block;  
    width:100%;  
}  
.product_np{  
    overflow: hidden;  
    line-height:20px;  
}  
.product_np a{  
    display: block;  
    overflow:hidden;  
    text-overflow:ellipsis;  
    white-space:nowrap;  
}  
.product_np a:first-child{  
    font-size:0.9em;  
    color:#58b7e3;  
    width:65%;  
    float: left;  
}  
.product_np a:last-child{  
    font-size:0.8em;  
    color:#f00;  
    float: right;  
    width:35%;  
    text-align: right;  
}  
.product_ie{  
    font-size:0.8em;  
    color:#777;  
}

JS代码（需要JQ，因为获取高度是用JQ写的。可以自行修改）

//模拟JSON数据  
var json = {  
    data:[  
        {name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_01.jpg'},  
        {name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_02.jpg'},  
        {name:'白色婚纱',price:'668',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_03.jpg'},  
        {name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_04.jpg'},  
        {name:'格纹小短裙',price:'88',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_05.jpg'},  
        {name:'复古旗袍',price:'128',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_06.jpg'},  
        {name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_07.jpg'},  
        {name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_08.jpg'},  
        {name:'白色婚纱',price:'668',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_09.jpg'},  
        {name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_10.jpg'},  
        {name:'格纹小短裙',price:'118',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_11.jpg'}  
    ]  
}  

//模拟数据导入  
for(var i=0;i<json.data.length;i++){  
    var chtml = '<li><p class="product_picture"><img src="'+json.data[i].src+'"></p>'  
            +'<p class="product_np"><a>'+json.data[i].name+'</a><a>￥'+json.data[i].price+'</a></p>'  
            +'<p class="product_ie">'+json.data[i].details+'</p></li>'  

    if($('.BoxLeft').height() < $('.BoxRight').height()){  
        $('.BoxLeft').append(chtml);  
    }else{  
        $('.BoxRight').append(chtml);  
    }  
}  

代码在附件里。

最近在做一款APP，需要获取手机电量，折腾了好长时间，终于搞定，把代码分享出来，希望能帮助到一些需要这个功能的朋友。
好了，废话不多说，直接上代码

安卓手机代码

//注意，安卓需要配置下manifest.json文件，打开后，进入模块权限配置，在右侧的Android权限设置里勾选上android.permission.BATTERY_STATS  
var main = plus.android.runtimeMainActivity();  
var Intent = plus.android.importClass('android.content.Intent');  
var recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {  
          onReceive: function(context, intent) {  
        var action = intent.getAction();  
        if (action == Intent.ACTION_BATTERY_CHANGED) {  
            var level   = intent.getIntExtra("level", 0); //电量  
            var voltage = intent.getIntExtra("voltage", 0); //电池电压  
            var temperature = intent.getIntExtra("temperature", 0); //电池温度  
                        //如需获取别的，在这里继续写，此代码只提供获取电量  
            console.log(level)  
        }  
     }  
 });  
var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);  
main.registerReceiver(recevier, filter); 

IOS代码

var UIDevice = plus.ios.import("UIDevice");  
var dev = UIDevice.currentDevice();  
if (!dev.isBatteryMonitoringEnabled()) {  
    dev.setBatteryMonitoringEnabled(true);  
}  
var level =dev.batteryLevel();

453093824