以为安卓手机简单，没想到，小米4升级到miui8，然后怎么都不能在hb中识别出来。还是用iPhone进行调试吧。

document.querySelector('.mui-scroll-wrapper' ).addEventListener('scroll', function (e ) {
console.log(e.detail.y);
})

（看到聊天记录，顺手搬过来的）

本人遇到问题的双webview中子页面和主页面有分界线，但是调节mui-bar-nav 和其他属性等都显示没有边框。
于是我在主页面中去设置背景色和标题栏的颜色一致，发现标题栏的下面仍有一个阴影边框，通过浏览器调试发现，mui-bar-nav中有box-show属性，需要将该属性覆盖，设置为none。设置这些参数以后再次查看双webview页面任然有一条白线在主页面标题栏和子页面的顶部。
在后续的调试中发现，父页面设置导航栏的高度是44，而设置子页面距离父页面顶部的高度是45，将mui-bar-nav的高度设置为45即可消除双webview中的白线。到此问题结束。

由于h5+只提供了发短信的方法，没有提供发彩信的方法，坑爹的....然后自己写了个native调用原生发彩信方法

    //定义回调委托  
    var delegate = plus.ios.implements(  
        'messageComposeViewController',  
        {'messageComposeViewController:didFinishWithResult:':function(result){  
            console.log('info:'+arguments.length);  
            plus.ios.invoke(arguments[0],'dismissViewControllerAnimated:completion:','YES',null);  
        }}  
    );    
    //创建彩信  
    var MessageUI  = plus.ios.importClass("MessageUI");   
    var messageController = plus.ios.newObject('MFMessageComposeViewController');   
    //messageController.plusSetAttribute('body','');  
    messageController.plusSetAttribute('messageComposeDelegate',appRootController);   
    messageController.plusSetAttribute('messageComposeDelegate',delegate);  
    //添加图片  
    var canSendAttachments = plus.ios.invoke('MFMessageComposeViewController','canSendAttachments');  
    if(!canSendAttachments){  
        plus.nativeUI.alert('您的手机不支持彩信发送!');return;  
    }  
    //添加图片  
    var _path = plus.ios.invoke('NSURL','fileURLWithPath:',_url);   
    plus.ios.invoke(messageController,"addAttachmentURL:withAlternateFilename:",_path,'test.jpg');   
    //跳转到短信控制器  
            //获取根控制器  
    var UIApplicationClass = plus.ios.importClass("UIApplication");  
    var UIAppObj = UIApplicationClass.sharedApplication();   
    var appRootController = UIAppObj.plusGetAttribute('keyWindow').plusGetAttribute('rootViewController');  

    plus.ios.invoke(appRootController,"presentViewController:animated:completion:",messageController,"YES",null);

创新、热情、有理想、有技术、有经验、有许许多多的项目经典案例，这样强的团队你指的拥有----西安比熊网络科技有限公司
公司主要涉及业务为：手机APP开发、微信公众账号/企业号开发、网站建设、企业级应用开发 为您提供一站式专业移动互联网解决方案
团队实力：腾讯、阿里、海王、广联达等专业技术、产品设计和测试运营团队。 因此，您不必要担心技术和项目开发方面的问题
经典案例：
橄榄枝app是一款便捷的健康服务平台。以医院H-WIFI为基础，橄榄枝app为您提供您需要的健康资讯以及健康服务。同时还提供诊挂号等院内服务无需坐等，随叫随到；你还可以通过橄榄枝app建立交友圈子，助您度过无聊的住院、等候就诊的时间。
[院内服务]手机轻松预约挂号，省去排队及黄牛的烦恼；排队取号，无需坐等，随叫随到；院内导航，轻松定位科室，省去找路的烦恼。
　　[资讯推荐]丰富、新鲜的医疗资讯，帮助您获得更多准确的信息。
　　[健康服务]为您提供专业的健康服务，从身边开始。寻找健康，如此简单。
　　[社区圈子]为您提供健康交友平台，助您找到志同道合的健康伙伴。
　　[娱乐板块]提供视频直播、小说、游戏等娱乐服务，更轻松的等待就医。
下载地址：
安卓版:
应用宝:http://android.myapp.com/myapp/detail.htm?apkName=com.medinser.olive
360:http://zhushou.360.cn/detail/ind ... 4%E6%A6%84%E6%9E%9D
豌豆荚:http://www.wandoujia.com/apps/com.medinser.olive
IOS 版:
https://itunes.apple.com/us/app/gan-lan-zhi/id1066627587?mt=8

