基于plus.downloader的图片懒加载功能，支持本地缓存

如果有样式问题的话，请移步至http://www.cnblogs.com/phillyx/p/4649128.html

简单说一下

在app中，对一些变动不频繁的图片数据（如个人头像等），是需要存储在本地的。我相信这对大多数的app都是强需求的。  

怎么使用呢

img标签默认都有data-src属性，用来存放网络链接，src属性初始是最好给一个默认本地图片链接，下载好会自动替换掉

<img data-src="远程链接" src="默认图片">

1. 如果在列表中，通过下拉刷新、上拉刷新加载数据，加载下一页的时候可以如下做：
   一次新增多条数据时，为避免重复渲染页面及重新下载正在下载中的图片等问题，新增的img要设置data-pageno属性,如下使用arttemplate写的模板

   <script id="tmpl" type="text/html">  
   {{each items as item i}}  
           <li class="mui-table-view-cell" data-id='{{item.id}}'>  
             <img data-src="{{item.url}}" data-pageno="{{item.pageno}}" src="img/default.png">  
           </li>  
   {{/each}}  
   </script>

   在js中怎么用呢

   var html = template('tmpl', data);  
   document.querySelector("#pullrefresh").innerHTML  = html;  
   lazyImg.pageno=data.pageno;  
   lazyImg.lazyLoad();

2. 如果不需要分页或者零散的数据，直接添加lazy类就可以了

   <img data-src="远程链接" src="默认图片" class="lazy">

   然后直接调用lazyImg.lazyLoad()就可以了

注意

lazyimg.js是结合cache.js一齐使用的，代码都已提交至github
地址在https://github.com/phillyx/MUIDemos/tree/master/js/lazyimg.js
也可直接使用合并后的代码https://github.com/phillyx/MUIDemos/tree/master/dist/common.js

更好的预览效果看这http://www.cnblogs.com/phillyx/p/4761364.html
在使用plus.storage频繁地存取数据时，可以感觉到明显的卡顿，而且很耗内存，
在切换到localstorage时虽然效率很高，页面渲染速度明显变快了，且手机发热不明显，不过又遇到了存储瓶颈（一般<=5M）,
因此折中采取了plus.storage与localStorage混合的方案：
当localStorage达到存储瓶颈时切换到plus.storage

封装的方法基本上和plus.storage没区别。关于plus.storage参考http://www.html5plus.org/doc/zh_cn/storage.html

接口

1. getItem
   通过键key检索获取应用存储的值

   var item=myStorage.getItem(key);

   • 参数key: DOMString必选
     存储的键值
   • 返回值DOMString : 键key对应应用存储的值，如果没有则返回null。
   • 说明：方法内部默认先从localStorage取值，没有再从plus.Storage取值

2. setItem
   修改或添加键值(key-value)对数据到应用数据存储中

   void myStorage.setItem(key, value);

   • 说明：方法默认将数据存储在localStorage中，超出localStorage容量限制则存到plus.storage中

3. getLength
   获取localStorage中保存的键值对的个数

   var len=myStorage.getLength();

4. getLengthPlus
   获取plus.storage中保存的键值对的个数

5. removeItem
   通过key值删除键值对存储的数据

   void myStorage.removeItem();

6. clear
   清除应用所有的键值对存储数据

   void myStorage.clear();

7. key
   获取localStorage键值对中指定索引值的key值

   var foo = myStorage.key(index);

8. keyPlus
   获取plus.storage键值对中指定索引值的key值

   var foo = myStorage.keyPlus(index);

9. getItemByIndex
   通过键key检索获取应用存储localStorage的值

   var item=myStorage.getItemByIndex(index);

   • 参数index: Number必选 存储键值的索引
   • 返回值DOMString : 键key对应应用存储的值，如果没有则返回null。

10. getItemByIndexPlus
    通过键key检索获取应用存储的值

    var item=myStorage.getItemByIndexPlus(index);

    • 参数index: Number必选 存储键值的索引
    • 返回值DOMString : 键key对应应用存储的值，如果没有则返回null。

11. getItems
    通过键key检索获取应用存储的值

    var items=myStorage.getItems(key)

    • 参数 key: Number可选 存储键值的索引
    • 返回值Array：不传key参则返回所有对象，否则返回含有该key的对象

12. removeItemByKeys
    清除指定前缀的存储对象

    void myStorage.removeItemBykeys(keys,cb)

    • 参数keys：DOMString或Array, 必选 keys为String,方法内部自动转换为Array
    • 参数cb：Function 可选 回调函数

