
HBuilder在夜神模拟器上实现真机运行(关于HBuilder检测不到模拟器问题)
HBuilder在使用Android模拟器进行真机调试时,经常会出现找不到模拟器情况,接下来要介绍的运行模拟器是“夜神模拟器”。
PS:笔者在使用“夜猫模拟器”前,使用过Google提供的模拟器进行连接,老是爱掉线,并且连接不上,在使用Genymotion模拟器连接时, HBuilder根本读不到模拟器,试着使用修改端口号的方式进行让HBuilder和Genymotion进行直连,也以失败而告终。
一、下载“夜神模拟器”,https://www.yeshen.com,安装比较简单,默认安装即可。
二、安装完成后,模拟器默认会以平板模式开启,如果需更改为手机模式,点击“设置”图标,选择“高级设置”,分辨率设置为“手机版”。点击“保存设置”,模拟器重启后即可。
三、HBuilder和模拟器端口连接设置,看附件图
1.win + r (Windows)输入cmd进入dos窗口,cd 到夜神模拟器的安装目录bin下, 如:cd D:\Program Files (x86)\Nox\bin
2.然后输入命令:nox_adb connect 127.0.0.1:62001 进行连接 ,接下来使用命令:nox_adb devices 查看连接信息。
3.切换目录到HBuilder的tools目录下:cd D:\HBuilder.7.5.0.windows\HBuilder\tools
4.输入命令:adb connect 127.0.0.1:62001
5.输入命令:adb devices 查看连接信息。
四、接下来,端口设置好后,再HBuilder中就可以直接运行了,点击运行已经创建好的移动APP吧!
HBuilder在使用Android模拟器进行真机调试时,经常会出现找不到模拟器情况,接下来要介绍的运行模拟器是“夜神模拟器”。
PS:笔者在使用“夜猫模拟器”前,使用过Google提供的模拟器进行连接,老是爱掉线,并且连接不上,在使用Genymotion模拟器连接时, HBuilder根本读不到模拟器,试着使用修改端口号的方式进行让HBuilder和Genymotion进行直连,也以失败而告终。
一、下载“夜神模拟器”,https://www.yeshen.com,安装比较简单,默认安装即可。
二、安装完成后,模拟器默认会以平板模式开启,如果需更改为手机模式,点击“设置”图标,选择“高级设置”,分辨率设置为“手机版”。点击“保存设置”,模拟器重启后即可。
三、HBuilder和模拟器端口连接设置,看附件图
1.win + r (Windows)输入cmd进入dos窗口,cd 到夜神模拟器的安装目录bin下, 如:cd D:\Program Files (x86)\Nox\bin
2.然后输入命令:nox_adb connect 127.0.0.1:62001 进行连接 ,接下来使用命令:nox_adb devices 查看连接信息。
3.切换目录到HBuilder的tools目录下:cd D:\HBuilder.7.5.0.windows\HBuilder\tools
4.输入命令:adb connect 127.0.0.1:62001
5.输入命令:adb devices 查看连接信息。
四、接下来,端口设置好后,再HBuilder中就可以直接运行了,点击运行已经创建好的移动APP吧!

Android 自有证书简单生成方法,不需要用官方的公用证书都可以
首先下载jdk文件,我下载的是这个:http://www.9553.com/soft/41470.htm , 如果已经有的话,可以跳过,下载安装好后,
文件bin/下有:keytool.exe 文件,此文件用于生成密钥,
打开命令cmd->如果不是C盘根目录,可以用输入 cd.. ,返回上一级到出现:C:\>
然后进去JDK 文件: C:\> cd C:\Program Files\Java\jdk1.6.0_43\bin 然后回车键,我的JDK安装在C盘Program Files下,如果你不是可以更改,
到打开:C:\Program Files\Java\jdk1.6.0_43\bin>
然后对下面代码修改下,
keytool -genkey -alias domekey -keyalg RSA -keysize 1024 -keypass pwd123456 -validity 3500 -keystore c:\key\dome.keystore
-alias 后面的 domekey 是密钥别名,可自己修改
-keypass 后面的 pwd123456 ,可自己修改
会生成密钥文件dome.keystore,存在 c:\key\dome.keystore ,如果你C盘没有key文件夹,要新建一个,不如会报错。
-validity 后面的 3500 ,是有效期,3500天,按天数算
然后填写好复制进去: C:\Program Files\Java\jdk1.6.0_43\bin>keytool -genkey -alias domekey -keyalg RSA -keysize 1024 -keypass pwd123456 -validity 3500 -keystore c:\key\dome.keystore
然后回车键,会提示你输入密码,这个密码是查询密码,跟密钥密码填一样的, 不一样,云打包不了,不知道为什么。
然后就是填写,