强大的实力由此展现，有任何问题都欢迎随时联系我，当然，有任何需要和项目合作也都欢迎随时联系我。

Name：皮茂扬
Tel：029-89380982
Mobile：18392363265
QQ：946236591
E-mail：946236591@qq.com

西安比熊网络科技有限公司 网址：www.bichonfrise.cn

                                                                          视频教程 学习 培训 HBuilder mui  

1、跨平台
2、快速迭代
3、开源生态发达
4、更容易推广
5、天生开放非孤岛，可方便互联

这五个技术优势，都如何应用呢？

HTML5的跨平台，不是常规意义上的跨Android和iOS平台。对于很多应用开发商而言，原来至少有3拨团队，分别负责Android、iOS、微信公众号的开发。

能不能一套代码，跨多个平台，且在各个平台都有最佳体验呢？

答案是可以的。一个O2O创业公司，他们只有一套HTML5代码，通过MUI框架和条件编译技术，编译出了六个平台的版本，iOS的ipa包、Android的apk包、HTML5浏览器版、微信公众号版、百度直达号版，以及流应用版。

对于缺钱少人的创业公司，这是极具诱惑力的解决方案。

可能有人觉得，对于不差钱的大公司而言，HTML5的跨平台优势不够明显。那么往下看。

任何大App厂商，都在追求快速迭代、热更新、A/B测试，在这些领域，使用HTML5都比原生要方便的多。

那么问题来了，怎么从零基础学习跨平台app开发？只在东翌学院，专业跨平台app开发培训机构。预约试听请联系QQ2971611409

上课链接

关于分享 到QQ 的 ShareMessage 中，herf是必填项，不能为空

1、跨平台
2、快速迭代
3、开源生态发达
4、更容易推广
5、天生开放非孤岛，可方便互联

这五个技术优势，都如何应用呢？

HTML5的跨平台，不是常规意义上的跨Android和iOS平台。对于很多应用开发商而言，原来至少有3拨团队，分别负责Android、iOS、微信公众号的开发。

能不能一套代码，跨多个平台，且在各个平台都有最佳体验呢？

答案是可以的。一个O2O创业公司，他们只有一套HTML5代码，通过MUI框架和条件编译技术，编译出了六个平台的版本，iOS的ipa包、Android的apk包、HTML5浏览器版、微信公众号版、百度直达号版，以及流应用版。

对于缺钱少人的创业公司，这是极具诱惑力的解决方案。

可能有人觉得，对于不差钱的大公司而言，HTML5的跨平台优势不够明显。那么往下看。

任何大App厂商，都在追求快速迭代、热更新、A/B测试，在这些领域，使用HTML5都比原生要方便的多。

那么问题来了，怎么从零基础学习跨平台app开发？只在东翌学院，专业跨平台app开发培训机构。预约试听请联系QQ410355878.

东翌学院官网地址

自从改做前端了解到MUI之后，就爱上HBuilder了，代码提示和代码块太强大了
之前做.NET的时候一直以为Visual Studio是世界第一IDE，现在发现是自己孤陋寡闻了
对于前端来说的话，目前我没有发现哪个编辑器比HBuilder强大（最喜欢的代码格式化功能也有）
之前写代码一直都有代码格式化的强迫症，基本上每写一段代码不格式化就不舒服
改做前端之后发现有一个Visual Studio Code也不错，虽然比Visual Studio差点，但我要的基本功能都有
而且字体渲染比Visual Studio好看，最重要的是体积小

代码截图：

对比Visual Studio Code（公司没装Visual Studio 2015）：

特别喜欢HBuilder，几乎完美了，用了一周左右只发现有几个小地方有点瑕疵，希望开发人员可以参考一下后续做修正：
第一个是选中注释功能，双斜杠会在该行首位出现，挺影响美观的，如果能在代码前面显示看起来会更舒服些：

如果保持这样去格式化代码 会导致中间空了很多

第二个是好像不能选中指定代码块格式化（有时候可能只希望格式化选中的代码）
第三个是编辑器的美观不足atom、visual studio，感觉字体渲染没那么好看然后夜间模式主题的话，只会改变编辑器和侧边窗口，不会改菜单栏，只会改配色方案，不会改变全局主题（这个如果要改的话感觉要重做，所以可以忽略）
第四个是偶尔会出现卡死、崩溃的情况

