关于WebView调试，HBuilderX，请参考第一章； HBuilder，请参考第二章

1. HBuilderX WebView调试说明

HBuilderX webview调试，适用于uniapp、5+App等app类项目。

1.1 webview启动与使用

运行项目到手机，HBuilderX内点击菜单【视图】【显示WebView调试控制台】，即可打开webview调试控制台，如下图：

App打开要调试的页面，HBuilderX WebView调试控制台，会自动出现相关文件，点击【Inspect(调试)】，则会自动打开调试窗口。

1.2 注意事项

1. 点击【Inspect(调试)】后，如无法正常打开调试窗口，关闭chrome浏览器，然后重试。
2. uniapp项目仅v3模式的vue页面支持webview调试视图层。调试js或nvue请点击运行控制台右上角的debug按钮。

2. 老HBuilder WebView调试说明

HBuilder支持真机运行项目或者在手机上启动一个支持调试的应用即可在HBuilder打开调试功能，具体使用方式如下：
1、打开WebView调试模式：

2、打开WebView调试模式之后就能在该视图中查看打开的WebView，点击 [inspect(调试)] 即可调试

3、真机运行会自动打开WebView调试模式，可以在调试模式界面中关闭自动打开功能，去掉自动打开的选项即可，如下图：

如有问题请点击WebView调试模式常见问题

MUI的上拉/下拉刷新

如果页面中只包含上拉/下拉刷新部分以及header/footer部分，那么只需要参考官方文档即可，稍微细心一点，实现起来问题不大

官方文档:下拉/上拉官方文档

由VUE负责数据加载,MUI复杂上拉/下拉

mui中用的最多，问题最多的可能就是上拉/下拉刷新还有与它关联的各种问题了，可谓千奇百怪无奇不有。

VUE与MUI整合，最常见的问题是明明数据已加载，但是就是无法上拉/下拉，或者上拉/下拉触发的位置不对。

因水平有限，直接对mui框架进行修改实在没把握，也没那么多时间来看代码，因此选用mui已重写的上拉/下拉组件来进行修改。原始代码是Mui的demo项目里面的
pullrefresh_with_tab.html 。选这个的一个原因是在它的基础上可以很容易的实现页面的部分上拉/下拉，而其他部分不变，比如在页面最上方放一个固定的搜索框之类的。另一个原因是这是一个独立的组件，方便修改，代码也比mui框架简单和清晰。

HTML页面代码

直接采用demo的样式，把自己需要的dom添加进去就可以了

        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"><span class=" mui-icon mui-icon-left-nav "></span> </a>  
            <h1 class="mui-title"></h1>  
        </header>  

        <div class="mui-content">  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <div class="mui-input-row mui-search">  
                        <input type="search" v-model="keyword" placeholder="搜索" style="margin-bottom: 0px;">  
                    </div>  

                </div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="pullrefresh" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <!--数据列表-->  
                                <ul class="mui-table-view " id="stuffs_ul" style="margin-top: 10px;">  
                                    <template v-for="stuff in stuffs ">  

    //vue加载的li元素                                </template>  

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

JS代码

对mui.pullToRefresh.js进行了一些改动，修复一些我自己使用vue碰到的问题

上拉/下拉刷新触发的时机不对

比如不管在列表的哪里下拉都触发下拉刷新这一类的问题，解决办法是在判断是否上拉/下拉时判断是否滚动到顶部/底部

_canPullUp: function() {  
            if(this.removing) {  
                return false;  
            }  

            if(this.isInScroll) {  
                var scrollId = this.element.parentNode.getAttribute('data-scroll');  
                if(scrollId) {  
                    var scrollApi = $.data[scrollId];  
                    return scrollApi.y === scrollApi.maxScrollY;  
                }  
            }  
            /**  
             * 修改上拉判断条件  
             */  
            console.log('上拉位置' + this.element.scrollTop + '  ' + this.element.clientHeight + '  ' + this.element.scrollHeight)  
            if(this.element) {  
                return this.element.scrollTop + this.element.clientHeight >= this.element.scrollHeight;  
            }  
            return window.pageYOffset + window.innerHeight + this.options.up.offset >= document.documentElement.scrollHeight;  
        },  
        _canPullDown: function() {  
            if(this.removing) {  
                return false;  
            }  
            if(this.isInScroll) {  
                var scrollId = this.element.parentNode.getAttribute('data-scroll');  
                if(scrollId) {  
                    var scrollApi = $.data[scrollId];  
                    return scrollApi.y === 0;  
                }  
            }  
            /**  
             * 修改下拉判断条件  
             */  
            console.log('下拉位置' + document.body.scrollTop + '  ' + this.element.scrollTop)  
            if(this.element) {  
                return this.element.scrollTop <= 0;  
            }  
            return document.body.scrollTop === 0;  
        },

