HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

打包后问题

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

打包后打开 启动页之前 先打开的是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;  
        }  
    };  
}  
继续阅读 »

用法

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;  
        }  
    };  
}  
收起阅读 »

【分享】一个基于5+ SDK和阿里百川电商SDK的5+ plugin拓展

技术分享

文档

使用说明

  • 1.生成证书文件 release.keystore;(Android Studio Build目录下的Generate Signed Apk)
  • 2.使用证书打包生成apk文件; (app模块下signingConfigs字段配置,需要和证书打包时候对应)
  • 3.将apk上传到阿里百川管理后台获取安全图片yw_1222.png.
  • 4.集成电商sdk

    dependencies {  
    // fastjson  
    compile 'com.alibaba:fastjson:1.2.9'  
    
    // 支付  
    compile 'com.alibaba.alipay:alipaySingle:20160825@jar'  
    
    // 登陆  
    compile 'com.ali.auth.sdk:alibabauth_core:1.1.4@jar'  
    compile 'com.ali.auth.sdk:alibabauth_ui:1.1.4@aar'  
    compile 'com.ali.auth.sdk:alibabauth_ext:1.1.4@jar'  
    //【可选】仅供特殊合作伙伴使用  
    // compile 'com.ali.auth.sdk:alibabauth_accountlink:1.1.4@jar'  
    
    // 安全基础  
    compile 'com.taobao.android:securityguardaar3:5.1.81@aar'  
    //【可选】安全高级,如使用了发放红包、优惠券高级功能,则必须引入  
    // compile 'com.taobao.android:securitybodyaar3:5.1.25@aar'  
    
    // Mtop网关  
    compile 'com.taobao.android:mtopsdk_allinone_open:1.2.2.4@jar'  
    
    // applink  
    compile 'com.alibaba.sdk.android:alibc_link_partner:1.1.0.0'  
    
    // UT  
    compile 'com.taobao.android:utdid4all:1.1.5.3_proguard@jar'  
    compile 'com.alibaba.mtl:app-monitor-sdk:2.5.1.3_for_bc_proguard@jar'  
    
    // 电商SDK  
    compile 'com.alibaba.sdk.android:alibc_trade_common:3.1.1.107'  
    compile 'com.alibaba.sdk.android:alibc_trade_biz:3.1.1.107'  
    compile 'com.alibaba.sdk.android:alibc_trade_sdk:3.1.1.107'  
    }
  • 5.根据电商SDK文档写5+ plugin

这部分内容建议新手看视频教程加深理解。

注意:AndroidManifest.xml文件下manifest=>package包名字段是应用的唯一识别码、在生成keystore文件以及安全图片后,如果更换了包名上述流程1-3需要重新进行。

视频教程

html5+ App开发之 Android 平台离线集成 5+ SDK

代码地址

AlibcSDKApplication

继续阅读 »

文档

使用说明

  • 1.生成证书文件 release.keystore;(Android Studio Build目录下的Generate Signed Apk)
  • 2.使用证书打包生成apk文件; (app模块下signingConfigs字段配置,需要和证书打包时候对应)
  • 3.将apk上传到阿里百川管理后台获取安全图片yw_1222.png.
  • 4.集成电商sdk

    dependencies {  
    // fastjson  
    compile 'com.alibaba:fastjson:1.2.9'  
    
    // 支付  
    compile 'com.alibaba.alipay:alipaySingle:20160825@jar'  
    
    // 登陆  
    compile 'com.ali.auth.sdk:alibabauth_core:1.1.4@jar'  
    compile 'com.ali.auth.sdk:alibabauth_ui:1.1.4@aar'  
    compile 'com.ali.auth.sdk:alibabauth_ext:1.1.4@jar'  
    //【可选】仅供特殊合作伙伴使用  
    // compile 'com.ali.auth.sdk:alibabauth_accountlink:1.1.4@jar'  
    
    // 安全基础  
    compile 'com.taobao.android:securityguardaar3:5.1.81@aar'  
    //【可选】安全高级,如使用了发放红包、优惠券高级功能,则必须引入  
    // compile 'com.taobao.android:securitybodyaar3:5.1.25@aar'  
    
    // Mtop网关  
    compile 'com.taobao.android:mtopsdk_allinone_open:1.2.2.4@jar'  
    
    // applink  
    compile 'com.alibaba.sdk.android:alibc_link_partner:1.1.0.0'  
    
    // UT  
    compile 'com.taobao.android:utdid4all:1.1.5.3_proguard@jar'  
    compile 'com.alibaba.mtl:app-monitor-sdk:2.5.1.3_for_bc_proguard@jar'  
    
    // 电商SDK  
    compile 'com.alibaba.sdk.android:alibc_trade_common:3.1.1.107'  
    compile 'com.alibaba.sdk.android:alibc_trade_biz:3.1.1.107'  
    compile 'com.alibaba.sdk.android:alibc_trade_sdk:3.1.1.107'  
    }
  • 5.根据电商SDK文档写5+ plugin

这部分内容建议新手看视频教程加深理解。

注意:AndroidManifest.xml文件下manifest=>package包名字段是应用的唯一识别码、在生成keystore文件以及安全图片后,如果更换了包名上述流程1-3需要重新进行。

视频教程

html5+ App开发之 Android 平台离线集成 5+ SDK

代码地址

AlibcSDKApplication

收起阅读 »

5+ SDK 踏坑记录(一)

踩坑背景:原有android项目为android studio开发,现在需要集成 5+ SDK,选择以SDK_WebApp方式集成
遇到问题:集成后发现plus.nativeUI.showWaiting()不显示
解决:公司原来申请过微信支付功能,为了缩短开发时间,我将现有项目的包名更改为已经开通了微信支付的其他app的包名,更改方式如下