填好后,最后 填 Y 回车确认,就可以了,生成的dome.keystore,文件在C盘c:\key\下,
然后云打包,
选择安卓》自有证书
包名: 可以自己修改
证书别名: domekey,就是刚才你填写的密钥别名
密钥密码:pwd123456 ,就刚你填的密码
证书文件:c:\key\dome.keystore ,选择刚才你生成的文件,
然后提交云打包就可以了,可以打包成功, 安装正常使用。
首先下载jdk文件,我下载的是这个:http://www.9553.com/soft/41470.htm , 如果已经有的话,可以跳过,下载安装好后,
文件bin/下有:keytool.exe 文件,此文件用于生成密钥,
打开命令cmd->如果不是C盘根目录,可以用输入 cd.. ,返回上一级到出现:C:\>
然后进去JDK 文件: C:\> cd C:\Program Files\Java\jdk1.6.0_43\bin 然后回车键,我的JDK安装在C盘Program Files下,如果你不是可以更改,
到打开:C:\Program Files\Java\jdk1.6.0_43\bin>
然后对下面代码修改下,
keytool -genkey -alias domekey -keyalg RSA -keysize 1024 -keypass pwd123456 -validity 3500 -keystore c:\key\dome.keystore
-alias 后面的 domekey 是密钥别名,可自己修改
-keypass 后面的 pwd123456 ,可自己修改
会生成密钥文件dome.keystore,存在 c:\key\dome.keystore ,如果你C盘没有key文件夹,要新建一个,不如会报错。
-validity 后面的 3500 ,是有效期,3500天,按天数算
然后填写好复制进去: C:\Program Files\Java\jdk1.6.0_43\bin>keytool -genkey -alias domekey -keyalg RSA -keysize 1024 -keypass pwd123456 -validity 3500 -keystore c:\key\dome.keystore
然后回车键,会提示你输入密码,这个密码是查询密码,跟密钥密码填一样的, 不一样,云打包不了,不知道为什么。
然后就是填写,
填好后,最后 填 Y 回车确认,就可以了,生成的dome.keystore,文件在C盘c:\key\下,
然后云打包,
选择安卓》自有证书
包名: 可以自己修改
证书别名: domekey,就是刚才你填写的密钥别名
密钥密码:pwd123456 ,就刚你填的密码
证书文件:c:\key\dome.keystore ,选择刚才你生成的文件,
然后提交云打包就可以了,可以打包成功, 安装正常使用。
收起阅读 »
为什么选择MUI
为什么选择MUI
我用过phonegap,cordova,jquerymobile,也做过原生应用的开发,android和ios都略有接触,以我的个人感受来说一下为什么要选择MUI
为什么不用原生开发
优势
用户体验好。代码加密方便
劣势
开发周期长,针对不同操作系统需要做多套开发,成本也就相应提高,对于创业或者是小公司来说,不推荐。如果要考虑兼容性的话,光是切图和多个分辨率下的UI适配就能吐血。。。
我的观点
我认为如果是游戏类的应用,目前来说除了非常简单的网页游戏,否则还是推荐原生开发。毕竟以当前的浏览器渲染效果和机器性能,用h5实现复杂的游戏效果应该还是不怎么理想。
至于大部分的业务类应用,不管流程多么复杂,基本也就是增删改查四个操作的各种封装和展示,采用H5的开发基本可以满足要求。因此,非必要情况下,不建议采用原生开发。
那么多的WEBAPP框架,为什么选择MUI
为什么选择MUI
我用过phonegap,cordova,jquerymobile,也做过原生应用的开发,android和ios都略有接触,以我的个人感受来说一下为什么要选择MUI
为什么不用原生开发
优势
用户体验好。代码加密方便
劣势
开发周期长,针对不同操作系统需要做多套开发,成本也就相应提高,对于创业或者是小公司来说,不推荐。如果要考虑兼容性的话,光是切图和多个分辨率下的UI适配就能吐血。。。
我的观点
我认为如果是游戏类的应用,目前来说除了非常简单的网页游戏,否则还是推荐原生开发。毕竟以当前的浏览器渲染效果和机器性能,用h5实现复杂的游戏效果应该还是不怎么理想。
至于大部分的业务类应用,不管流程多么复杂,基本也就是增删改查四个操作的各种封装和展示,采用H5的开发基本可以满足要求。因此,非必要情况下,不建议采用原生开发。
那么多的WEBAPP框架,为什么选择MUI
收起阅读 »
解决点击input后会延时300ms启动软键盘
mui('body').on("tap",'.jsinput',function(){
this.focus();
});
mui('body').on("tap",'.jsinput',function(){
this.focus();
});