数据加载完成后，底部的“上拉提示提示条”位置不对

比如不可见，或者显示在列表中间而不是底部等
解决办法是在上拉/下拉结束后重新获取列表的高度，然后设置底部提示条的top值

        fixBottomTip: function() {  
            if(this.element && this.element.querySelector('.mui-pull-bottom-tips')) {  
                if(!this.element.querySelector('.mui-scroll')) {  
                    this.element.querySelector('.mui-pull-bottom-tips').style.top = this.element.scrollHeight - 40 + 'px'  
                } else {  
                    this.element.querySelector('.mui-pull-bottom-tips').style.top = this.element.querySelector('.mui-scroll').scrollHeight + 'px'  
                }  
            }  
        },

另外还需要设置mui-pull-bottom-tips的position属性

.mui-pull-bottom-tips {  
    text-align: center;  
    background-color: #efeff4;  
    font-size: 15px;  
    line-height: 40px;  
    color: #777;  
    width: 100%;  
    position: absolute;  
}  

其他问题

使用vue后，上下或者左右滚动无效

这个问题产生原因应该是vue渲染dom后无法撑开它的上一级容器，具体什么原因我也搞不懂，
有个解决办法就是设置滚动的容器的overflow值为auto

.mui-content.mui-scroll-wrapper {  
    overflow: auto;  
}  

.mui-slider.mui-fullscreen .mui-slider-group .mui-control-content .mui-scroll-wrapper {  
    overflow: auto;  
}

总结

修改完成后，在手机浏览器，IOSAPP,ANDROIDAPP测试都正常，包括单webviewhe双webview

文件下载

本文链接：http://blog.betweenfriends.cn/post/vuemuiscrollfixmethod.html

HBuilder在使用Android模拟器进行真机调试时，经常会出现找不到模拟器情况，接下来要介绍的运行模拟器是“夜神模拟器”。
PS:笔者在使用“夜猫模拟器”前，使用过Google提供的模拟器进行连接，老是爱掉线，并且连接不上，在使用Genymotion模拟器连接时， HBuilder根本读不到模拟器，试着使用修改端口号的方式进行让HBuilder和Genymotion进行直连，也以失败而告终。
一、下载“夜神模拟器”，https://www.yeshen.com，安装比较简单，默认安装即可。
二、安装完成后，模拟器默认会以平板模式开启，如果需更改为手机模式，点击“设置”图标，选择“高级设置”，分辨率设置为“手机版”。点击“保存设置”，模拟器重启后即可。
三、HBuilder和模拟器端口连接设置，看附件图
1.win + r （Windows）输入cmd进入dos窗口，cd 到夜神模拟器的安装目录bin下， 如：cd D:\Program Files (x86)\Nox\bin
2.然后输入命令：nox_adb connect 127.0.0.1:62001 进行连接 ,接下来使用命令：nox_adb devices 查看连接信息。
3.切换目录到HBuilder的tools目录下:cd D:\HBuilder.7.5.0.windows\HBuilder\tools
4.输入命令：adb connect 127.0.0.1:62001
5.输入命令：adb devices 查看连接信息。
四、接下来，端口设置好后，再HBuilder中就可以直接运行了，点击运行已经创建好的移动APP吧！

首先下载jdk文件，我下载的是这个：http://www.9553.com/soft/41470.htm ， 如果已经有的话，可以跳过，下载安装好后，

文件bin/下有：keytool.exe 文件，此文件用于生成密钥，

打开命令cmd->如果不是C盘根目录，可以用输入 cd.. ,返回上一级到出现：C：\>

然后进去JDK 文件： C：\> cd C:\Program Files\Java\jdk1.6.0_43\bin 然后回车键，我的JDK安装在C盘Program Files下，如果你不是可以更改，

到打开：C:\Program Files\Java\jdk1.6.0_43\bin>