再配合修改微信支付的“应用签名”,“应用签名”生效后则此项目已经可以进行微信支付的开发了。各位注意了!!!原项目中AndroidManifest.xml
内package="com.xxx" 的值必须和builde.gradle中的applicationId一致
,不然使用5+ SDK时会出现莫名其妙的问题

继续阅读 »

踩坑背景:原有android项目为android studio开发,现在需要集成 5+ SDK,选择以SDK_WebApp方式集成
遇到问题:集成后发现plus.nativeUI.showWaiting()不显示
解决:公司原来申请过微信支付功能,为了缩短开发时间,我将现有项目的包名更改为已经开通了微信支付的其他app的包名,更改方式如下


再配合修改微信支付的“应用签名”,“应用签名”生效后则此项目已经可以进行微信支付的开发了。各位注意了!!!原项目中AndroidManifest.xml
内package="com.xxx" 的值必须和builde.gradle中的applicationId一致
,不然使用5+ SDK时会出现莫名其妙的问题

收起阅读 »

android打包bulid apk时报错:Multiple dex files define

App离线打包

android打包bulid apk时报错:Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompat$AccessibilityServiceInfoVersionImpl;

问题出在重复引用,经安卓同学指点,搜一下哪个jar包中有以上重复的东西,发现pdr,jar中有v4的文件夹,与android-support-v4.jar中内容重复。

于是在build.gradle中删掉compile files('libs/android-support-v4.jar'),去除引用,,再次bulid还不行。
于是干脆在libs文件夹中把android-support-v4.jar直接删掉了。
此时不再报错,bulid apk成功。

继续阅读 »

android打包bulid apk时报错:Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompat$AccessibilityServiceInfoVersionImpl;

问题出在重复引用,经安卓同学指点,搜一下哪个jar包中有以上重复的东西,发现pdr,jar中有v4的文件夹,与android-support-v4.jar中内容重复。

于是在build.gradle中删掉compile files('libs/android-support-v4.jar'),去除引用,,再次bulid还不行。
于是干脆在libs文件夹中把android-support-v4.jar直接删掉了。
此时不再报错,bulid apk成功。

收起阅读 »

微信支付踏坑之旅

微信支付

其实微信支付的集成步骤也就那么几步,奈何第一次接触无论是微信官方文档还是5+SDK文档都看的晕头转向,于是我换个思路
(以下只针对android app支付功能,服务端为java)