使用单webview下拉刷新时容易与日历组件冲突
比较揪心的解决方法:每次启动日历插件时,页面向下滚动10px。
//加载日历插件
D('datebtnrows').addEventListener(getEventName(),function(){
if(mui.os.ios) {
//此代码的作用是为了解决使用单WEBVIEW下拉刷新时与日历插件的冲突;
mui('#pullrefresh').pullRefresh().scrollTo(0,10,100);
}
var datestr = dateBtn.getAttribute('datestr');
var dtPicker = new mui.DtPicker({"type":"date","value":datestr});
dtPicker.show(function (selectItems) {
var selectYear = selectItems.y.value;```javascript
var selectMonth = prefixInteger(selectItems.m.value);
var selectDay = prefixInteger(selectItems.d.value);
var selectstr = selectYear+'-'+selectMonth+'-'+selectDay;
dateBtn.innerHTML = selectMonth+'月'+selectDay+'日';
dateBtn.setAttribute('datestr',selectstr);
dtPicker.dispose();
});
});
比较揪心的解决方法:每次启动日历插件时,页面向下滚动10px。
//加载日历插件
D('datebtnrows').addEventListener(getEventName(),function(){
if(mui.os.ios) {
//此代码的作用是为了解决使用单WEBVIEW下拉刷新时与日历插件的冲突;
mui('#pullrefresh').pullRefresh().scrollTo(0,10,100);
}
var datestr = dateBtn.getAttribute('datestr');
var dtPicker = new mui.DtPicker({"type":"date","value":datestr});
dtPicker.show(function (selectItems) {
var selectYear = selectItems.y.value;```javascript
var selectMonth = prefixInteger(selectItems.m.value);
var selectDay = prefixInteger(selectItems.d.value);
var selectstr = selectYear+'-'+selectMonth+'-'+selectDay;
dateBtn.innerHTML = selectMonth+'月'+selectDay+'日';
dateBtn.setAttribute('datestr',selectstr);
dtPicker.dispose();
});
});
收起阅读 »

求大神提供一个HBuilder好看的主题配置文件(最好是直接导入就能用的)
如题;
求大神提供一个HBuilder好看的主题配置文件(最好是直接导入就能用的)
如题;
求大神提供一个HBuilder好看的主题配置文件(最好是直接导入就能用的)