然后对下面代码修改下，
keytool -genkey -alias domekey -keyalg RSA -keysize 1024 -keypass pwd123456 -validity 3500 -keystore c:\key\dome.keystore

-alias 后面的 domekey 是密钥别名，可自己修改
-keypass 后面的 pwd123456 ，可自己修改
会生成密钥文件dome.keystore，存在 c:\key\dome.keystore ，如果你C盘没有key文件夹，要新建一个，不如会报错。
-validity 后面的 3500 ，是有效期，3500天，按天数算

然后填写好复制进去： C:\Program Files\Java\jdk1.6.0_43\bin>keytool -genkey -alias domekey -keyalg RSA -keysize 1024 -keypass pwd123456 -validity 3500 -keystore c:\key\dome.keystore

然后回车键，会提示你输入密码，这个密码是查询密码，跟密钥密码填一样的， 不一样，云打包不了，不知道为什么。

然后就是填写，

填好后，最后 填 Y 回车确认，就可以了，生成的dome.keystore，文件在C盘c:\key\下，

然后云打包，

选择安卓》自有证书

包名： 可以自己修改

证书别名： domekey，就是刚才你填写的密钥别名

密钥密码：pwd123456 ，就刚你填的密码

证书文件：c:\key\dome.keystore ，选择刚才你生成的文件，

然后提交云打包就可以了，可以打包成功， 安装正常使用。

为什么选择MUI

我用过phonegap,cordova,jquerymobile,也做过原生应用的开发，android和ios都略有接触，以我的个人感受来说一下为什么要选择MUI

为什么不用原生开发

优势

用户体验好。代码加密方便

劣势

开发周期长，针对不同操作系统需要做多套开发，成本也就相应提高，对于创业或者是小公司来说，不推荐。如果要考虑兼容性的话，光是切图和多个分辨率下的UI适配就能吐血。。。

我的观点

我认为如果是游戏类的应用，目前来说除了非常简单的网页游戏，否则还是推荐原生开发。毕竟以当前的浏览器渲染效果和机器性能，用h5实现复杂的游戏效果应该还是不怎么理想。
至于大部分的业务类应用，不管流程多么复杂，基本也就是增删改查四个操作的各种封装和展示，采用H5的开发基本可以满足要求。因此，非必要情况下，不建议采用原生开发。

那么多的WEBAPP框架，为什么选择MUI

mui('body').on("tap",'.jsinput',function(){  
    this.focus();  
});  

比较揪心的解决方法：每次启动日历插件时，页面向下滚动10px。