1、首选确定app已经开通支付功能,确保 包名、应用签名、appid、mchid、apikey
(包名、应用签名、appid 在https://open.weixin.qq.com/中查看;mchid、apikey 在https://pay.weixin.qq.com/中获得;关于应用签名和包名可查看https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=8_5,里面提供验证包名和应用签名匹配的apk,应用签名可修改,但不会立即生效)

2、下载http://pan.baidu.com/s/1slI29aP的工程,将工程中的包名换成你自己的,将Constants.java中的信息补充完成并打包签名成apk,安装在android手机中查看是否能正常调用微信的支付功能,不能正常调起微信支付说明你1中的信息不正确

3、在https://github.com/wxpay/WXPay-SDK-Java下载封装包(微信官方提供,分别有php、c、node.js、java、Python,本例以java为例)引入到服务端,代码如下

            MyConfig config = new MyConfig();  
        WXPay wxpay = new WXPay(config);  
        Map<String, String> data = new HashMap<String, String>();  
        data.put("body", body);  
        data.put("out_trade_no", outTradNo);  
        data.put("total_fee", totalFee);  
        data.put("trade_type", "APP");  
        data.put("spbill_create_ip", clientIp);  
        data.put("notify_url", "http://192.168.1.101/login.html");  
        Map<String, String> resp = wxpay.unifiedOrder(data);  

        Map<String, String> app = new HashMap<>();  
        app.put("appid", MyConfig.APP_ID);  
        app.put("partnerid", MyConfig.MCH_ID);  
        app.put("prepayid", resp.get("prepay_id"));  
        app.put("noncestr", WXPayUtil.generateNonceStr());  
        app.put("timestamp", String.valueOf(System.currentTimeMillis()/1000));  
        app.put("package", "Sign=WXPay");  
        String sign = WXPayUtil.generateSignature(app, MyConfig.API_KEY);  
        app.put("sign", sign);  
            return app;

使用HBuilder需要使用自己的签名打包安装才能看到效果,在调试状态下会报-100

继续阅读 »

其实微信支付的集成步骤也就那么几步,奈何第一次接触无论是微信官方文档还是5+SDK文档都看的晕头转向,于是我换个思路
(以下只针对android app支付功能,服务端为java)

1、首选确定app已经开通支付功能,确保 包名、应用签名、appid、mchid、apikey
(包名、应用签名、appid 在https://open.weixin.qq.com/中查看;mchid、apikey 在https://pay.weixin.qq.com/中获得;关于应用签名和包名可查看https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=8_5,里面提供验证包名和应用签名匹配的apk,应用签名可修改,但不会立即生效)

2、下载http://pan.baidu.com/s/1slI29aP的工程,将工程中的包名换成你自己的,将Constants.java中的信息补充完成并打包签名成apk,安装在android手机中查看是否能正常调用微信的支付功能,不能正常调起微信支付说明你1中的信息不正确

3、在https://github.com/wxpay/WXPay-SDK-Java下载封装包(微信官方提供,分别有php、c、node.js、java、Python,本例以java为例)引入到服务端,代码如下

            MyConfig config = new MyConfig();  
        WXPay wxpay = new WXPay(config);  
        Map<String, String> data = new HashMap<String, String>();  
        data.put("body", body);  
        data.put("out_trade_no", outTradNo);  
        data.put("total_fee", totalFee);  
        data.put("trade_type", "APP");  
        data.put("spbill_create_ip", clientIp);  
        data.put("notify_url", "http://192.168.1.101/login.html");  
        Map<String, String> resp = wxpay.unifiedOrder(data);  

        Map<String, String> app = new HashMap<>();  
        app.put("appid", MyConfig.APP_ID);  
        app.put("partnerid", MyConfig.MCH_ID);  
        app.put("prepayid", resp.get("prepay_id"));  
        app.put("noncestr", WXPayUtil.generateNonceStr());  
        app.put("timestamp", String.valueOf(System.currentTimeMillis()/1000));  
        app.put("package", "Sign=WXPay");  
        String sign = WXPayUtil.generateSignature(app, MyConfig.API_KEY);  
        app.put("sign", sign);  
            return app;

使用HBuilder需要使用自己的签名打包安装才能看到效果,在调试状态下会报-100

收起阅读 »

【分享】触摸返回值 相关变量touches,targetTouches和changedTouches的区别

事件

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前事件的触摸点的列表
通过一个例子来区分一下触摸事件中的这三个属性:
用一个手指接触屏幕,触发事件,此时这三个属性有相同的值。
用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值。当两个手指触摸相同元素时,targetTouches和touches的值相同,否则targetTouches 只有一个值。changedTouches此时只有一个值,为第二个手指的触摸点。
用两个手指同时接触屏幕,此时changedTouches有两个值,每一个手指的触摸点都有一个值
手指滑动时,三个值都会发生变化
一个手指离开屏幕,touches和targetTouches中对应的元素会同时移除,而changedTouches仍然会存在元素。
手指都离开屏幕之后,touches和targetTouches中将不会再有值,changedTouches还会有一个值,此值为最后一个离开屏幕的手指的接触点。

继续阅读 »

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前事件的触摸点的列表
通过一个例子来区分一下触摸事件中的这三个属性:
用一个手指接触屏幕,触发事件,此时这三个属性有相同的值。
用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值。当两个手指触摸相同元素时,targetTouches和touches的值相同,否则targetTouches 只有一个值。changedTouches此时只有一个值,为第二个手指的触摸点。
用两个手指同时接触屏幕,此时changedTouches有两个值,每一个手指的触摸点都有一个值
手指滑动时,三个值都会发生变化
一个手指离开屏幕,touches和targetTouches中对应的元素会同时移除,而changedTouches仍然会存在元素。
手指都离开屏幕之后,touches和targetTouches中将不会再有值,changedTouches还会有一个值,此值为最后一个离开屏幕的手指的接触点。

收起阅读 »

原生 hbuilder 插件开发,各种js 调用 回调

插件开发

原生 hbuilder 插件开发,各种js 调用 回调

如有需求可以联系511308538

原生 hbuilder 插件开发,各种js 调用 回调

如有需求可以联系511308538

chrom调试器打开空白,不能调试模拟器手机软件

改一下hosts试一试

74.125.25.141 chrome-devtools-frontend.appspot.com

改一下hosts试一试

74.125.25.141 chrome-devtools-frontend.appspot.com

上传图片功能(包含,可多个容器,可修改图片,重新上传等)

/**  
 * 上传图片插件  
 * varstion 1.0.0  
 * by Allen-Fei  
 * tipefi@126.com  
 * 参数列表:  
 * el——图片容器(建议用class,可用于多个)  
 * closeId——图片容器里的关闭按钮  
 * bg——用于判断容器内是否存在图片  
 * submitId——提交按钮ID  
 * size——上传图片的文件大小  
 * url——上传图片的服务器API  
 * addData——上传图片时需要附带的其他参数(比如token)  
 * success——上传成功的回调  
 * error——上传失败的回调  
 * 流程:  
 * 先选择图片到图片容器(添加的图片会填充为容器背景),再点提交按钮提交到服务器  
 * 用法:  
 * var upLoader = new UpLoader(); // 先new出来  
 * upLoader.init({}) // 再调用init初始化,传入相应参数  
 * 基于zepto或jq、mui------仅限手机端  
 */  
!function(window, undefined) {  
    var layer = '<div id="selectLayer" class="mui-popover mui-popover-bottom mui-popover-action ">'  
    layer += '<ul class="mui-table-view" id="imgLayer">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>拍照</span>'  
    layer += '</li>'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>从相册选择</span>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '<ul class="mui-table-view">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<a href="#selectLayer"><b>取消</b></a>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '</div>'  
    var $this = null,  
        tapInt = 0;  
    var UpLoader = window.UpLoader = function() {  
        this.imgUrl = []; //存放待上传的图片  
        this.zoomLevel = 0; //放大状态  
        this.zoomLeft = 0; //图片移动的暂存数据(左边位置)  
        this.zoomTop = 0; //图片移动的暂存数据(顶部位置)  
        this.o = {}; //存放传过来的参数  
        this.index = 0; //当前操作的索引值  
        this.m = 2; //放大倍数  
        this.$imgBox = null; //浏览图片的外框Dom  
    }  

    UpLoader.prototype.init = function(option) {  
        var that = this;  
        that.o = option;  
        //点击图标上传事件  
        $("body").on("tap", that.o.el, function() {  
            $this = $(this);  
            that.index = $(that.o.el).index($this);  
            if($this.hasClass(that.o.bg)) {  
                that.browseImg();  
                return false;  
            } else {  
                if($("#selectLayer").size() <= 0) {  
                    $("body").append(layer);  

                }  
            }  
            mui('#selectLayer').popover('toggle');  
        })  
        //选择方式事件  
        $("body").on("tap", "#imgLayer li", function() {  
            var i = $(this).parent().children().index(this)  
            switch(i) {  
                case 0:  
                    that.getImages();  
                    break;  
                case 1:  
                    that.getPhoto();  
                    break;  
                default:  
                    break;  
            }  
            mui('#selectLayer').popover('hide');  
        })  
        //移除图片事件  
        $("body").on("tap", that.o.closeId, function() {  
            that.index = $(that.o.closeId).index(this);  
            that.removeImg($(this));  
        })  
        //单击退出浏览事件  
        $("body").on("tap", "#imgBox", function(event) {  
            var _this = $(this);  
            tapInt = 0;  
            if(!tapInt) {  
                setTimeout(function() {  
                    if(tapInt == 0) {  
                        _this.remove();  
                        tapInt = 0  
                    }  
                }, 500)  
            }  
        })  
        //双击放大事件  
        $("body").on("doubletap", "#imgBox", function() {  
            var _this = $(this);  
            if(that.zoomLevel) {  
                that.zoomOut()  
            } else {  
                that.zoomIn()  
            }  
            tapInt = 2;  
        })  

        //拖动中事件  
        $("body").on("drag", "#imgBox img", function(e) {  
            if(that.zoomLeft == 0) return false;  
            $("#imgBox").children("img").css({  
                "margin-left": that.zoomLeft + event.detail.deltaX + "px",  
                "margin-top": that.zoomTop + event.detail.deltaY + "px"  
            })  
        })  
        //拖动结束  
        $("body").on("dragend", "#imgBox img", function(e) {  
            if(that.zoomLeft == 0) return false;  
            that.zoomLeft += event.detail.deltaX; //要在拖动结束后保存位置  
            that.zoomTop += event.detail.deltaY;  
        })  
        //提交事件  
        $("body").on("tap", that.o.submitId, function() {  
            that.imgSubmit();  
        })  
    }  

    //拍照获取图片  
    UpLoader.prototype.getImages = function() {  
        var that = this;  
        var cmr = plus.camera.getCamera();  
        cmr.captureImage(function(p) {  
                plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                    //转化本地绝对路径  
                    that.displayImg(entry.fullPath);  
                });  
            }, function(error) {  
                console.log("---" + "捕获图像失败: " + error.message);  
            }, {} //建议使用系统匹配路径  
        );  
    }  

    //从相册获取图片  
    UpLoader.prototype.getPhoto = function() {  
        var that = this;  
        plus.gallery.pick(function(path) {  
            that.displayImg(path);  
        }, function(error) {  
            console.log("---" + "捕获图像失败: " + error.message);  
        })  
    }  

    //填充图片  
    UpLoader.prototype.displayImg = function(p) {  
        var that = this;  
        that.rotateImg(p)  
    }  

    //处理旋转,iOS上坚向照片填充时会自动逆时钟旋转90,故用压缩方法旋转0度  
    UpLoader.prototype.rotateImg = function(p) {  
        var that = this;  
        if(p.indexOf('http') < 0) {  
            ~p.indexOf("file:") ? p : p = "file:///" + p;  
            plus.zip.compressImage({  
                src: p,  
                dst: p,  
                overwrite: true,  
                rotate: 0 // 不管有没有被旋转,统一旋转0度  
            }, function() {  
                that.imgUrl[that.index] = p;  
                $this.addClass(that.o.bg).css({  
                    "background-image": "url(" + p + ")"  
                })  
            }, function(error) {  
                mui.toast("图片旋转时发生错误!");  
            });  
        } else {  
            var index = that.imgUrl.indexOf(p);  
            $(that.o.el).eq(index).addClass(that.o.bg).css({  
                "background-image": "url(" + p + ")"  
            })  
        }  

    }  

    //移除图片  
    UpLoader.prototype.removeImg = function(_this) {  
        var that = this;  
        that.imgUrl[that.index] = "";  
        _this.next(that.o.el).removeClass(that.o.bg).removeAttr("style");  
    }  

    //放大追加图片浏览DOM  
    UpLoader.prototype.browseImg = function(index) {  
        $("body").append('<div id="imgBox"></div>');  
        var that = this;  
        that.$imgBox = $("#imgBox");  
        that.$imgBox.css({  
            "position": "absolute",  
            "top": 0,  
            "left": 0,  
            "width": "100%",  
            "height": "100%",  
            "background": "#000",  
            "z-index": 9999,  
            "overflow": "hidden;"  
        }).append('<img>').children("img").attr("src", that.imgUrl[that.index]).css("width", "100%");  
        that.zoomLeft = 0;  
        that.zoomTop = (window.screen.height - 20 - that.$imgBox.children("img").height()) / 2;  
        that.upImgPostion();  
    }  

    //更新图片显示位置  
    UpLoader.prototype.upImgPostion = function(type) {  
        var that = this;  
        var imgH = that.$imgBox.children("img").height();  
        var imgW = that.$imgBox.children("img").width();  
        var winH = window.screen.height - 20;  
        var winW = window.screen.width;  
        if(imgH < winH) {  
            that.$imgBox.children("img").css({  
                "margin-top": (winH - imgH) / 2 + "px"  
            })  
        }  
        if(type == "in") {  
            that.$imgBox.children("img").css({  
                "margin-left": (that.zoomLeft - imgW / that.m / that.m) + "px",  
                "margin-top": (that.zoomTop - imgH / that.m / that.m) + "px"  
            })  
            that.zoomLeft = that.zoomLeft - imgW / that.m / that.m;  
            that.zoomTop = that.zoomTop - imgH / that.m / that.m;  
        }  
        if(type == "out") {  
            that.$imgBox.children("img").css({  
                "margin-left": "0px",  
                "margin-top": (winH - imgH) / 2 + "px"  
            })  
            that.zoomLeft = 0;  
            that.zoomTop = (winH - imgH) / 2;  
        }  
    }  

    //图片放大   
    UpLoader.prototype.zoomIn = function() {  
        var that = this;  
        that.$imgBox.children("img").width(that.$imgBox.children("img").width() * that.m); //不要设置高度,因为高度是随宽度变化的  
        that.zoomLevel = 1;  
        that.upImgPostion("in");  
    }  

    //图片缩小  
    UpLoader.prototype.zoomOut = function() {  
        var that = this;  
        that.$imgBox.children("img").width(that.$imgBox.children("img").width() / that.m);  
        that.zoomLevel = 0;  
        that.upImgPostion("out");  
    }  

    //添加数据  
    UpLoader.prototype.addData = function(obj) {  
        this.data = obj;  
    }  

    //添加图片  
    UpLoader.prototype.addImg = function(arr) {  
        if(arr instanceof Array) {  
            for(var i = 0; i < arr.length; i++) {  
                this.imgUrl.push(arr[i]);  
                this.displayImg(arr[i])  
            }  
        } else {  
            this.displayImg(arr)  
        }  
    }  

    //提交图片  
    UpLoader.prototype.imgSubmit = function() {  
        var that = this;  
        that.data = that.o.addData instanceof Function ? that.o.addData() : '';  
        if(that.data === false) return false;  
        var task = plus.uploader.createUpload(that.o.url, {  
            method: "POST",  
            blocksize: that.o.size,  
            priority: 100  
        }, function(t, status) {  
            // 上传完成  
            if(status == 200) {  
                that.o.success(t, status);  
            } else {  
                that.o.error(t, status);  
            }  
        })  
        for(var i = 0; i < that.imgUrl.length; i++) {  
            if(that.imgUrl[i]) { //遍历图片数组,去除空的值  
                task.addFile(that.imgUrl[i], {  
                    key: "img" + i  
                });  
            }  
        }  

        if(JSON.stringify(that.data) != "{}" || !JSON.stringify(that.data)) {  
            for(var key in that.data) {  
                task.addData(key, that.data[key]);  
            }  

        }  

        task.start();  
    }  

}(window)
继续阅读 »
/**  
 * 上传图片插件  
 * varstion 1.0.0  
 * by Allen-Fei  
 * tipefi@126.com  
 * 参数列表:  
 * el——图片容器(建议用class,可用于多个)  
 * closeId——图片容器里的关闭按钮  
 * bg——用于判断容器内是否存在图片  
 * submitId——提交按钮ID  
 * size——上传图片的文件大小  
 * url——上传图片的服务器API  
 * addData——上传图片时需要附带的其他参数(比如token)  
 * success——上传成功的回调  
 * error——上传失败的回调  
 * 流程:  
 * 先选择图片到图片容器(添加的图片会填充为容器背景),再点提交按钮提交到服务器  
 * 用法:  
 * var upLoader = new UpLoader(); // 先new出来  
 * upLoader.init({}) // 再调用init初始化,传入相应参数  
 * 基于zepto或jq、mui------仅限手机端  
 */  