关于MUI openWindow打开新页面传参数的问题,解决办法看这里!
方法一:
index.html主文件中定义要打开的页面:------------------------------------------------
<a id="info">热点</a>
document.getElementById('info').addEventListener('tap', function() {
mui.openWindow({
url: './test.html?name=uuueeu&age=26', //通过URL传参
id: 'test.html'
});
test.html页面代码:-----------------------------------------------------------------------------
<div class="mui-content">
<div>姓名 : <span id="name"></span></div>
<div>年龄 : <span id="age"></span></div>
</div>
$("#name").text(GetQueryString('name'));
$("#age").text(GetQueryString('age'));
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}
方法二:
index.html代码:
<div class="mui-content">
<button type="button" class="mui-btn" onclick="openWindow();">点击这里打开新窗口</button>
</div>
function openWindow() {
var obj = {
"uname": "小明",
"age": "29"
};
var str = JSON.stringify(obj);
localStorage.obj = str;
mui.openWindow({
url: 'b.html',
id: 'b',
});
}
b.html页面代码:
<div class="mui-content">
<div>姓名: <span id="name"></span></div>
<div>年龄:<span id="age"></span></div>
</div>
$(function (){
var data = JSON.parse(localStorage.obj);
$("#name").text(data.uname);
$("#age").text(data.age);
console.log(data.uname);
console.log(data.age);
});
------------------------------------------------以上两种方法亲测可用---------------------------------------------
注意事项:
1.在http协议下访问
- 官方给出的extras已经不能用了,百度的方法很多是按官方的栗子写的,之前我的DEMO原本就用的extras传参的,过了几个月后再测试,居然不能用了,坑了我好久。
- 希望对大伙有帮助,有问题可以联系我uuueeu@126.com 西红柿
方法一:
index.html主文件中定义要打开的页面:------------------------------------------------
<a id="info">热点</a>
document.getElementById('info').addEventListener('tap', function() {
mui.openWindow({
url: './test.html?name=uuueeu&age=26', //通过URL传参
id: 'test.html'
});
test.html页面代码:-----------------------------------------------------------------------------
<div class="mui-content">
<div>姓名 : <span id="name"></span></div>
<div>年龄 : <span id="age"></span></div>
</div>
$("#name").text(GetQueryString('name'));
$("#age").text(GetQueryString('age'));
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}
方法二:
index.html代码:
<div class="mui-content">
<button type="button" class="mui-btn" onclick="openWindow();">点击这里打开新窗口</button>
</div>
function openWindow() {
var obj = {
"uname": "小明",
"age": "29"
};
var str = JSON.stringify(obj);
localStorage.obj = str;
mui.openWindow({
url: 'b.html',
id: 'b',
});
}
b.html页面代码:
<div class="mui-content">
<div>姓名: <span id="name"></span></div>
<div>年龄:<span id="age"></span></div>
</div>
$(function (){
var data = JSON.parse(localStorage.obj);
$("#name").text(data.uname);
$("#age").text(data.age);
console.log(data.uname);
console.log(data.age);
});
------------------------------------------------以上两种方法亲测可用---------------------------------------------
注意事项:
1.在http协议下访问
- 官方给出的extras已经不能用了,百度的方法很多是按官方的栗子写的,之前我的DEMO原本就用的extras传参的,过了几个月后再测试,居然不能用了,坑了我好久。
- 希望对大伙有帮助,有问题可以联系我uuueeu@126.com 西红柿

需要上海的一位h5+mui的高手帮助开发
开发多端可用的app,用hbuilder和mui框架
需要接入微信登录、支付、分享等
这个app并不复杂,后台api写好的,预计工时1-2周左右吧
要求有完整的Mui开发经验,初学者就算了,知道其中的坑和性能提升之道。
能驻场最好,驻场可适当提高报酬,不能驻场需要每几天碰一次
微信:81398613
后面还需要若干需求,可持续长期合作
开发多端可用的app,用hbuilder和mui框架
需要接入微信登录、支付、分享等
这个app并不复杂,后台api写好的,预计工时1-2周左右吧
要求有完整的Mui开发经验,初学者就算了,知道其中的坑和性能提升之道。
能驻场最好,驻场可适当提高报酬,不能驻场需要每几天碰一次
微信:81398613
后面还需要若干需求,可持续长期合作
收起阅读 »
整合上拉加载下拉刷新插件
用法
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时会出现莫名其妙的问题 收起阅读 »