//加载日历插件  
D('datebtnrows').addEventListener(getEventName(),function(){  
    if(mui.os.ios) {  
        //此代码的作用是为了解决使用单WEBVIEW下拉刷新时与日历插件的冲突；  
        mui('#pullrefresh').pullRefresh().scrollTo(0,10,100);  
    }  
    var datestr = dateBtn.getAttribute('datestr');  
    var dtPicker = new mui.DtPicker({"type":"date","value":datestr});  
    dtPicker.show(function (selectItems) {  
        var selectYear = selectItems.y.value;```javascript  
        var selectMonth = prefixInteger(selectItems.m.value);  
        var selectDay = prefixInteger(selectItems.d.value);  
        var selectstr = selectYear+'-'+selectMonth+'-'+selectDay;  
            dateBtn.innerHTML = selectMonth+'月'+selectDay+'日';  
            dateBtn.setAttribute('datestr',selectstr);  
        dtPicker.dispose();  
    });  

});

如题；
求大神提供一个HBuilder好看的主题配置文件（最好是直接导入就能用的）

方法一：

index.html主文件中定义要打开的页面：------------------------------------------------
<a id="info">热点</a>
document.getElementById('info').addEventListener('tap', function() {
mui.openWindow({
url: './test.html?name=uuueeu&age=26', //通过URL传参
id: 'test.html'
});

test.html页面代码：-----------------------------------------------------------------------------
<div class="mui-content">
<div>姓名 : <span id="name"></span></div>
<div>年龄 : <span id="age"></span></div>
</div>

$("#name").text(GetQueryString('name'));
$("#age").text(GetQueryString('age'));

function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}

方法二：
index.html代码：
<div class="mui-content">
<button type="button" class="mui-btn" onclick="openWindow();">点击这里打开新窗口</button>
</div>

                   function openWindow() {            

                    var obj = {  
                "uname": "小明",  
                "age": "29"  
            };  

            var str = JSON.stringify(obj);  
            localStorage.obj = str;  

            mui.openWindow({  
                url: 'b.html',  
                id: 'b',  
            });           
        }  

b.html页面代码：
<div class="mui-content">
<div>姓名: <span id="name"></span></div>
<div>年龄:<span id="age"></span></div>
</div>

$(function (){
var data = JSON.parse(localStorage.obj);
$("#name").text(data.uname);
$("#age").text(data.age);
console.log(data.uname);
console.log(data.age);
});

------------------------------------------------以上两种方法亲测可用---------------------------------------------
注意事项：
1.在http协议下访问

2. 官方给出的extras已经不能用了，百度的方法很多是按官方的栗子写的，之前我的DEMO原本就用的extras传参的，过了几个月后再测试，居然不能用了，坑了我好久。
3. 希望对大伙有帮助，有问题可以联系我uuueeu@126.com 西红柿

开发多端可用的app，用hbuilder和mui框架
需要接入微信登录、支付、分享等
这个app并不复杂，后台api写好的，预计工时1-2周左右吧
要求有完整的Mui开发经验，初学者就算了，知道其中的坑和性能提升之道。
能驻场最好，驻场可适当提高报酬，不能驻场需要每几天碰一次
微信：81398613

后面还需要若干需求，可持续长期合作

打包后打开 启动页之前 先打开的是HBuilder的页面 怎么关闭

用法

var udp = new Updownpull({  
    el: ".bill_scroll",  
    downEl: ".slideDown",  
    upEl: ".loadMore",  
    downArea: 50,  
    downFn: function(){//下拉刷新的回调  
            //此处可调用api请求数据并设置页面为1  
        },  
    upFn: function(){//上拉加载的回调  
        //此处可调用api请求数据并设置页面为++  
    }  
})

原码

/**  
 /**  
 * 上拉加载下拉刷新插件  
 * varstion 1.0.0  
 * by Allen-Fei  
 * tipefi@126.com  
 * 参数列表：  
 * el——内容DOM  
 * downEl——下拉刷新的提示文字DOM  
 * upEl——上拉加载的提示文字DOM  
 * downArea——向下滑动距离  
 * isLock——是否关闭下拉刷新  
 * isBt——是否关闭上拉加载  
 * downFn——向下滑动回调方法  
 * upFn——向上滑动回调方法  
 * 用法：  
 * var udp = new Updownpull({  
 * el: ".bill_scroll",  
 * downEl: ".slideDown",  
 * upEl: ".loadMore",  
 * downArea: 50,  
 * downFn: function(){  
 *      that.PAGE = 1;  
 * },  
 * upFn: function(){  
 *      that.PAGE++;  
 * }  
 * });  
 * 版权：使用请说明出处  
 * 基于zepto或jq、mui------仅限手机端  
 */  
var Updownpull = window.Updownpull = function(option){  
    var o = {  
        el:option.el || "#warpper",         // 内容DOM  
        downArea: option.downArea || 60,    // 向下滑动距离  
        downFn: option.downFn,              // 向下滑动回调方法  
        upFn: option.upFn,                  // 向上滑动回调方法  
        downEl: option.downEl,              // 下拉刷新的提示文字DOM  
        upEl: option.upEl,                  // 上拉加载的提示文字DOM  
        isLock: option.isLock || false,     // 是否关闭下拉刷新  
        isBt: option.isBt || false          // 是否关闭上拉加载  
    }  
    var winH = $(window).height();      // 窗口高度  
    var $el = $(o.el);                  // 内容框  
    var $elParent = $el.parent();       // 内容父框  
    var $downEl = $(o.downEl);          // 下拉刷新的提示文字DOM  
    var $upEl = $(o.upEl);              // 上拉加载的提示文字DOM  
    var startY,                         // 开始移动的Y坐标  
        moveY,                          // 移动中的Y坐标  
        distance,                       // 移动的距离  
        isCanDo = false,                // 是否移动滑块  
        isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),    // 检测当前设备是否是hp产品  
        hasTouch = 'ontouchstart' in window && !isTouchPad;         // 判断当前设置是否包含滑动事件  

    $el.on("touchstart", moveStart);    // 开始移动事件  
    $el.on("touchmove", moveIng);       // 移动中事件  
    $el.on("touchend", moveEnd);        // 移动结束事件  

    // 内容父框滚动事件  
    $elParent.scroll(function(){  
        var $this = $(this);  
        //判断是否到了底部（内容父框的高度+滚动条的距离>=内容框高度时）  
        if($this.height() + $this.scrollTop() >= $el.height() && !o.isBt){   
            o.isBt = true;  
            o.upFn();  
        }  
    });  

    // 设置上拉状态（参数：page请求的页数，size每页的总数，len请求返回的数据长度）  
    // 数据请求成功后，可调用此方法，控制底部的文字提示  
    this.setIsBt = function(page, size, len){  
        if(len){  
            if(len < size  && page >= 1){  
                if(page == 1){  
                    $upEl.html('');  
                }else{  
                    $upEl.html('到此为止');  
                }  
                o.isBt = true;  
            }else{  
                $upEl.html('努力加载中...');  

                o.isBt = false;  
            }  
        }else{  
            if(page > 1){  
                $upEl.html('到此为止');  
            }else{  
                $upEl.html('空空如也');  
            }  
            o.isBt = true;  
        }  
    }  

    function moveStart(e){  
        if($elParent.scrollTop() <= 0 && !o.isLock) {  
            var even = typeof event == "undefined" ? e : event;  

            o.isLock = true;  
            isCanDo = true;  
            offsetY = 0;  

            //保存开始滑动Y坐标  
            startY = hasTouch ? even.touches[0].pageY : even.pageY;  
            //消除滑块动画时间  
            fn.setTranslition(0);  
        }  
    }  

    function moveIng(e){  
        if($elParent.scrollTop() <= 0 && isCanDo) {  
            var even = typeof event == "undefined" ? e : event;  
            var goDistance = 0;  
            moveY = hasTouch ? even.touches[0].pageY : even.pageY; // 保存当前移动Y坐标  

            distance = moveY - startY; // 计算移动的Y轴距离（结束位置减去开始位置）  

            if(distance > 0) {  
                even.preventDefault();  
                //消除滑块动画时间  
                fn.setTranslition(0);  
                //移动滑块  
                if(distance <= o.downArea) {  
                    goDistance = distance;  
                    fn.translateY(goDistance);  
                    $downEl.html('下拉可刷新')  
                } else if(distance < o.downArea * 2) {  
                    goDistance = o.downArea + (distance - o.downArea) * 0.5;  
                    fn.translateY(goDistance);  
                    $downEl.html('松开立即刷新');  
                } else {  
                    goDistance = o.downArea + o.downArea * 0.5 + (distance - o.downArea * 2) * 0.2;  
                    fn.translateY(goDistance);  
                    $downEl.html('松开立即刷新');  
                }  

                if((startY + distance + 8) > winH) {  
                    moveEnd(e)  
                }  
            } else {  
                fn.back();  
                return;  
            }  

        }  
    }  

    function moveEnd(e){  
        if(isCanDo){  
            fn.setTranslition(0.2);                                 //设置滑块回弹时间  
            isCanDo = false;  
            if(distance > o.downArea) {                             //判断滑动距离是否大于等于指定值  
                fn.translateY(50);                                  //保留提示部分  
                $downEl.html('正在刷新中...');  

                //执行回调函数  
                if(typeof o.downFn == "function") {  
                    o.downFn();  
                    var t = setTimeout(function() {                 //0.5秒后回归初始状态  
                        fn.back();  
                        clearTimeout(t);  
                    }, 500);  
                }  
            } else {  

                fn.back();  
            }  
        }  
    }  

    // 动画方法  
    var fn = {  
        translateY: function(diff) {    // 移动容器  
            $el.css({  
                "-webkit-transform": "translate3d(0," + diff + "px,0)",  
                "transform": "translate3d(0," + diff + "px,0)"  
            });  
            $downEl.html("下拉可刷新");  
        },  
        setTranslition: function(time) {    // 设置效果时间  
            $el.css({  
                "-webkit-transition": "all " + time + "s linear",  
                "transition": "all " + time + "s linear"  
            });  
        },  
        back: function() {          // 返回初始状态  
            fn.translateY(0);  
            $downEl.html('下拉可刷新');  
            o.isLock = false;  
        }  
    };  
}