!function(window, undefined) {  
    var layer = '<div id="selectLayer" class="mui-popover mui-popover-bottom mui-popover-action ">'  
    layer += '<ul class="mui-table-view" id="imgLayer">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>拍照</span>'  
    layer += '</li>'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>从相册选择</span>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '<ul class="mui-table-view">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<a href="#selectLayer"><b>取消</b></a>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '</div>'  
    var $this = null,  
        tapInt = 0;  
    var UpLoader = window.UpLoader = function() {  
        this.imgUrl = []; //存放待上传的图片  
        this.zoomLevel = 0; //放大状态  
        this.zoomLeft = 0; //图片移动的暂存数据(左边位置)  
        this.zoomTop = 0; //图片移动的暂存数据(顶部位置)  
        this.o = {}; //存放传过来的参数  
        this.index = 0; //当前操作的索引值  
        this.m = 2; //放大倍数  
        this.$imgBox = null; //浏览图片的外框Dom  
    }  

    UpLoader.prototype.init = function(option) {  
        var that = this;  
        that.o = option;  
        //点击图标上传事件  
        $("body").on("tap", that.o.el, function() {  
            $this = $(this);  
            that.index = $(that.o.el).index($this);  
            if($this.hasClass(that.o.bg)) {  
                that.browseImg();  
                return false;  
            } else {  
                if($("#selectLayer").size() <= 0) {  
                    $("body").append(layer);  

                }  
            }  
            mui('#selectLayer').popover('toggle');  
        })  
        //选择方式事件  
        $("body").on("tap", "#imgLayer li", function() {  
            var i = $(this).parent().children().index(this)  
            switch(i) {  
                case 0:  
                    that.getImages();  
                    break;  
                case 1:  
                    that.getPhoto();  
                    break;  
                default:  
                    break;  
            }  
            mui('#selectLayer').popover('hide');  
        })  
        //移除图片事件  
        $("body").on("tap", that.o.closeId, function() {  
            that.index = $(that.o.closeId).index(this);  
            that.removeImg($(this));  
        })  
        //单击退出浏览事件  
        $("body").on("tap", "#imgBox", function(event) {  
            var _this = $(this);  
            tapInt = 0;  
            if(!tapInt) {  
                setTimeout(function() {  
                    if(tapInt == 0) {  
                        _this.remove();  
                        tapInt = 0  
                    }  
                }, 500)  
            }  
        })  
        //双击放大事件  
        $("body").on("doubletap", "#imgBox", function() {  
            var _this = $(this);  
            if(that.zoomLevel) {  
                that.zoomOut()  
            } else {  
                that.zoomIn()  
            }  
            tapInt = 2;  
        })  

        //拖动中事件  
        $("body").on("drag", "#imgBox img", function(e) {  
            if(that.zoomLeft == 0) return false;  
            $("#imgBox").children("img").css({  
                "margin-left": that.zoomLeft + event.detail.deltaX + "px",  
                "margin-top": that.zoomTop + event.detail.deltaY + "px"  
            })  
        })  
        //拖动结束  
        $("body").on("dragend", "#imgBox img", function(e) {  
            if(that.zoomLeft == 0) return false;  
            that.zoomLeft += event.detail.deltaX; //要在拖动结束后保存位置  
            that.zoomTop += event.detail.deltaY;  
        })  
        //提交事件  
        $("body").on("tap", that.o.submitId, function() {  
            that.imgSubmit();  
        })  
    }  

    //拍照获取图片  
    UpLoader.prototype.getImages = function() {  
        var that = this;  
        var cmr = plus.camera.getCamera();  
        cmr.captureImage(function(p) {  
                plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                    //转化本地绝对路径  
                    that.displayImg(entry.fullPath);  
                });  
            }, function(error) {  
                console.log("---" + "捕获图像失败: " + error.message);  
            }, {} //建议使用系统匹配路径  
        );  
    }  

    //从相册获取图片  
    UpLoader.prototype.getPhoto = function() {  
        var that = this;  
        plus.gallery.pick(function(path) {  
            that.displayImg(path);  
        }, function(error) {  
            console.log("---" + "捕获图像失败: " + error.message);  
        })  
    }  

    //填充图片  
    UpLoader.prototype.displayImg = function(p) {  
        var that = this;  
        that.rotateImg(p)  
    }  

    //处理旋转,iOS上坚向照片填充时会自动逆时钟旋转90,故用压缩方法旋转0度  
    UpLoader.prototype.rotateImg = function(p) {  
        var that = this;  
        if(p.indexOf('http') < 0) {  
            ~p.indexOf("file:") ? p : p = "file:///" + p;  
            plus.zip.compressImage({  
                src: p,  
                dst: p,  
                overwrite: true,  
                rotate: 0 // 不管有没有被旋转,统一旋转0度  
            }, function() {  
                that.imgUrl[that.index] = p;  
                $this.addClass(that.o.bg).css({  
                    "background-image": "url(" + p + ")"  
                })  
            }, function(error) {  
                mui.toast("图片旋转时发生错误!");  
            });  
        } else {  
            var index = that.imgUrl.indexOf(p);  
            $(that.o.el).eq(index).addClass(that.o.bg).css({  
                "background-image": "url(" + p + ")"  
            })  
        }  

    }  

    //移除图片  
    UpLoader.prototype.removeImg = function(_this) {  
        var that = this;  
        that.imgUrl[that.index] = "";  
        _this.next(that.o.el).removeClass(that.o.bg).removeAttr("style");  
    }  

    //放大追加图片浏览DOM  
    UpLoader.prototype.browseImg = function(index) {  
        $("body").append('<div id="imgBox"></div>');  
        var that = this;  
        that.$imgBox = $("#imgBox");  
        that.$imgBox.css({  
            "position": "absolute",  
            "top": 0,  
            "left": 0,  
            "width": "100%",  
            "height": "100%",  
            "background": "#000",  
            "z-index": 9999,  
            "overflow": "hidden;"  
        }).append('<img>').children("img").attr("src", that.imgUrl[that.index]).css("width", "100%");  
        that.zoomLeft = 0;  
        that.zoomTop = (window.screen.height - 20 - that.$imgBox.children("img").height()) / 2;  
        that.upImgPostion();  
    }  

    //更新图片显示位置  
    UpLoader.prototype.upImgPostion = function(type) {  
        var that = this;  
        var imgH = that.$imgBox.children("img").height();  
        var imgW = that.$imgBox.children("img").width();  
        var winH = window.screen.height - 20;  
        var winW = window.screen.width;  
        if(imgH < winH) {  
            that.$imgBox.children("img").css({  
                "margin-top": (winH - imgH) / 2 + "px"  
            })  
        }  
        if(type == "in") {  
            that.$imgBox.children("img").css({  
                "margin-left": (that.zoomLeft - imgW / that.m / that.m) + "px",  
                "margin-top": (that.zoomTop - imgH / that.m / that.m) + "px"  
            })  
            that.zoomLeft = that.zoomLeft - imgW / that.m / that.m;  
            that.zoomTop = that.zoomTop - imgH / that.m / that.m;  
        }  
        if(type == "out") {  
            that.$imgBox.children("img").css({  
                "margin-left": "0px",  
                "margin-top": (winH - imgH) / 2 + "px"  
            })  
            that.zoomLeft = 0;  
            that.zoomTop = (winH - imgH) / 2;  
        }  
    }  

    //图片放大   
    UpLoader.prototype.zoomIn = function() {  
        var that = this;  
        that.$imgBox.children("img").width(that.$imgBox.children("img").width() * that.m); //不要设置高度,因为高度是随宽度变化的  
        that.zoomLevel = 1;  
        that.upImgPostion("in");  
    }  

    //图片缩小  
    UpLoader.prototype.zoomOut = function() {  
        var that = this;  
        that.$imgBox.children("img").width(that.$imgBox.children("img").width() / that.m);  
        that.zoomLevel = 0;  
        that.upImgPostion("out");  
    }  

    //添加数据  
    UpLoader.prototype.addData = function(obj) {  
        this.data = obj;  
    }  

    //添加图片  
    UpLoader.prototype.addImg = function(arr) {  
        if(arr instanceof Array) {  
            for(var i = 0; i < arr.length; i++) {  
                this.imgUrl.push(arr[i]);  
                this.displayImg(arr[i])  
            }  
        } else {  
            this.displayImg(arr)  
        }  
    }  

    //提交图片  
    UpLoader.prototype.imgSubmit = function() {  
        var that = this;  
        that.data = that.o.addData instanceof Function ? that.o.addData() : '';  
        if(that.data === false) return false;  
        var task = plus.uploader.createUpload(that.o.url, {  
            method: "POST",  
            blocksize: that.o.size,  
            priority: 100  
        }, function(t, status) {  
            // 上传完成  
            if(status == 200) {  
                that.o.success(t, status);  
            } else {  
                that.o.error(t, status);  
            }  
        })  
        for(var i = 0; i < that.imgUrl.length; i++) {  
            if(that.imgUrl[i]) { //遍历图片数组,去除空的值  
                task.addFile(that.imgUrl[i], {  
                    key: "img" + i  
                });  
            }  
        }  

        if(JSON.stringify(that.data) != "{}" || !JSON.stringify(that.data)) {  
            for(var key in that.data) {  
                task.addData(key, that.data[key]);  
            }  

        }  

        task.start();  
    }  

}(window)
收起阅读 »

