项目介绍

1. 项目源码
   2.安卓已通过百度应用分发到对应商店，搜索“ES6入门”即可下载（IOS的没有开发者账号，上线无期）

   应用技术

   mui&&html5+&&部分ES6语法

   致谢

   感谢阮一峰老师全书开源《ECMAScript 6 入门》哦！

项目源码

infoapp

安卓下载地址

应用宝-InfoApp

实现功能

1.登录页面使用第三方登录授权；
2.支持上拉加载，下拉刷新；
3.支持左右翻页；
4.支持页面预加载提升页面渲染速度，实现堪比原生APP的渲染效果。

用途

1.前端作品展示；
2.mui及html5+初学者入门参考！

截图

1 2 3 4

为客户开发触屏版的头像上传功能时遇到这个问题，这个问题困扰了好几天。反复的打印localResizeIMG压缩后的base64的代码和通过mui.post方法提交到后端的base64数据。然后通过比对发现post过来的base64代码和localResizeIMG压缩过的能显示的base64代码是有差异的。主要是差别如下：

localResizeIMG的base64代码中是 +/ 而post到后端打印出来的是 + 也就是说部分+/ 被替换成+了。具体的问题没有再深入研究。这个情况遇到问题是，如果图片比较小都没问题，如果原始图片超过比如500kb（这个和localResizeIMG压缩比例有关系，这里就因人而异了），就容易出现上传到后台的图片是不完整的，有损的。甚至是黑图。

OK，解决方法来了。
在post之前，将base64的代码转成数组。如下：

    mui(".member_from").on("tap","button",function () {  
        var avatar_size = document.getElementById("avatar_photo").value;  
        var avatar = document.getElementById("avatar_show").src;  
        avatar = avatar.split("/");  
        mui.post('后端地址',{avatar:avatar,imgsize:avatar_size},function(data){  
            if (data.state==false) mui.alert('原因是什么什么什么', '操作失败！');   
        },'json');  
    });

后端处理。这个做开发的就很容易了。一句话的问题：

    $base64_image_contents = $_POST["avatars"];//提交过来的是数组  
    $base64_image_content=implode('/',$base64_image_contents);//数组转成字符串

后面base64转图片的这个就不发了。坛子里很多，搜下大把。

不知道是不是图片太大，造成base64代码过大而造成的图片受损的问题。总之，这个解决方案轻松搞定很多大图。

示例项目

HBuilder中提供了mui登录模板、Hello 5+以及Hello mui等三个示例项目。

新建项目

在HBuilder中通过新建App来获取相关的源码，并且可以通过浏览器或真机调试来预览效果。

弊端

通过上述方法，虽然可以成功获取到相关项目资源。但是示例项目有更新时，必须通过更新HBuilder并且重复上述步骤，才可以获取最新的资源。

同步资源

HBuilder中集成了EGIT这款git分布式版本管理插件，可以通过该插件将开源地址中的资源导入HBuilder的工作区域中。

EGIT安装

HBuilder——工具——插件安装——EGIT

导入资源

1、文件——导入，选择Git，下一步；

扩展阅读

导入Github上的项目（感谢FindFly的分享）
Egit的常用操作详解（转自CSDN——CrazyCodeBoy原创）

资源地址

mui最接近原生APP体验的高性能框架
HelloH5plus

学习链接进入教室QQ:2971611409

项目都快收尾发现有这么大一个坑，官方也不出来说句话。。。。
参见：http://ask.dcloud.net.cn/question/18495

在外层嵌套

   <div class="mui-scroll-wrapper">  
       <div class="mui-scroll">  

       </div>  
   </div>

这样的HTML开启区域滚动的时候。当页面中有大块的独立区域的时候，这时滚动页面，当两根手指前后按在手机屏幕上的时候。页面会跳动到第二次按下得位置，
这样就造成了在双手一起在屏幕上滚动页面的时候，无法让页面向上或向下滚动，它总是在两根手指按下的地方，来回跳动。

《mui开发教程》全套录制工作已经完成，视频观看地址
http://www.hcoder.net/course/info_211.html
总计时长 4小时左右，分段讲解了 MUI的常用组件、事件、服务端通讯等知识。
后期将发布 h5+ 相关教程，欢迎观看，欢迎意见建议！

今天研究了一下分享插件，发现确实难用，反而不如直接使用网上的插件了。以下是我的一些心得。

1、首先如果需要分享一篇带图片的文章，我们有几种方式分享：
1）分享一张包含本地路劲的图片，也就是说手机中需要包含此图片的硬件地址，如果手机存储中没有这个图片的话，就完全无法分享。
2）分享一张牌照后的图片，和上面的方式一样，只不过需要先拍照保存到本地再分享。
3）分享一张app目录中已经存在的logo图，这个也是类似的。

4）唯一不同的方式是分享链接，但是手机端的页面肯定是无法以链接方式分享出去的。

• 之前碰见问题，新浪微博报错10007，特纳疼讯QQ报错-100
• 无法提交网络图片的原因可能是由于目前仅仅集成了低级接口，而没有使用高级接口，并且高级接口必须申请appkey并且配置之后才能使用。
• 详见http://ask.dcloud.net.cn/question/1357，里面说的转换成base64二进制我还未尝试。
• 现在就出现了一个问题，目前我们是通过接口从服务器获取数据然后显示在手机页面上，这种方式获取的图片是远程地址的，没有保存在手机上，自然无法发送了。

2、那如果需要分享带图片的文章我们应该怎么做。
1）通过完全的服务器页面方式：
需要有一台可以让外网访问到的服务器，上面部署了一个web应用来生成文章页面。这种情况下通过分享链接方式分享文章就可以了。
2）通过曲线救国方式：
将图片保存到本地再发送，但是这种方式会造成流量的浪费。

3、以上方式仅仅在测试调试时可行，很多功能无法使用，如果需要正常使用，我们必须申请微博、微信、朋友圈、腾讯微博、qq等服务的appkey并配置到app中。

现在有A\B两个页面，从A打开B页面，在B页面中获取地址位置并保存在页面中使用，使用的是privider:'baidu'
如果此时从B页面返回之后再打开，就无法获取地址位置信息了。
使用的是安卓手机。

由于项目中已经普遍使用了百度地图，此处就不更换位置格式了。

此处应为bug：
现在有两种解决方案
1、先调用非privider:'baidu'的参数的地址位置获取api，比如privider:'system'，在成功的回调函数中直接调用带百度参数的api。
2、直接调用非百度参数的api之后使用百度的接口进行数值转换。转换成百度的位置格式。