不过已经很好了 我已经离不开它了 希望HBuilder越做越好！

> 主题可能还有不完善的地方，大家可以一起完善然后再分享出来
使用方法：菜单栏-视觉主题设置-高级设置-导入-选择下载的主题文件

由于附件限定格式不能上传，请点击[此处](http://res.dskui.com/files/Visual Studio Code.tmTheme)下载主题
或直接访问下载地址：http://res.dskui.com/files/Visual Studio Code.tmTheme

<!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="../css/mui.min.css" rel="stylesheet" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
    .imageView0{width: 100%;height: 140px;}  
    .imageView6{width: 100%;clear: both;margin-top: 4px;}  
    .imageView1{width: 32%;height: 100%;background-color: #0099FF;float: left;text-align: center;display: block;}  
    .imageView1 img{width: 100%;}  
    .imageView2{width: 32%;height: 100%;float: left;margin-left: 2%;text-align: center;display: block;}  
    .imageView2 img{width: 30%;}  
    .imageView3{width: 32%;height: 100%;background-color:#CC66CC ;float:right;text-align: center;display: block;}  
    .imageView3 img{width: 100%;}  
    .imageView4{width: 49%;height: 70px;background-color:#FF9999 ;float: left;display: block;}  
    .imageView4 img{width: 30%;margin-top: 14%;margin: auto;}  
    .imageView5{width: 49%;height: 70px;background-color:#FF6633 ;float: right;display: block;}  
    .imageView5 img{width: 30%;margin-top: 14%;margin: auto;}  
    </style>  
</head>  

<body>
<script src="../js/mui.min.js"></script>

<!--导航栏
<header class="mui-bar mui-bar-nav" style="background-color: #000000;">
<h1 class="mui-title"style="color: #FFFFFF;">橙消费系统首页</h1>
</header>
-->
<!--轮播视图-->
<div class="mui-slider"style="margin-top: 44px;">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u23.jpg"/></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
</div>
<script>
var gallery = mui('.mui-slider');
gallery.slider({
interval:3100
});
</script>
<!--imageView -->
<div style="height: 4px;"></div>

<div class="imageView0">

<div class="imageView1">
<a href="govermentCompany.html">
<div style="width: 60%;margin: auto;margin-top: 25%;overflow: auto;">
<img src="../images/images/主页/u43.png">
<p style="color: #FFFFFF;">政企租机</p>
</div>
</a>
</div>

<div class="imageView2">
<div style="width: 100%;height: 48%;background-color:#FFCC33 ;overflow: auto;">
<img style="float: left;margin-top: 20%;" src="../images/images/主页/u51.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">VIP业务</p>
</div>
<div style="width: 100%;height: 48%;background-color:#FFCCFF ;margin-top: 4%;overflow: auto;">
<img style="float: left;margin-top: 30%;" src="../images/images/主页/u55.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">企业团购</p>
</div>
</div>

<div class="imageView3">
<div style="width: 60%;margin: auto;margin-top: 25%;overflow: auto;">
<img style="float: left;" src="../images/images/主页/u47.png">
<p style="color: #FFFFFF;">校园业务</p>
</div>
</div>

<div class="imageView6">
<div style="height: 4px"></div>

<div class="imageView4">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u59.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%;">信用卡业务</p>
</div>
</div>

<div class="imageView5">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u63.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%">工资卡业务</p>
</div>
</div>
</div>

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 id="title" class="mui-title">我的主页</h1>  
    </header>  
    <nav class="mui-bar mui-bar-tab">  
        <a id="defaultTab" class="mui-tab-item mui-active" href="homepage.html">  
            <span class="mui-icon mui-icon-home"></span>  
            <span class="mui-tab-label">我的主页</span>  
        </a>  
        <a class="mui-tab-item" href="weChat.html">  
            <span class="mui-icon mui-icon-weixin"><span class="mui-badge">9</span></span>  
            <span class="mui-tab-label">绑定微信</span>  
        </a>  
        <a class="mui-tab-item" href="news.html">  
            <span class="mui-icon mui-icon-chat"></span>  
            <span class="mui-tab-label">消息提醒</span>  
        </a>  
        <a class="mui-tab-item" href="mePage.html">  
            <span class="mui-icon mui-icon-contact"></span>  
            <span class="mui-tab-label">我的账户</span>  
        </a>  
    </nav>  
    <script src="../js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
         //mui初始化  
        mui.init();  
        var subpages = ['homepage.html', 'weChat.html', 'news.html', 'mePage.html'];  
        var subpage_style = {  
            top: '45px',  
            bottom: '51px'  
        };  

        var aniShow = {};  

         //创建子页面，首个选项卡页面显示，其它均隐藏；  
        mui.plusReady(function() {  
            var self = plus.webview.currentWebview();  
            for (var i = 0; i < 4; i++) {  
                var temp = {};  
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                self.append(sub);  
                if (i > 0) {  
                    sub.hide();  
                }else{  
                    temp[subpages[i]] = "true";  
                    mui.extend(aniShow,temp);  
                }  
                self.append(sub);  
            }  
        });  
         //当前激活选项  
        var activeTab = subpages[0];  
        var title = document.getElementById("title");  
         //选项卡点击事件  
        mui('.mui-bar-tab').on('tap', 'a', function(e) {  
            var targetTab = this.getAttribute('href');  
            if (targetTab == activeTab) {  
                return;  
            }  
            //更换标题  
            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
            //显示目标选项卡  
            //若为iOS平台或非首次显示，则直接显示  
            if(mui.os.ios||aniShow[targetTab]){  
                plus.webview.show(targetTab);  
            }else{  
                //否则，使用fade-in动画，且保存变量  
                var temp = {};  
                temp[targetTab] = "true";  
                mui.extend(aniShow,temp);  
                plus.webview.show(targetTab,"fade-in",300);  
            }  
            //隐藏当前;  
            plus.webview.hide(activeTab);  
            //更改当前活跃的选项卡  
            activeTab = targetTab;  
        });  
         //自定义事件，模拟点击“首页选项卡”  
        document.addEventListener('gohome', function() {  
            var defaultTab = document.getElementById("defaultTab");  
            //模拟首页点击  
            mui.trigger(defaultTab, 'tap');  
            //切换选项卡高亮  
            var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
            if (defaultTab !== current) {  
                current.classList.remove('mui-active');  
                defaultTab.classList.add('mui-active');  
            }  
        });  
    </script>  

</body>
</html>

由于项目需要，本人用H5实现了Android版，并成功发布。其中支付是使用的Ping++。
Hbuilder限制支付只能使用支付宝和微信。
但是实际上Ping++支付是直接调用支付宝或微信的，Ping++的作用就是统一了支付请求和回调。所以我们在获得支付申请数据之后，拆分出第三方支付所需要的数据，然后调用第三方支付就可以了。
具体步骤和代码：

1. 从后台获取支付请求数据，数据示例:

   
   payid = 'alipay'  
   var payReq = {  
     "body": "***订单",  
     "subject": "xxxxxxxxx",  
     "object": "charge",  
     "client_ip": "175.13.62.206",  
     "order_no": "xxxxxxxxx",  
     "currency": "cny",  
     "amount": 100,  
     "id": "ch_ xxxxxxxxx",  
     "failure_code": null,  
     "paid": false,  
     "refunded": false,  
     "created": 1467358041,  
     "description": null,  
     "amount_refunded": 0,  
     "livemode": false,  
     "amount_settle": 100,  
     "metadata": {},  
     "time_paid": null,  
     "app": "app_ xxxxxxxxx",  
     "extra": {},  
     "credential": {  
       "alipay": {  
         "orderInfo": "_input_charset=\"utf-8\"&body=\"***订单\"&it_b_pay=\"2016-07-02 15:27:21\"&notify_url=\"https%3A%2F%2Fapi.pingxx.com%2Fnotify%2Fcharges%2Fch_ xxxxxxxxx\"&out_trade_no=\"xxxxxxxxx\"&partner=\"xxxxxxxxx\"&payment_type=\"1\"&seller_id=\"xxxxxxxxx\"&service=\"mobile.securitypay.pay\"&subject=\"*****\"&total_fee=\"1.00\"&sign=\"SEM0T1MwMWV6SFdUTFN5WDlPOWVqTEtH\"&sign_type=\"RSA\""  
       },  
       "object": "credential"  
     },  
     "time_settle": null,  
     "time_expire": 1467444441,  
     "failure_msg": null,  
     "refunds": {  
       "data": [],  
       "has_more": false,  
       "object": "list",  
       "url": "/v1/charges/ch_xxxx/refunds"  
     },  
     "transaction_no": null,  
     "channel": "alipay"  
   }  
   };  

payid = 'wxpay';
var payReq = {
"body": "*",
"subject": "****",
"object": "charge",
"client_ip": "175.13.62.206",
"order_no": "xxxxxxxxx",
"currency": "cny",
"amount": 100,
"id": "ch_xx",
"failure_code": null,
"paid": false,
"refunded": false,
"created": 1467358181,
"description": null,
"amount_refunded": 0,
"livemode": false,
"amount_settle": 100,
"metadata": {},
"time_paid": null,
"app": "app_xxx",
"extra": {},
"credential": {
"wx": {
"sign": "xxxxx",
"appId": "xxxxx",
"timeStamp": "1467358181",
"packageValue": "Sign=WXPay",
"partnerId": "123456",
"nonceStr": "11111111111111",
"prepayId": "xxxxxxxxxxxx"
},
"object": "credential"
},
"time_settle": null,
"time_expire": 1467365381,
"failure_msg": null,
"refunds": {
"data": [],
"has_more": false,
"object": "list",
"url": "/v1/charges/ch_xxxxx/refunds"
},
"transaction_no": null,
"channel": "wx"
}
}

2. 转换请求数据  
//-----支付宝支付  
payid = 'alipay';
```javascript  
var order = payReq.credential['alipay'].orderInfo;

//end-----支付宝支付

//-----微信支付
payid = 'wxpay';

var wxData = payReq.credential['wx'];  
var wxPay = {appid:wxData.appId,  
        noncestr:wxData.nonceStr,  
        'package':wxData.packageValue,  
        partnerid:wxData.partnerId,  
        prepayid:wxData.prepayId,  
        timestamp:wxData.timeStamp,  
        sign:wxData.sign};  
var order = JSON.stringify(wxPay);

//end-----微信支付

1. 调用支付
   callPay(payid, order)

//调用支付  
function callPay(payid, order) {  
    console.log("----- order -----" + JSON.stringify(order));  
    plus.payment.request(pays[payid], order, function(result){  
            console.log("----- 支付成功 -----");  
            mui.toast('支付成功');  
                        //支付成功处理  
            //paySuccess (result);  
                },function(e){  
                    plus.nativeUI.closeWaiting();  
                    console.log("----- 支付失败 -----");  
                    console.log("["+e.code+"]："+e.message);  
                    plus.nativeUI.alert("支付失败",null,"错误码："+e.code);  
            });  
}

其他代码请参照H5+示例工程的plus/payment.html 。

//手机号验证  
function PhoneMobile() {  
    var tel = document.all("tel").value;  
    if (tel.match(/^(13[0-9]|14(5|7)|15(0|1|2|3|5|6|7|8|9)|18[0-9])\d{8}$/) != null) {  
        //verificationMobile();  
    } else {  
        $("#tel").val("输入的手机号不正确");  
        $("#tel").css("color", "red")  
    }  
}  
//验证码  
function verificationMobile() {  
    var btn = document.getElementById('btn');  
    btn.onclick = function() {  
        var sleep = 60,  
            interval = null;  
        PhoneMobile();  
        if ($("#tel").val() != "输入的手机号不正确") {  
            CallAction();  
            if (!interval) {  
                this.disabled = "disabled";  
                this.style.cursor = "wait";  
                this.value = "重新发送 (" + sleep-- + ")";  
                interval = setInterval(function() {  
                    if (sleep == 0) {  
                        if (!!interval) {  
                            clearInterval(interval);  
                            interval = null;  
                            sleep = 60;  
                            btn.style.cursor = "pointer";  
                            btn.removeAttribute('disabled');  
                            btn.value = "获取验证码";  
                            btn.style.backgroundColor = '';  
                        }  
                        return false;  
                    }  
                    btn.value = "重新发送 (" + sleep-- + ")";  
                }, 1000);  
            }  
        }  
    }  
}  
//验证码请求  
function CallAction() {  
    var data = 你的数据请求连接;  
    $.ajax({  
        async: true,  
        url: '网站连接',  
        data: data,  
        dataType: 'jsonp',  
        type: 'get',  
        callback: successCallback,  
        timeout: 10000,  
        complete: function(XMLHttpRequest, status) {  
            if (status == 'timeout') {  
                //超时,status还有success,error等值的情况   
                alert("方法查询异常！");  
            }  
        }  
    });  
}