【分享】获取图片地址插件(新增返回base64)

图片
/**  
 * 获取图片地址  
 * varstion 1.0.2  
 * by Allen-Fei  
 * tipefi@126.com  
 * 参数列表:  
 * success(picUrl, base64)——图片地址获取成功的回调,返回图片地址及base64  
 * 基于zepto或jq、mui------仅限手机端  
 */  
(function(window, undefind) {  
    var layer = '<div id="selectLayer" class="mui-popover mui-popover-bottom mui-popover-action ">'  
    layer += '<ul class="mui-table-view" id="imgLayer">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>拍照</span>'  
    layer += '</li>'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>从相册选择</span>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '<ul class="mui-table-view">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<a href="#selectLayer" id="cancelos"><b>取消</b></a>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '</div>'  
    $("body").append(layer);  
    //选择方式事件  
    $("body").on("tap", "#imgLayer li", function() {  
        var i = $(this).parent().children().index(this)  
        if(i == 0) {  
            getImgURL.getImages();  
        }else{  
            getImgURL.getPhoto();  
        }  
        mui('#selectLayer').popover('hide');  
    })  

    $('body').on('tap', '#cancelos', function(){  
        evalID('my-proname.html',['closeDis']);  
    })  

    var getImgURL = window.getImgURL = {  
        init: function(option){ // 初始化方法  
            var that = this;  
            that.o = option;  
            mui('#selectLayer').popover('toggle');  

        },  
        getImages: function(){ // 拍照方法  
            var that = this;  
            var cmr = plus.camera.getCamera(); // 相机对象  
            cmr.captureImage(function(p) { // 拍照事件  
                    that.rotateImg(p);  
                }, function(error) {  
                    that.o.error(error);  
                    console.log("---" + "捕获图像失败: " + error.message);  
                }, {} //建议使用系统匹配路径  
            );  
        },  
        getPhoto: function(){ // 打开相册方法  
            var that = this;  
            plus.gallery.pick(function(path) { // 从系统相册选择图片  
                that.rotateImg(path);             
            }, function(error) {  
                that.o.error(error);  
                console.log("---" + "捕获图像失败: " + error.message);  
            })  
        },  
        rotateImg: function(p) { // 图片处理方法(包括旋转,因在IOS中会有图片读取时会自动旋转,导致读取后的文件不正确)  
            var that = this;  
            if(p.indexOf('http') < 0) {  
                plus.zip.compressImage({  
                    src: p,  
                    dst: p,  
                    overwrite: true,  
                    rotate: 0 // 不管有没有被旋转,统一旋转0度  
                }, function(e) {  
                    if(mui.os.ios){ // 此处IOS需做路径转换处理,在转换时利用文件对象再去转base64,而安卓则直接可以用路径去加载文件  
                        plus.io.resolveLocalFileSystemURL(e.target, function(entry){  
                            entry.file(function(path){  
                                console.log("P__" + JSON.stringify(path));  
                                that.getBase64(path, e.target);   
                            })  
                        });   
                    } else{  
                        that.getBase64(e.target, e.target);  
                    }  
                }, function(error) {  
                    that.o.error(error);  
                    console.log("图片旋转时发生错误!");  
                });  
            } else {  
                that.o.success(p); // 如遇http地址,则直接返回该地址;  
            }  

        },  
        getBase64: function(path, url){                     // 获取Base64  
            var that = this;  
            var reader = new plus.io.FileReader();          // 构建文件对象  
            reader.readAsDataURL(path);                     // 添加文件(此处安卓可以直接添加文件路径,而IOS则需要文件对象)  
            reader.onloadend = function (event) {           // 文件加载 完成后的事件回调  
                //console.log('event'+JSON.stringify(event));  
                that.o.success(url, event.target.result);   // 执行成功函数,统一把路径及base64传过去  
            };  
        }  

    }  

})(window)
继续阅读 »
/**  
 * 获取图片地址  
 * varstion 1.0.2  
 * by Allen-Fei  
 * tipefi@126.com  
 * 参数列表:  
 * success(picUrl, base64)——图片地址获取成功的回调,返回图片地址及base64  
 * 基于zepto或jq、mui------仅限手机端  
 */  