说明

以上方法经常用到的还是getItem setItem
getItems在测试或控制台查看时倒是偶尔用得到
removeItemBykeys是结合本地文件common.cache.clear缓存清除时一齐使用的

代码已分享到github
地址在https://github.com/phillyx/MUIDemos/tree/master/js/myStorage.js
也可直接使用压缩后的代码https://github.com/phillyx/MUIDemos/tree/master/dist/common.js

里面实现一个小功能，播放视频；因为在android5.1以后播放视频有点卡，所以用到原生下面是步骤
1.新建一个移动项目，然后 发行->生成本地打包app资源，注意我打的是android，ios差不多

2. 下载一个app打包工具
3. 把app打包工具导入到eclipse中
4. 把assets->apps->项目名->www替换成你自己的www
5. 把项目名修改成你的项目名
6. 在src中的io.dcloud这个包中新建一个activity，并加到AndroidManifest.xml
7. 打开activity的js的关键代码如下：
   function aa (){
   var mainActivity= plus.android.runtimeMainActivity();
   Intent = plus.android.importClass('android.content.Intent');
   var intent = new Intent();
   intent.setClassName('io.dcloud.HBuilder.Hello','io.dcloud.MyActity');//我试了其它的好像就这个能打开
   mainActivity.startActivity(intent);//打开activity
   }

打完收工，代码上传不鸟！！！！！！！！！！！！

传统原生App的更新是要经历较长时间的下载和安装过程的。
所以很多用户干脆不更新app，任由更新角标放着。

流应用下没有这些问题，用户无需触发更新操作，总能使用到最新版。
流应用不需要平时在后台处理更新，而是在启动流应用时进行更新检查。

流应用除了能流式下载，自然也能流式更新，并且这种更新是差量更新。
如果你的app工程里有100个文件，其中5个文件变化了，那么流应用平台会自动识别并只更新这5个文件。

当流应用启动时，会向流应用服务器发起更新检测请求，如果服务器版本有更新则会下载更新包（使用差量更新技术），更新包下载完成后则执行更新操作。

流应用有多种更新模式可选。
开发者在HBuilder里提交流应用时，可以配置更新模式，不同的更新模式有不同的效果。

HBuilder里更新流应用时，可以选择更新模式：

默认模式（Android平台提示用户是否重启升级，iOS平台不提示，下次启动升级）

应用升级时弹出提示框，5秒后自动关闭，效果如下：

顶部“重启”、“忽略”按钮点击后的作用如下：

• 重启：立即更新应用并重启生效。
• 忽略：不立即更新应用（此时仍然使用老版本），下次启动应用时自动更新。

实时更新当前应用

启动时检查到需要更新，立即更新应用，但是已经打开的html页面不会更新。
采用此模式应该注意以下问题：

1. 应用已经打开页面不会更新，由于更新文件从网络下载，从而导致更新时机的不确定性，此时无法确定当前用户操作到具体的页面；
2. 应用已经加载过的资源存在缓存，更新后无法立即生效，如js/css等，此时还是使用更新前内容；
3. 新版本应用更新需删除老版本文件，可能导致老版本业务逻辑无法继续运行；
4. 新版本应用更新中JS业务逻辑包含重大调整，可能会出现应用无法预期的状态（如新版本某些页面的js逻辑是认为首页一定会做某些操作，而旧版本首页如果没有这些操作，从而会进入不可预期的状态）。
   这种更新模式虽然注意事项很多，但有2个适应场景：
5. 静态资源更新，即文字图片等非js逻辑，可以立即生效的体验要比重启生效更好。
6. 追究极致的高级开发者在经过仔细测试后，也可更新js等逻辑。

项目github地址、jar包下载地址

1. 介绍
   ===

   • 这是一个dcloud集成百度推送的教程（android端）。
   • 这是一个离线打包配置的教程。
   • 本项目用百度推送去替换dcloud默认集成的个推推送，使修改对于web层是完全透明的，也就是说js端的推送逻辑基本不用做修改。

2. 使用
   ===

   • 按照dcloud官方教程集成个推推送。
   • 下载百度推送sdk，导入sdk中的jar包和so文件，so文件只需导入armeabi、armeabi-v7a、x86文件夹下的。
   • 删除个推jar包GetuiSdk2.5.0.0.jar、GetuiExt-2.0.3.jar、aps-igexin.jar，导入本项目libs目录中的baidu-gexing.jar。
   • 在AndroidManifest.xml中注释掉个推推送的所有配置，添加以下配置：

     
     <!-- baidu push开始 -->  

