
整合上拉加载下拉刷新插件
用法
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拓展

文档
- 百川官方集成文档:http://baichuan.taobao.com/
- Android平台第三方插件开发指导:http://ask.dcloud.net.cn/article/66
- html5+ SDK Android API:http://www.dcloud.io/docs/sdk/android/
使用说明
- 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
代码地址
文档
- 百川官方集成文档:http://baichuan.taobao.com/
- Android平台第三方插件开发指导:http://ask.dcloud.net.cn/article/66
- html5+ SDK Android API:http://www.dcloud.io/docs/sdk/android/
使用说明
- 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
代码地址
收起阅读 »
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
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
上次参与讲座的或者有兴趣但是经济有限的朋友(如学生),可以私聊我获取半价券!!!
收起阅读 »