教程地址
http://www.hcoder.net/course/index/cate/4

严重声明：本贴非软文贴，信不信由你！

很多人问：hbuilder开发的app能否上架android？能否上架ios？

本人亲身使用hbuilder开发了一款APP，历时足足一年时间，前端使用mui框架、zepto、msui；android和ios打包都是使用hbuilder在线打包，现android和ios均已成功上架；

下面简单讲一下ios上架：
IOS上架，我认为比android市场更方便、根本没有用户所想的那么麻烦（严格按照苹果流程就没有问题），只要记住以下几点，上架100%没有问题：
1、产品本身开发的体验足够好；
2、产品不涉及抄袭；
3、在应用内的支付环节，如果涉及到支付，必须提供两个[含]以上第三方支付平台，否则通不过审核；如果使用wap支付，必须转到safari浏览器来完成，否则通不过审核，切记！
4、个人亲身开发经验：能不用第三方sdk，就不要用，把第三方sdk去除，能用h5完成的，就不要用sdk！

以上，欢迎指正！

dcloud仍需加油努力！将产品的核心功能做到万无一失！

实在懒得重新编辑，而且dcloud这里的编辑器还不尽人意，需要的可移步简书。

http://www.jianshu.com/p/221e1979a276

在H5+开发APP的过程中，避免不了遇到跨域问题，笔者在本次开发过程中，遇到跨域问题，足足困扰了我2天的时间，一直解决不了，毫无头绪。
接下来记录一下这次解决跨域问题的过程：
一、H5+ APP开发，APP所运行的环境和服务器所在环境不在同一域，所以第一步设置服务器端返回头文件为：response.setHeader("Access-Control-Allow-Origin", "*"); 即允许所有的请求访问，如果只针对某一个地址访问，可以设置为：response.setHeader("Access-Control-Allow-Origin", "http://xxx.xx.com"); 后面的地址即为被允许通过访问的地址。一般情况下，在服务器端设置该属性后，就可以允许跨域请求了，然而对于菜鸟的笔者来说，这仅仅是问题的开始。
二、服务器端设置允许跨域请求后，现在请求确实能够达到服务器，能够处理逻辑返回数据到前端了，但是这时问题来了，请求返回状态码明明是200，但是ajax请求死活不执行success回调，一直跑去error中，仔细检查了datatype和服务器端的对应情况，响应过来的数据确实是json，datatype设置为json，也没用，在一个问题上弄了半天没弄出来的我，考虑一下换个脑子，使用一下H5+的XMLHttpRequest跨域请求方式，于是花了一点时间去研究一下这个XMLHttpRequest。
三、查阅了H5+提供的XMLHttpRequest的文档后，写出了如下代码：
function xhrPostRequest(url,params) {
var xhr = new XMLHttpRequest();
url = "http://foney.4kb.cn/LoveSpaceServer" + url;
var data = null;
console.log("请求开始");
if (xhr) {
xhr.open('GET', url);
xhr.onreadystatechange = function(e){
switch ( xhr.readyState ) {
case 0:
console.log( "xhr请求已初始化" );
break;
case 1:
console.log( "xhr请求已打开" );
break;
case 2:
console.log( "xhr请求已发送" );
break;
case 3:
console.log( "xhr请求已响应");
break;
case 4:
console.log( "xhr请求已完成" + xhr.status);
if (xhr.status == 200) {
var data = xhr.responseBody;
console.log( "结果：" + data);
} else if(xhr.status == 500) {
console.log( "服务器端异常。" + xhr.status);
}
else {
console.log( "不允许跨域请求。" + xhr.status);
}
break;
default :
break;
}
};
xhr.timeout = 10000;
xhr.responseType = 'text';
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(params);
} else {
console.log("xhr创建失败");
}
return data;
}
然而可恨的是，这串代码在浏览器中可以满足跨域请求数据，在APP中依然得不到想要的结果，问题依旧是：status=200，readyState 变为了0，但是在研究XMLHttpRequest的过程中发现，其实ajax是对XMLHttpRequest的封装，所以学习XMLHttpRequest也得到了相应的收获，接下来问题还是没解决，我只得先休息一会儿，玩一下游戏，放空一下脑子。
四、我重新回到ajax的问题上，现在来重新认识ajax，对各个属性进行解读，贴出代码：
$.ajax({
type: 'POST',
async: false,
url: "http://foney.4kb.cn/LoveSpaceServer/login/getValidateCode",
data: {
'phone':'18286006010',
'type':1
},
dataType:'json',
success: function(data){
console.log(data.msg);
},
error:function(e){
console.log("error:" + e.status + e.readyState + e.response);
}
});
type：请求方式，有POST、GET两种方式
url：服务器请求地址
data：传到服务器地址
dataType：服务器返回数据类型，这里一定要注意，服务器返回的数据类型，必须得相对应，如果只是字符串，则填写text，如果是json数据，则需要写成json，并且json格式一定要和官方给出的json格式一样。
success：ajax请求成功回调函数，这里为什么没写成服务器请求成功回调，是因为，有时候，就算服务器请求成功了，也未必能够回调到success里面，比如说dataType数据类型不对应。
error：ajax请求失败回调函数，
接下来的这个属性就是 async，这个属性就是这次我在跨域请求过程中的痛点，起初的时候我并没有管他，因为ajax请求默认就为异步，所以默认情况下，async为true ，现在说一下这个属性的作用：
async：false 同步请求，只有等服务器响应后才会执行接下来的js代码逻辑；
async：true 异步请求，在执行Ajax代码时，不会立即请求服务器，而是等js代码逻辑执行完后，再去请求服务器，服务器返回的结果在回调函数中继续处理。
所以跨域请求中必须把async设置为同步。问题解决。

问题描述：

使用的UI环境为Framework7。
正确设置了HBuilder沉浸式状态栏。
在Android平台下正常，在IOS平台下首次跳转都会出现白条，刷新Webview后白条消失。

问题截图：

问题解释：

经过各个代码段的测试及手册查询，发现Framework7自带了一个statusbarOverlay初始化属性（默认是启用的），该属性主要用于监测IOS平台下webAPP是否全屏（Framework7的作者为兼容PhoneGap特地写的），HBuilder在不启用沉浸式状态栏的情况下是正常的，但在启用沉浸式状态栏后就会与Framework7的statusbarOverlay产生冲突。

解决方法
关闭 Framework7的statusbarOverlay属性。

/*初始化APP框架*/  
var App = new Framework7({  
    .....  
    statusbarOverlay:false /*关闭全屏幕模式状态栏覆盖*/  
    .....  
});  

本文已过期，请参考https://ask.dcloud.net.cn/article/35115

Q:HBuilder Mac版本无法检测到手机或手机上启动支持调试的应用

A：
1、XCode版本不得低于8.2.1，如果低于请升级
2、ios-webkit-debug-proxy安装失败或者版本太低，关闭HBuilder，打开终端，按照下面命令安装：
brew update
brew reinstall --HEAD usbmuxd
brew reinstall --HEAD libimobiledevice
brew reinstall -s ios-webkit-debug-proxy
执行成功后再次启动HBuilder重试

Q:无法打开调试页面

A：
关闭所有已经打开的Chrome，然后重试

Q：chrome83+无法打开webview调试

A：请升级到HBuilderX2.8+，新版已经适配了chrome83的调整

关于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 ，选择刚才你生成的文件，

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