<!-- 用于操作本地创建的通知 -->
<receiver android:name="io.dcloud.feature.aps.NotificationReceiver" >
<!-- 如下配置用于处理推送消息 -->
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
<action android:name="cn.tomygo.app.v2.CREATE_NOTIFICATION" />
<action android:name="cn.tomygo.app.v2.__REMOVE_NOTIFICATION" />
<action android:name="cn.tomygo.app.v2.CLEAR_NOTIFICATION" />
<action android:name="cn.tomygo.app.v2.__CLILK_NOTIFICATION" />
</intent-filter>
</receiver>

<!-- 原本用于个推的配置，同样用于百度推送 -->
<meta-data
android:name="PUSH_APPID"
android:value="填写你的appid" />
<meta-data
android:name="PUSH_APPKEY"
android:value="填写你的appkey" />
<meta-data
android:name="PUSH_APPSECRET"
android:value="填写你的appsecret" />

<!-- Push service 运行需要的权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_DOWNLOAD_MANAGER"/>
<uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.EXPAND_STATUS_BAR" />

<!-- 4.6版本新增的Activity声明，提升Push后台存活率 -->  
<activity  
    android:name="com.baidu.android.pushservice.PushKeepAlive"  
    android:theme="@android:style/Theme.Translucent.NoTitleBar"/>  

<!-- push service start -->  
<!-- 用于接收系统消息以保证PushService正常运行 -->  
<receiver android:name="com.baidu.android.pushservice.PushServiceReceiver"  
    android:process=":bdservice_v1" >  
    <intent-filter>  
    <action android:name="android.intent.action.BOOT_COMPLETED" />  
    <action android:name="android.net.conn.CONNECTIVITY_CHANGE" />  
    <action android:name="com.baidu.android.pushservice.action.notification.SHOW" />  
    <action android:name="com.baidu.android.pushservice.action.media.CLICK" />  
    <!-- 以下四项为可选的action声明，可大大提高service存活率和消息到达速度 -->  
    <action android:name="android.intent.action.MEDIA_MOUNTED" />  
    <action android:name="android.intent.action.USER_PRESENT" />  
    <action android:name="android.intent.action.ACTION_POWER_CONNECTED" />  
    <action android:name="android.intent.action.ACTION_POWER_DISCONNECTED" />  
    </intent-filter>  
</receiver>  
<!-- Push服务接收客户端发送的各种请求-->  
<receiver android:name="com.baidu.android.pushservice.RegistrationReceiver"  
    android:process=":bdservice_v1" >  
    <intent-filter>  
    <action android:name="com.baidu.android.pushservice.action.METHOD" />  
    <action android:name="com.baidu.android.pushservice.action.BIND_SYNC" />  
    </intent-filter>  
    <intent-filter>  
    <action android:name="android.intent.action.PACKAGE_REMOVED" />  
    <data android:scheme="package" />  
    </intent-filter>                     
</receiver>  
<service android:name="com.baidu.android.pushservice.PushService" android:exported="true"   
    android:process=":bdservice_v1" >  
    <intent-filter >  
        <action android:name="com.baidu.android.pushservice.action.PUSH_SERVICE" />  
    </intent-filter>  
</service>  
<!-- 4.4版本新增的CommandService声明，提升小米和魅族手机上的实际推送到达率 -->  
<service android:name="com.baidu.android.pushservice.CommandService"  
    android:exported="true" />  

<!-- 此处Receiver名字修改为当前包名路径 -->  
<receiver android:name="io.dcloud.feature.apsGt.MyPushMessageReceiver">  
    <intent-filter>  
    <!-- 接收push消息 -->   
    <action android:name="com.baidu.android.pushservice.action.MESSAGE" />  
    <!-- 接收bind、setTags等method的返回结果-->   
    <action android:name="com.baidu.android.pushservice.action.RECEIVE" />  
    <!-- 接收通知点击事件，和通知自定义内容 -->   
    <action android:name="com.baidu.android.pushservice.action.notification.CLICK" />  
    </intent-filter>  
</receiver>  
<!-- baidu push结束 -->

*  配置完成。  