(function(window, undefind) {  
    var layer = '<div id="selectLayer" class="mui-popover mui-popover-bottom mui-popover-action ">'  
    layer += '<ul class="mui-table-view" id="imgLayer">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>拍照</span>'  
    layer += '</li>'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>从相册选择</span>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '<ul class="mui-table-view">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<a href="#selectLayer" id="cancelos"><b>取消</b></a>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '</div>'  
    $("body").append(layer);  
    //选择方式事件  
    $("body").on("tap", "#imgLayer li", function() {  
        var i = $(this).parent().children().index(this)  
        if(i == 0) {  
            getImgURL.getImages();  
        }else{  
            getImgURL.getPhoto();  
        }  
        mui('#selectLayer').popover('hide');  
    })  

    $('body').on('tap', '#cancelos', function(){  
        evalID('my-proname.html',['closeDis']);  
    })  

    var getImgURL = window.getImgURL = {  
        init: function(option){ // 初始化方法  
            var that = this;  
            that.o = option;  
            mui('#selectLayer').popover('toggle');  

        },  
        getImages: function(){ // 拍照方法  
            var that = this;  
            var cmr = plus.camera.getCamera(); // 相机对象  
            cmr.captureImage(function(p) { // 拍照事件  
                    that.rotateImg(p);  
                }, function(error) {  
                    that.o.error(error);  
                    console.log("---" + "捕获图像失败: " + error.message);  
                }, {} //建议使用系统匹配路径  
            );  
        },  
        getPhoto: function(){ // 打开相册方法  
            var that = this;  
            plus.gallery.pick(function(path) { // 从系统相册选择图片  
                that.rotateImg(path);             
            }, function(error) {  
                that.o.error(error);  
                console.log("---" + "捕获图像失败: " + error.message);  
            })  
        },  
        rotateImg: function(p) { // 图片处理方法(包括旋转,因在IOS中会有图片读取时会自动旋转,导致读取后的文件不正确)  
            var that = this;  
            if(p.indexOf('http') < 0) {  
                plus.zip.compressImage({  
                    src: p,  
                    dst: p,  
                    overwrite: true,  
                    rotate: 0 // 不管有没有被旋转,统一旋转0度  
                }, function(e) {  
                    if(mui.os.ios){ // 此处IOS需做路径转换处理,在转换时利用文件对象再去转base64,而安卓则直接可以用路径去加载文件  
                        plus.io.resolveLocalFileSystemURL(e.target, function(entry){  
                            entry.file(function(path){  
                                console.log("P__" + JSON.stringify(path));  
                                that.getBase64(path, e.target);   
                            })  
                        });   
                    } else{  
                        that.getBase64(e.target, e.target);  
                    }  
                }, function(error) {  
                    that.o.error(error);  
                    console.log("图片旋转时发生错误!");  
                });  
            } else {  
                that.o.success(p); // 如遇http地址,则直接返回该地址;  
            }  

        },  
        getBase64: function(path, url){                     // 获取Base64  
            var that = this;  
            var reader = new plus.io.FileReader();          // 构建文件对象  
            reader.readAsDataURL(path);                     // 添加文件(此处安卓可以直接添加文件路径,而IOS则需要文件对象)  
            reader.onloadend = function (event) {           // 文件加载 完成后的事件回调  
                //console.log('event'+JSON.stringify(event));  
                that.o.success(url, event.target.result);   // 执行成功函数,统一把路径及base64传过去  
            };  
        }  

    }  

})(window)
收起阅读 »

