我用hbuilder也有半年了，真的是又爱又恨。快是真的快。但是卡顿是不是就直接无响应我真的受不了。官方如果在不处理这个问题。那我只能去试试别的编码器了。

绘制图片请将图片转成base64编码然后使用loadBase64Data载入图片。
虽然官方文档里有使用load方式载入图片，这种方式本地调试是OK的，但是一旦云打包之后就无效了。之前我问过为什么没有显示但是没人回答。直到今天更新后我发现他们demo里都是使用base64加载图片于是我试了一下，OK，可以。坑了我好久。

说明:
近来已经离开h5+开发大半年了。本来早就准备在离开前将自己使用的跨平台开发框架以及在线文档派送出来的，顺便总结下自己H5+开发的经验，但是又一直在降低优先级，结果拖到了现在。
因此决定先发一篇文章，将地址先贴出来，内容已经感慨后续再补充。

**地址**  
**源码:** [https://github.com/dailc/hybrid-h5plus-rayapp](https://github.com/dailc/hybrid-h5plus-rayapp)  

**PS**  
整套框架还是比较成熟的，虽然不高深，但是基于这套框架开发上线的项目也有20+了。对应在线文档地址在github源码中有地址。希望对大家的有帮助。  

~~另外~~  

如果对大家有帮助，记得star噢！  

TODO:  经验总结，感慨后续补上。  

[Html5+开发之旅-从入门到放弃](http://www.jianshu.com/p/8037e718b64c)  

[跨平台开发-Hybrid App系列](http://www.jianshu.com/p/4c462786149d)  

[ajax跨域，这应该是最全的解决方案了](http://www.jianshu.com/p/82b82d5dd1ea)  

我一开始一直使用海马玩调试我的程序，还比较正常。但是我在使用mui中的登录模板时，进入main页面后，发现设置等很多按钮都无法使用，调了好几天，都找不出原因。在手机真机调试时苹果和安卓都没有问题。
不用预加载而采用直接打开main页面没有问题。换了好几台电脑也一样。初步判断应该是虚拟机不兼容。最后换了一种虚拟机，在itools安卓虚拟机里可以正常运行。
不知什么原因，与大家分享一下，希望大家少走弯路。知道其他解决方法的同学也希望能告知大家。

安卓真机：4.2.2， Hbuiler 7.6.5。
mui.plusReady(function() {
plus.io.resolveLocalFileSystemURL("_doc/picker-data/", function(dirEntry) {
console.log("初始化_doc/成功!");
},function (e) {
console.log("初始化_doc/失败!"+JSON.stringify(e));
});
};
document.getElementById("btn-update").addEventListener("tap", function(event) {
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
console.log(fs.root.fullPath);
console.log("初始化PRIVATE_DOC成功!");
},function (e) {
console.log("初始化PRIVATE_DOC失败!"+JSON.stringify(e));
});
};
在点击id为“btn-update”按钮后fs.root.fullPath为null。

调换顺序后fs.root.fullPath的路径正常
mui.plusReady(function() {
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
console.log(fs.root.fullPath);
console.log("初始化PRIVATE_DOC成功!");
},function (e) {
console.log("初始化PRIVATE_DOC失败!"+JSON.stringify(e));
});
};
document.getElementById("btn-update").addEventListener("tap", function(event) {
plus.io.resolveLocalFileSystemURL("_doc/picker-data/", function(dirEntry) {
console.log("初始化_doc/成功!");
},function (e) {
console.log("初始化_doc/失败!"+JSON.stringify(e));
});
};

function notice_push(getMsg){  
    mui.plusReady(function () {  
        var push_msg = JSON.parse(getMsg.content);  

        createLocalPushMsg(getMsg,push_msg);  
        // 监听点击消息事件  
        plus.push.addEventListener("click",function(msg){  

            // 提示点击的内容  
            msg.msg_chat_id = push_msg.id;  

            console.log(msg.payload);  
            switch( msg.payload ) {  
                case "chat":  
                    console.log( "点击本地创建消息启动：" );  
                    jump("file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/html/msg/html/msg-chat.html",msg);  
                break;  
                default:  
                    console.log( "点击离线推送消息启动：");  
                break;  
            }  
            localStorage.removeItem(getInterimID+"-locationHref");  
        },false);  
        // 监听在线消息事件  
        plus.push.addEventListener("receive",function(msg){  
            console.log("**********************************");  
        },false)  
    })  
}  

function createLocalPushMsg(getMsg,pushMsg){  
    var options = {cover:false};  
    var payload = "";  
    var str = getMsg.title+": "+pushMsg.reply.content;  
    switch (getMsg.title){  
        case "新回复":  
            payload = "chat";  
            break;  
        default:  
            break;  
    }  
    plus.push.createMessage( str, payload, options );  

    if(plus.os.name=="iOS"){  
        console.log('*如果无法创建消息，请到"设置"->"通知"中配置应用在通知中心显示!');  
    }  
}

我的这个是接受websocket的推送消息，当我接收到后，会把消息对象传进notice_push（）方法可里，紧接着本地创建通知栏进行通知！然后click后调转到相应的页面里去；页面跳转使用的html5+模版的方法（跳转部分保证没问题）；

问题是，当我在页面里的时候第一次发通知，通知栏提示正常显示，但是无法点击，紧接着第二次发送通知，通知栏正常，但是会自己调转过去！不知道为啥什么！求教！

而且最近发现hbuilder 7.6.0.201611071800版本 ios不能同步调试提示在手动安装！
更新软件后，打包名开头字母还不能小写！两边为难！

刚刚开始第一次调用微信支付的时候成功付款了，但是后面一直报-1的错误。在此感谢那个默默指导我的哥子“糕なMr.俊 ”。开始是因为签名和开放平台设置的不一致。但是改过之后一直还是报错。就在刚刚这位哥子再次指导我，把基座和App都卸掉然后再装上app就成功了。

webapp精品群：495654168

不定期分享干货视频，主要涉及vue.js,decloud项目源码，还有优质的项目外包。
加群表明来源：例如来之 decloud社区。

快速开发APP教程地址：

http://study.163.com/course/courseMain.htm?courseId=1003604089
http://study.163.com/course/courseMain.htm?courseId=1003606075
http://study.163.com/course/courseMain.htm?courseId=1003664040
http://study.163.com/course/courseMain.htm?courseId=1003605092

自己写了一个弹出密码框的dialog。修改的不是很好。大大们帮忙优化一下啊。。。
效果图

   //创建密码提示框  
     * @param {Object} message  内容  
     * @param {Object} placeholder  提示  
     * @param {Object} title   标题  
     * @param {Object} btnArray  按钮  
     * @param {Object} callback  回调函数  
     * @param {Object} type  渲染类型  
     * @param {Object} maxlength   密码框长度  
     */  
    mui.promptPwd('在线支付<span class=\'xfcred\'>2000.00元</span>', '请输入6-8位支付密码', '请输入支付密码', ['取消', '确定'], function(e){  
                        if (e.index == 0) {  
                            mui.alert('取消线上支付', '提示信息', null);  
                        } else {  
                            mui.alert('线上支付成功', '提示信息', null);  
                                                    alert("支付密码为："+e.value);  
                        }  
                    }, 'div', 8)

修改的dialog源文件，保存为插件：mui.promptpwd.js

不得不说,原生开发省时省力啊~
2017 html5肯定是回继续研究下去的,
但我觉得是时候考虑用一下原生了,
2017你的app还是和2012年时候一样卡吗?

1.客户端请求升级接口，传递当前版本参数，服务端获取到客户端版本，动态对比线上最新版本，并生成差异配置文件update.xml，将其保存用于后来同版本请求升级的直接用即可。 然后动态生成差量升级包wgtu。
分析
优点：下载文件比较少，真正实现了差量更新。
缺点：动态对比耗费一些时间，依赖服务器以及网络状况。

2.自己做个插件进行差量升级，不用对比差异文件。考虑到css文件以及js文件不大，图片资源较大。可以在升级过程中，不添加图片，只添加css、js等文件。
分析
优点：实现需求的差量更新，无需对比版本差异，省事。
缺点：需要自己实现插件，类似插件可以参考如下地址：http://blog.csdn.net/qq_14859923/article/details/54178027
github地址：https://github.com/runfengai/DiffUpdaterRep