3.说明  
===  
* 百度中推送的附加字段的内容放在消息对象的payload字段中：
```javascript  
//js打印附加字段  
plus.push.addEventListener( "click", function( msg ) {  
    console.log("附加字段："+msg.payload);  
}, false );

前端经验两年，北京工作，现承接HTML5+ MUI外包或者纯前端界面，有意详谈 扣扣80883080

plus.storage.removeItem 删除某个键值对的时候好像删不干净，再去取删除掉的键时有时候还可以取到. 有没有人遇到同样的问题?

Hybrid APP开发工程师招聘，工作地点西安
1、掌握JavaScript语言开发基础，熟悉Javascript面向对象编码者优先；
2、精通Html、Div+Css布局，掌握W3C标准及各种浏览器兼容性调试；
3、熟练Dreamweaver、Fireworks、Photoshop、Webstorm等常用网页、UI设计工具；
4、了解一种以上前端开发框架，如Jquery、Angularjs、ExtJS、LigerUI等；
5、熟悉XML/JSON前端开发技术，了解BootStrap；
熟悉Java开发者优先，具备MUI、AngularJS经验者优先，具备APP Hybrid设计经验者优先；

由于刚刚接触HTML5+开发APP，对于后端处理不太了解，昨天还发帖询问呢，但是没有人回答，经过不懈的努力，终于搞定了，现将后端处理的代码分享上来！
此程序需要的jar包如下:
commons-fileupload-1.2.1.jar
commons-io-1.4.jar
需将两个jar包放到工程的lib文件夹下，上传页面的代码我用的是HelloH5+项目的uploader.html，这个应该很好找，后端的上传处理我用的是Servlet,具体的配置方法就不讲了，直接来代码:

import java.io.File;  
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.io.InputStream;  
import java.util.Calendar;  
import java.util.Iterator;  
import java.util.List;  
import java.util.Random;  
import java.util.UUID;  

import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
import org.apache.commons.fileupload.FileItem;  
import org.apache.commons.fileupload.FileUploadBase;  
import org.apache.commons.fileupload.ProgressListener;  
import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
import org.apache.commons.fileupload.servlet.ServletFileUpload;  
/**  
 * Apache组件上传  
 *   
 * @author 于世海  
 * @date 2016-02-17  
 */  
public class UploadHandleServlet extends HttpServlet {  

    private static final long serialVersionUID = 5827821285414610443L;  

    public void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        this.doPost(request, response);  
    }  

    public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        // 上传文件目录  
        String uploadDir = this.getServletContext().getRealPath("/upload");  
        DiskFileItemFactory factory = new DiskFileItemFactory();  
        // 设置内存区块大小4KB  
        factory.setSizeThreshold(4 * 1024);  
        // 设置暂存容器，当上传文件大于设置的内存块大小时，用暂存容器做中转  
        factory.setRepository(new File(this.getServletContext().getRealPath(  
                "/temp")));  
        ServletFileUpload fileUpload = new ServletFileUpload(factory);  
        fileUpload.setSizeMax(1024 * 1024 * 100);  
        //fileUpload.setFileSizeMax(1024 * 1024 * 10);  
        List<FileItem> fileItemList = null;  

        try {  
            fileItemList = fileUpload.parseRequest(request);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
        Iterator<FileItem> fileItemIterator = fileItemList.iterator();  
        FileItem fileItem = null;  
        while (fileItemIterator.hasNext()) {  
            fileItem = fileItemIterator.next();  
            // 普通文件框上传  
            if (fileItem.isFormField()) {  
                String filedName = fileItem.getFieldName();  
                String filedValue = fileItem.getString("GBK");// 编码格式  
                System.out.println(filedName);// 文件框名称  
                System.out.println(filedValue);// 文件的值  
            } else {  
                String filedName = fileItem.getFieldName();// 文件上传框的名称  
                // 获取文件上传的文件名  
                String OriginalFileName = takeOutFileName(fileItem.getName());  
                System.out.println("原始文件名："+OriginalFileName);  
                if (!"".equals(OriginalFileName)) {  
                    // 根据上传的文件名重新命名  
                    String newFileName = getNewFileName(OriginalFileName);  
                    System.out.println("重新名："+newFileName);  
                    File writeToFile = new File(uploadDir + File.separator  
                            + newFileName);  
                    try {  
                        fileItem.write(writeToFile);  
                    } catch (Exception e) {  
                        e.printStackTrace();  
                    }  
                }  
            }  
        }  
    }  

    private String takeOutFileName(String filePath) {  
        String fileName = filePath;  
        if (null != filePath && !"".equals(filePath)) {  
            int port = filePath.lastIndexOf("\\");  
            if(port != -1){  
                fileName = filePath.substring(port+1);  
            }  
        }  
        return fileName;  
    }  

    private String getNewFileName(String originalFileName) {  
        StringBuffer newFileName = new StringBuffer();  
        if (null != originalFileName && !"".equals(originalFileName)) {  
            int port = originalFileName.lastIndexOf(".");  
            String type = "";  
            String fileName = "";  
            if (port != -1) {  
                type = originalFileName.substring(port + 1);  
                fileName = originalFileName.substring(0, port);  
            } else {  
                fileName = originalFileName;  
            }  
            StringBuffer suffix = new StringBuffer("_");  
            suffix.append(Calendar.getInstance().getTimeInMillis());  
            suffix.append("_");  
            suffix.append(new Random().nextInt(100));  
            newFileName.append(fileName);  
            newFileName.append(suffix);  
            newFileName.append(".");  
            newFileName.append(type);  
        }  
        return newFileName.toString();  
    }  

}

其他的处理代码直接修改就可以了！

这是非常好的文章，偶然间读到这个文章，感觉非常有用，但是当时疏忽没有拷贝url，本以为还可以再找到。
关闭页面后开始编程，过一会想找这个页面就找不到了，找了整整3个小时才找到。

以下是链接，没看过的一定要看一下，看过的略过
http://ask.dcloud.net.cn/article/25

，感觉社区目录排版有些混乱，或许是刚来的原因。
支持Dcloud!!

今天做一个下拉刷新评论的模块，iOS版本上面正常，在Andriod上面却失效，查了很久最后发现原因是初始化载入数据的问题；
Andriod机器上，如果我一初始化瞬间就加载数据（loadComment），会导致整个下拉失效，后来发现需要延迟一点才可以，所以再plusReady防法上写了下面代码；

mui.plusReady(function(){  
    //加载评论  
    if(mui.os.android){  
        //Andriod容易加载太快导致初始化下拉失败  
        setTimeout('loadComment()',800);  
    }else{  
        loadComment();  
    }  
});  

mui.init({  
    pullRefresh: {  
        container: '#pullrefresh',  
        down:{  
            callback: pulldownRefresh  
        }  
    }  
});

浪费了很多时间，所以写出来希望能给朋友们一些思路；

要过年啦，客户的项目还没开始动工，客户就喊着要 客户端支持国际化，要中英文双语的。
....度娘....，果然还是有解决方案的。 依然是基于 jquery 的，学名：i18n
首先呢，还是加引用，可以是这样的。

<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>  
        <script type="text/javascript" src="js/jquery.i18n.properties-min-1.0.9.js"></script>

其次呢，Dom结构咯；这里我就简单的放了俩按钮，第一个是表现的，第二个用来点击触发改变用的；

<div class="mui-content">  
            <button id='btn'></button>  

            <button id='changelanguage'></button>  
        </div>  
最后呢，就是js代码了
``````javascript  
<script>  
            var lang = '';  
            $(function() {  
                lang = (jQuery.i18n.browserLang().substring(0, 2)); //默认从浏览器语言读取  
                jQuery.i18n.properties({  
                    name: 'strings',  
                    path: 'i18n/', //资源文件路径  
                    mode: 'map', //用Map的方式使用资源文件中的值  
                    language: lang,  
                    callback: function() { //加载成功后设置显示内容  
                        $('#btn').html($.i18n.prop('btn'));  
                        $('#changelanguage').html($.i18n.prop('changelanguage'));  
                    }  
                });  
            })  
            document.getElementById("changelanguage").addEventListener('tap', function() {  
                if ('zh' == lang) {  
                    lang = 'en';  
                } else {  
                    lang = 'zh';  
                }  
                jQuery.i18n.properties({  
                    name: 'strings',  
                    path: 'i18n/', //资源文件路径  
                    mode: 'map', //用Map的方式使用资源文件中的值  
                    language: lang,  
                    callback: function() { //加载成功后设置显示内容  
                        $('#btn').html($.i18n.prop('btn'));  
                        $('#changelanguage').html($.i18n.prop('changelanguage'));  
                    }  
                });  
            });  
        </script>

好了，上面都是页面上代码了，最最后就是对应的配置文件了，你不配置，代码怎么知道你的英文要先显示成什么中文呢？？
只要指定要配置的id就行。比如上面的按钮的id是 btn，所以这里配置文件里 写btn;
没了。就这么多了，最后附上包