【讲座】html5+ App开发之 Android 平台离线集成 5+ SDK

技术分享

内容简介:

html5+ App开发过程中有时候会遇到一些功能,单纯通过 html5 或者 5+ 规范无法满足要求,比如自定义相机这种定制性较强的功能,这时候不得不借助第三方库或者原生插件来完成,本次讲座主要面向的就是需要定制性开发的朋友。

本次讲座的主要内容:

简单介绍 Android 开发环境
html5+ SDK 两种集成方式实例讲解
浅析 Android 原生 和 JavaScript 交互原理
Native.js 实例讲解
html5+ 插件开发实例详解
本节课时长80分钟左右。

面向人群:

想学习原生开发的前端开发朋友
想快速集成 5+ sdk 的原生开发朋友

报名地址:https://segmentfault.com/l/1500000010042078?r=bPqXdU

上次参与讲座的或者有兴趣但是经济有限的朋友(如学生),可以私聊我获取半价券!!!

继续阅读 »

内容简介:

html5+ App开发过程中有时候会遇到一些功能,单纯通过 html5 或者 5+ 规范无法满足要求,比如自定义相机这种定制性较强的功能,这时候不得不借助第三方库或者原生插件来完成,本次讲座主要面向的就是需要定制性开发的朋友。

本次讲座的主要内容:

简单介绍 Android 开发环境
html5+ SDK 两种集成方式实例讲解
浅析 Android 原生 和 JavaScript 交互原理
Native.js 实例讲解
html5+ 插件开发实例详解
本节课时长80分钟左右。

面向人群:

想学习原生开发的前端开发朋友
想快速集成 5+ sdk 的原生开发朋友

报名地址:https://segmentfault.com/l/1500000010042078?r=bPqXdU

上次参与讲座的或者有兴趣但是经济有限的朋友(如学生),可以私聊我获取半价券!!!

收起阅读 »