Android开发中ScollView嵌套 WebView底部高度无法自适应解决
最近要做一个页面,需要 ScrollView 嵌套 WebView,怎么嵌套,怎么解决焦点和 touch 事件冲突,网上一大堆,这里就不赘述了,但是发现 WebView 从一个高度很高的网页加载一个高度很低的网页的时候,高度无法自适应了,造成底部会有一大片的空白,下面来分享一下我们的解决方案。
JS 注入,获取页面内容高度,设置成 WebView 高度
JS 注入,通过前端 JS 调用 native 方法,把高度值传递过来,然后通过 layoutparams 去设置 webview 的高度:
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
mWebView.loadUrl("javascript:App.resize(document.body.getBoundingClientRect().height)");
super.onPageFinished(view, url);
}
});
mWebView.addJavascriptInterface(this, "App");
@JavascriptInterface
public void resize(final float height) {
getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
//Toast.makeText(getActivity(), height + "", Toast.LENGTH_LONG).show();
//此处的 layoutParmas 需要根据父控件类型进行区分,这里为了简单就不这么做了
mWebView.setLayoutParams(new LinearLayout.LayoutParams(getResources().getDisplayMetrics().widthPixels, (int) (height * getResources().getDisplayMetrics().density)));
}
});
}
需要注意的是上面的 resize 方法一定要上面那么写,写成:
mWebView.getLayoutParams().height = (int) (height * getResources().getDisplayMetrics().density);
这样是无法成功的,看来宽度也是有影响的
感谢 @imesong 同学,这段代码有亮点可以完善的地方:
mWebVew.setLayoutParam() 时,应该根据 WebView 父控件的类型,创建 LayoutParam,或者直接用 mWebView.getLayoutParams() 获取 LayoutParams;
调用 JAVA 方法的 JS ,可以在网页加载完成时自己加载下面这段 JS 代码(区别在于一个是终端处理,一个是前段处理),比如:
(function(w){
window.App.resize(document.body.getBoundingClientRect().height);
})(window);
加载这段 JS 就可以了,“APP” 和上面一样是自己注册是自己注册的接口名字;
思路是一样的,处理方式有差异。
试验不太成功的方式
网上也找到了一些其他的方式,试了一下,不太成功,不知道是不是使用姿势的问题,感兴趣的也可以试试,反馈结果给我。
先加载一个空网页
在从高网页加载低网页的时候,先加载一个空内容,接着立马做相关的处理操作(比如加载新的网页,更改字体等),
// load empty data to shrink the WebView instance
mArticleWebView.loadUrl(Constants.ASSETS_EMPTY);
// load real data
mArticleWebView.loadDataWithBaseURL(null,data,"text/html","utf-8",null);
Constants.ASSETS_EMPTY 仅仅只是一个 String 子串,标识该空网页的位置,所以该变量可以为 “file:///android_asset/Empty.html”.
试了一下,也是不好用的,不知道是不是我的操作问题.
修改 Setting 属性
wv.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
wv.setVerticalScrollBarEnabled(false);
wv.setVerticalScrollbarOverlay(false);
wv.setHorizontalScrollBarEnabled(false);
wv.setHorizontalScrollbarOverlay(false);
通过我们多次的尝试得出:第三种方式是比较合适的,因此大家可以重点借鉴一下第三种方法来解决问题。
本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明出处。
最近要做一个页面,需要 ScrollView 嵌套 WebView,怎么嵌套,怎么解决焦点和 touch 事件冲突,网上一大堆,这里就不赘述了,但是发现 WebView 从一个高度很高的网页加载一个高度很低的网页的时候,高度无法自适应了,造成底部会有一大片的空白,下面来分享一下我们的解决方案。
JS 注入,获取页面内容高度,设置成 WebView 高度
JS 注入,通过前端 JS 调用 native 方法,把高度值传递过来,然后通过 layoutparams 去设置 webview 的高度:
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
mWebView.loadUrl("javascript:App.resize(document.body.getBoundingClientRect().height)");
super.onPageFinished(view, url);
}
});
mWebView.addJavascriptInterface(this, "App");
@JavascriptInterface
public void resize(final float height) {
getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
//Toast.makeText(getActivity(), height + "", Toast.LENGTH_LONG).show();
//此处的 layoutParmas 需要根据父控件类型进行区分,这里为了简单就不这么做了
mWebView.setLayoutParams(new LinearLayout.LayoutParams(getResources().getDisplayMetrics().widthPixels, (int) (height * getResources().getDisplayMetrics().density)));
}
});
}
需要注意的是上面的 resize 方法一定要上面那么写,写成:
mWebView.getLayoutParams().height = (int) (height * getResources().getDisplayMetrics().density);
这样是无法成功的,看来宽度也是有影响的
感谢 @imesong 同学,这段代码有亮点可以完善的地方:
mWebVew.setLayoutParam() 时,应该根据 WebView 父控件的类型,创建 LayoutParam,或者直接用 mWebView.getLayoutParams() 获取 LayoutParams;
调用 JAVA 方法的 JS ,可以在网页加载完成时自己加载下面这段 JS 代码(区别在于一个是终端处理,一个是前段处理),比如:
(function(w){
window.App.resize(document.body.getBoundingClientRect().height);
})(window);
加载这段 JS 就可以了,“APP” 和上面一样是自己注册是自己注册的接口名字;
思路是一样的,处理方式有差异。
试验不太成功的方式
网上也找到了一些其他的方式,试了一下,不太成功,不知道是不是使用姿势的问题,感兴趣的也可以试试,反馈结果给我。
先加载一个空网页
在从高网页加载低网页的时候,先加载一个空内容,接着立马做相关的处理操作(比如加载新的网页,更改字体等),
// load empty data to shrink the WebView instance
mArticleWebView.loadUrl(Constants.ASSETS_EMPTY);
// load real data
mArticleWebView.loadDataWithBaseURL(null,data,"text/html","utf-8",null);
Constants.ASSETS_EMPTY 仅仅只是一个 String 子串,标识该空网页的位置,所以该变量可以为 “file:///android_asset/Empty.html”.
试了一下,也是不好用的,不知道是不是我的操作问题.
修改 Setting 属性
wv.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
wv.setVerticalScrollBarEnabled(false);
wv.setVerticalScrollbarOverlay(false);
wv.setHorizontalScrollBarEnabled(false);
wv.setHorizontalScrollbarOverlay(false);
通过我们多次的尝试得出:第三种方式是比较合适的,因此大家可以重点借鉴一下第三种方法来解决问题。
本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明出处。
收起阅读 »uni-app 中实现动态禁用/开启下拉刷新
首先,在 pages.json 中配置目标页面的 style->enablePullDownRefresh 为 true。
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true
}
}
获取当前 Webview 窗口对象:
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const currentWebview = page.$getAppWebview();
根据状态值来切换禁用/开启下拉刷新
currentWebview.setStyle({
pullToRefresh: {
support: !this.isSupport,
style: plus.os.name === 'Android' ? 'circle' : 'default'
}
});
this.isSupport = !this.isSupport;
这里调用 plus 的 API,是在条件编译下进行的。
详细的示例见附件,下载后解压拖至 HBuilderX 运行即可体验。
注意事项
- 此功能仅在 5+App 环境下支持,因此示例中用到了条件编译。
- pages.json 中的 页面->style->enablePullDownRefresh 必须为 true,也就是说初始化时必须是开启状态。
- iOS上,关闭bounce回弹效果,另见bounce相关的配置和API。
参考文档:
首先,在 pages.json 中配置目标页面的 style->enablePullDownRefresh 为 true。
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true
}
}
获取当前 Webview 窗口对象:
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const currentWebview = page.$getAppWebview();
根据状态值来切换禁用/开启下拉刷新
currentWebview.setStyle({
pullToRefresh: {
support: !this.isSupport,
style: plus.os.name === 'Android' ? 'circle' : 'default'
}
});
this.isSupport = !this.isSupport;
这里调用 plus 的 API,是在条件编译下进行的。
详细的示例见附件,下载后解压拖至 HBuilderX 运行即可体验。
注意事项
- 此功能仅在 5+App 环境下支持,因此示例中用到了条件编译。
- pages.json 中的 页面->style->enablePullDownRefresh 必须为 true,也就是说初始化时必须是开启状态。
- iOS上,关闭bounce回弹效果,另见bounce相关的配置和API。
参考文档:
收起阅读 »力谱云阐述移动APP命名的几大重要原则
> 谈到App命名,一个新的手机APP软件想要为人所知、获得用户,取得一个好名字也十分重要。而手机APP软件的名字一旦确定,尤其是APP定制开发完成继推广之后,再要改名就会是很困难的事情,甚至难于企业改字号。那么,究竟该如何给APP取一个好名字呢?给APP取名字需要注意哪些事项呢?本文小编就将好好
谈谈给一款移动APP取名的时候要注意的五大原则。

一、字数不要太长,要好记好传播
现在不少知名的APP名字都是2-5个字的,所以建议APP字数尽量不要超过5个字,同时也不要有生僻的组合、拗口的发音,关键是要朗朗上口,让人容易记住、好查找、好传播,易于后期推广和运营。
二、追求创意的同时不要忘了明确功能
有些APP在取名字的时候,为了可以追求新颖、个性而忽略了功能定位。不能从字面上一眼看出手机app软件的应用功能,这也是不可取的。也不是说取名时不能追求创意、个性,但是你的APP名字太过于追求创意而忽略明确功能时,你就需要通过其他渠道去让大家了解这款APP,例如,重金去宣传推广。
还有一类APP的名字中前两个字追求创意,后两个字表明应用的性质与功能,清楚交代了应用的功能,这种方式也值得借鉴。
三、舍弃常用词,做到唯一性
如果实在想不到有特点的名字,也不能用太常用的词汇或者组合,如果这样,当用户在搜索的时候,你的APP很可能会被淹没在汪洋大海中。但有的常用高频词组合起来就有唯一性了,这种方法也是可以借鉴的。
四、抓住用户兴趣,调动用户情绪
如果你的APP不用展示品牌,不妨在名字力调动用户情绪。而游戏类的APP在用户没有明确搜索目标时,不妨以好玩来抓住用户兴趣。
五、不要轻易使用创始人名字
有的企业为了让APP的名字具有纪念意义而选择使用创始人的名字来命名,这种方式不太可取,除非在起名字前就将创始人宣传红了,不然你的APP名字辨识度低不利于搜索。
> 谈到App命名,一个新的手机APP软件想要为人所知、获得用户,取得一个好名字也十分重要。而手机APP软件的名字一旦确定,尤其是APP定制开发完成继推广之后,再要改名就会是很困难的事情,甚至难于企业改字号。那么,究竟该如何给APP取一个好名字呢?给APP取名字需要注意哪些事项呢?本文小编就将好好
谈谈给一款移动APP取名的时候要注意的五大原则。

一、字数不要太长,要好记好传播
现在不少知名的APP名字都是2-5个字的,所以建议APP字数尽量不要超过5个字,同时也不要有生僻的组合、拗口的发音,关键是要朗朗上口,让人容易记住、好查找、好传播,易于后期推广和运营。
二、追求创意的同时不要忘了明确功能
有些APP在取名字的时候,为了可以追求新颖、个性而忽略了功能定位。不能从字面上一眼看出手机app软件的应用功能,这也是不可取的。也不是说取名时不能追求创意、个性,但是你的APP名字太过于追求创意而忽略明确功能时,你就需要通过其他渠道去让大家了解这款APP,例如,重金去宣传推广。
还有一类APP的名字中前两个字追求创意,后两个字表明应用的性质与功能,清楚交代了应用的功能,这种方式也值得借鉴。
三、舍弃常用词,做到唯一性
如果实在想不到有特点的名字,也不能用太常用的词汇或者组合,如果这样,当用户在搜索的时候,你的APP很可能会被淹没在汪洋大海中。但有的常用高频词组合起来就有唯一性了,这种方法也是可以借鉴的。
四、抓住用户兴趣,调动用户情绪
如果你的APP不用展示品牌,不妨在名字力调动用户情绪。而游戏类的APP在用户没有明确搜索目标时,不妨以好玩来抓住用户兴趣。
五、不要轻易使用创始人名字
有的企业为了让APP的名字具有纪念意义而选择使用创始人的名字来命名,这种方式不太可取,除非在起名字前就将创始人宣传红了,不然你的APP名字辨识度低不利于搜索。
基于vue-cli3开发h5plus app的demo分享
vue-h5plus
基于 vue-cli3 搭建的 vue 多页面 H5Plus 项目,同时结合了 vant、mui 进行开发。
vue-h5plus 的特点
- 基于 webpack4 和 vue-cli3 多页面模式开发,体验极致的打包速度
- 自动构建 pags 目录下的页面,快速新建页面
- Hbuilder 项目目录和 vue 工程目录分离,Hbuilder 不打包多余的配置文件
项目说明
- pages 目录下每个子目录作为一个页面,pagename.js 为 webpack 打包入口,pagename.html 为页面模板(若子目录下无 pagename.html ,则使用 default.html 作为模板)
- 项目包含了 webview 模式的 tabbar,对应页面为 index
- 项目引入了 mui 和 vant 组件库,开发者可以灵活选择
目录结构
+-- app // Hbuild 项目目录
| +-- dist // src 目录打包资源
| +-- static // 静态资源,不使用 webpack 打包,直接使用
| --- *.html // src 目录打包资源
+-- appicon // 应用图标
+-- src // 应用图标
| +-- assets // 资源库
| | +-- img
| | +-- scss
| +-- components // 公共 vue 组件目录
| +-- pages // 页面
| | +--somepage // 页面
| | | ---pagename.html // html模板
| | | ---pagename.js // 入口文件
| | --- default.html // 默认 html 模板
| +-- utils // 公用 js
如何运行?
install dependencies
yarn install
serve with hot reload at localhost:8099
yarn dev
build for production with minification
yarn build
快速体验
Licence
MIT
github地址
https://github.com/inooNgt/vue-h5plus.git
vue-h5plus
基于 vue-cli3 搭建的 vue 多页面 H5Plus 项目,同时结合了 vant、mui 进行开发。
vue-h5plus 的特点
- 基于 webpack4 和 vue-cli3 多页面模式开发,体验极致的打包速度
- 自动构建 pags 目录下的页面,快速新建页面
- Hbuilder 项目目录和 vue 工程目录分离,Hbuilder 不打包多余的配置文件
项目说明
- pages 目录下每个子目录作为一个页面,pagename.js 为 webpack 打包入口,pagename.html 为页面模板(若子目录下无 pagename.html ,则使用 default.html 作为模板)
- 项目包含了 webview 模式的 tabbar,对应页面为 index
- 项目引入了 mui 和 vant 组件库,开发者可以灵活选择
目录结构
+-- app // Hbuild 项目目录
| +-- dist // src 目录打包资源
| +-- static // 静态资源,不使用 webpack 打包,直接使用
| --- *.html // src 目录打包资源
+-- appicon // 应用图标
+-- src // 应用图标
| +-- assets // 资源库
| | +-- img
| | +-- scss
| +-- components // 公共 vue 组件目录
| +-- pages // 页面
| | +--somepage // 页面
| | | ---pagename.html // html模板
| | | ---pagename.js // 入口文件
| | --- default.html // 默认 html 模板
| +-- utils // 公用 js
如何运行?
install dependencies
yarn install
serve with hot reload at localhost:8099
yarn dev
build for production with minification
yarn build
快速体验
Licence
MIT
github地址
https://github.com/inooNgt/vue-h5plus.git
收起阅读 »HBuilder调用微信支付功能
1.用户申请微信开放平台申请移动应用
ps:移动应用申请时包名必须与打包app包名相同,
签名需要通过java的keytool工具去生成md5签名(注意微信使用的是md5签名) java的版本为jdk-6u43-windows
高版本的工具只能生成SHA1和SHA256这俩个微信支付用不了
<script type="text/javascript">
var pays = {};
var PAYSERVER = null;
function plusReady() {
let self = plus.webview.currentWebview();
let [waybill_sn, waybill_id] = [self.waybill_sn, self.waybill_id];
console.log(waybill_sn)
console.log(waybill_id)
// 获取支付通道
plus.payment.getChannels(function(channels) {
var content = document.getElementById('dcontent');
var info = document.getElementById('info');
var txt = '支付通道信息:';
for(var i in channels) {
var channel = channels[i];
if(channel.id == 'qhpay' || channel.id == 'qihoo') { // 过滤掉不支持的支付通道:暂不支持360相关支付
continue;
}
pays[channel.id] = channel;
txt += 'id:' + channel.id + ', ';
txt += 'description:' + channel.description + ', ';
txt += 'serviceReady:' + channel.serviceReady + '; ';
var de = document.createElement('div');
de.setAttribute('class', 'button');
de.setAttribute('onclick', 'pay(this.id)');
de.id = channel.id;
de.innerText = channel.description + '支付';
content.appendChild(de);
checkServices(channel);
}
info.innerText = txt;
}, function(e) {
ddsd.log('获取支付通道失败:' + e.message);
});
PAYSERVER = ddsd.ddsdAjax + 'Waybill/getWaybillPayInfo?id='+waybill_id+'&session3rd='+ddsd.session3rd()+'&waybill_sn='+waybill_sn+'&setTradeType=app&payid=WxPay'
}
document.addEventListener('plusready', plusReady, false);
// 检测是否安装支付服务
function checkServices(pc) {
if(!pc.serviceReady) {
var txt = null;
switch(pc.id) {
case 'alipay':
txt = '检测到系统未安装“支付宝快捷支付服务”,无法完成支付操作,是否立即安装?';
break;
default:
txt = '系统未安装“' + pc.description + '”服务,无法完成支付,是否立即安装?';
break;
}
plus.nativeUI.confirm(txt, function(e) {
if(e.index == 0) {
pc.installService();
}
}, pc.description);
}
}
var w = null;
function pay(id) {
if(w) {
return;
}
ddsd.log('----- 请求支付 -----');
var url = PAYSERVER;
var appid = plus.runtime.appid;//此处的appid为应用包的appid 真机调试永远为HBuilder打包后为该应用真实包名
if(navigator.userAgent.indexOf('StreamApp') >= 0) {
appid = 'Stream';
}
url += '&appid='+ appid +'&total=0.01';
w = plus.nativeUI.showWaiting();
// 请求支付订单
var amount = document.getElementById('total').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
switch(xhr.readyState) {
case 4:
w.close();
w = null;
if(xhr.status == 200) {
ddsd.log('----- 请求订单成功 -----');
var order = xhr.responseText
plus.payment.request(pays[id], order, function(result) {
ddsd.log('----- 支付成功 -----');
plus.nativeUI.alert('支付成功:感谢你的支持,我们会继续努力完善产品。', function() {
back();
}, '捐赠');
}, function(e) {
ddsd.log('----- 支付失败 -----');
plus.nativeUI.alert('更多错误信息请参考支付(Payment)规范文档:http://www.html5plus.org/#specification#/specification/Payment.html', null, '支付失败:' + e.code);
});
} else {
ddsd.log('----- 请求订单失败 -----');
plus.nativeUI.alert('获取订单信息失败!', null, '捐赠');
}
break;
default:
break;
}
}
xhr.open('GET', url );
ddsd.log('请求支付订单:' + url);
xhr.send();
}
</script>
请求url
http://ddsd2.ittun.com/worker.php/Waybill/getWaybillPayInfo?id=1054996865944260608&session3rd=session5bd01de5290cd&waybill_sn=1540682647330&setTradeType=app&payid=WxPay&appid=HBuilder&total=0.01
开始打包
包名必须和微信开放平台相同
证书别名为申请密钥使用的别名
密码为申请秘钥的密码
文件为申请后的证书文件
申请秘钥步骤为
1.下载1.6版本java
2.进入jdk下bin 使用
keytool -genkey -alias xxx -keyalg RSA -keysize 1024 -keypass ddsd123456 -validity 3500 -keystore c:\key\xxx.keystore
创建密钥
3.keytool -list -v -keystore c:\key\xxx.keystore
使用当前命令查看密钥信息
最要的一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行
最重要的一定要把微信缓存清理一下 不行就卸了重装 缓存是个坑 记得清缓存 记得清缓存 记得清缓存 记得清缓存
还有不懂的邮箱是我qq 1035355110
1.用户申请微信开放平台申请移动应用
ps:移动应用申请时包名必须与打包app包名相同,
签名需要通过java的keytool工具去生成md5签名(注意微信使用的是md5签名) java的版本为jdk-6u43-windows
高版本的工具只能生成SHA1和SHA256这俩个微信支付用不了
<script type="text/javascript">
var pays = {};
var PAYSERVER = null;
function plusReady() {
let self = plus.webview.currentWebview();
let [waybill_sn, waybill_id] = [self.waybill_sn, self.waybill_id];
console.log(waybill_sn)
console.log(waybill_id)
// 获取支付通道
plus.payment.getChannels(function(channels) {
var content = document.getElementById('dcontent');
var info = document.getElementById('info');
var txt = '支付通道信息:';
for(var i in channels) {
var channel = channels[i];
if(channel.id == 'qhpay' || channel.id == 'qihoo') { // 过滤掉不支持的支付通道:暂不支持360相关支付
continue;
}
pays[channel.id] = channel;
txt += 'id:' + channel.id + ', ';
txt += 'description:' + channel.description + ', ';
txt += 'serviceReady:' + channel.serviceReady + '; ';
var de = document.createElement('div');
de.setAttribute('class', 'button');
de.setAttribute('onclick', 'pay(this.id)');
de.id = channel.id;
de.innerText = channel.description + '支付';
content.appendChild(de);
checkServices(channel);
}
info.innerText = txt;
}, function(e) {
ddsd.log('获取支付通道失败:' + e.message);
});
PAYSERVER = ddsd.ddsdAjax + 'Waybill/getWaybillPayInfo?id='+waybill_id+'&session3rd='+ddsd.session3rd()+'&waybill_sn='+waybill_sn+'&setTradeType=app&payid=WxPay'
}
document.addEventListener('plusready', plusReady, false);
// 检测是否安装支付服务
function checkServices(pc) {
if(!pc.serviceReady) {
var txt = null;
switch(pc.id) {
case 'alipay':
txt = '检测到系统未安装“支付宝快捷支付服务”,无法完成支付操作,是否立即安装?';
break;
default:
txt = '系统未安装“' + pc.description + '”服务,无法完成支付,是否立即安装?';
break;
}
plus.nativeUI.confirm(txt, function(e) {
if(e.index == 0) {
pc.installService();
}
}, pc.description);
}
}
var w = null;
function pay(id) {
if(w) {
return;
}
ddsd.log('----- 请求支付 -----');
var url = PAYSERVER;
var appid = plus.runtime.appid;//此处的appid为应用包的appid 真机调试永远为HBuilder打包后为该应用真实包名
if(navigator.userAgent.indexOf('StreamApp') >= 0) {
appid = 'Stream';
}
url += '&appid='+ appid +'&total=0.01';
w = plus.nativeUI.showWaiting();
// 请求支付订单
var amount = document.getElementById('total').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
switch(xhr.readyState) {
case 4:
w.close();
w = null;
if(xhr.status == 200) {
ddsd.log('----- 请求订单成功 -----');
var order = xhr.responseText
plus.payment.request(pays[id], order, function(result) {
ddsd.log('----- 支付成功 -----');
plus.nativeUI.alert('支付成功:感谢你的支持,我们会继续努力完善产品。', function() {
back();
}, '捐赠');
}, function(e) {
ddsd.log('----- 支付失败 -----');
plus.nativeUI.alert('更多错误信息请参考支付(Payment)规范文档:http://www.html5plus.org/#specification#/specification/Payment.html', null, '支付失败:' + e.code);
});
} else {
ddsd.log('----- 请求订单失败 -----');
plus.nativeUI.alert('获取订单信息失败!', null, '捐赠');
}
break;
default:
break;
}
}
xhr.open('GET', url );
ddsd.log('请求支付订单:' + url);
xhr.send();
}
</script>
请求url
http://ddsd2.ittun.com/worker.php/Waybill/getWaybillPayInfo?id=1054996865944260608&session3rd=session5bd01de5290cd&waybill_sn=1540682647330&setTradeType=app&payid=WxPay&appid=HBuilder&total=0.01
开始打包
包名必须和微信开放平台相同
证书别名为申请密钥使用的别名
密码为申请秘钥的密码
文件为申请后的证书文件
申请秘钥步骤为
1.下载1.6版本java
2.进入jdk下bin 使用
keytool -genkey -alias xxx -keyalg RSA -keysize 1024 -keypass ddsd123456 -validity 3500 -keystore c:\key\xxx.keystore
创建密钥
3.keytool -list -v -keystore c:\key\xxx.keystore
使用当前命令查看密钥信息
最要的一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行 一定要真机运行
最重要的一定要把微信缓存清理一下 不行就卸了重装 缓存是个坑 记得清缓存 记得清缓存 记得清缓存 记得清缓存
还有不懂的邮箱是我qq 1035355110
收起阅读 »个推
1.我相信开始使用推送的小伙伴,都是使用登录个推的平台上,发送推送测试,发现普通的推送没有问题,透传多多少少都是有点问题.,透传不会触发.
2.然后呢,用我们的后台来推送时,我们是希望后台把消息发送来,出现在通知栏,然后点击通知栏,拿到后台的数据,跳转到指定页面
- 这里说一下,后台是有模板的(两种),他发送的数据,可以选择1.点击通知触发,2.直接触发receive模板.(这是后台来决定的)
- 我的需求是有些通知需要点击通知栏,有一些更新操作,需要直接触发receive,静默更新操作.所以,我就让后台区分一下,该用模板1就用模板1,用模板2就用模板2
- 为什么要说这个,因为我的后台开始不知道还有其他模板,他就是会用推送时,点击通知栏获取.不会用直接触发app的receive监听函数.还是我去找个推客服解决的.又是坑
1.我相信开始使用推送的小伙伴,都是使用登录个推的平台上,发送推送测试,发现普通的推送没有问题,透传多多少少都是有点问题.,透传不会触发.
2.然后呢,用我们的后台来推送时,我们是希望后台把消息发送来,出现在通知栏,然后点击通知栏,拿到后台的数据,跳转到指定页面
- 这里说一下,后台是有模板的(两种),他发送的数据,可以选择1.点击通知触发,2.直接触发receive模板.(这是后台来决定的)
- 我的需求是有些通知需要点击通知栏,有一些更新操作,需要直接触发receive,静默更新操作.所以,我就让后台区分一下,该用模板1就用模板1,用模板2就用模板2
- 为什么要说这个,因为我的后台开始不知道还有其他模板,他就是会用推送时,点击通知栏获取.不会用直接触发app的receive监听函数.还是我去找个推客服解决的.又是坑
vant 使用心得
强调下这个组件是app和微信小程序通用,但不能用于h5、其他小程序
官方更新很久支持 小程序的组件了。文档介绍地址: http://uniapp.dcloud.io/
vant 官方文档:
https://youzan.github.io/vant-weapp
怎么使用昵?
安装方式支持npm git 。还有一个方式是直接去 git clone 传送门:https://github.com/youzan/vant-weapp
下载后 把压缩文件解压,看到根目录有一个 dist 的目录,将整个目录拷贝下来。
然后在你的UNI 的项目根目录创建文件: wxcomponents/vant ,将你上面拷贝的 dist 目录的内容粘贴到 项目根目录 wxcomponents/vant 下。
然后打开你项目根目录的 pages.json 在每个页面的 style 下 创建一个 usingComponent (这块就请看UNI的官方文档吧!)
例如:
"usingComponents" : {
"van-search": "/wxcomponents/vant/dist/search/index"
}
创建后 打开page.vue 页面。 使用组件 (每个组件使用的方式都不一样 这点可以去vant官网查看!)
<van-search :value="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel"></van-search>
值得一说的是 vant 提供的方式代码是 :
<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
show-action
bind:search="onSearch"
bind:cancel="onCancel"
/>
在UNI 下需要做一些修改:
1.绑定的变量使用 :value="value"
- bind:search 更改为 @search="onSearch" ; 就是把 bind: 换成 @ 即可。
更改后的例子:
<van-search :value="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel"></van-search>
特别要说明的是:每次修改 page.vue 中的节点以后 保存后不会直接生效,你得点重新运行(控制台右上角有一个类似刷新的图标)
vant weapp用于app时,在低端Android上有css兼容性问题要注意。因为app的webview和微信不一样,app是系统webview。Android5以下的webview版本较低,有些较新的css不支持。
强调下这个组件是app和微信小程序通用,但不能用于h5、其他小程序
官方更新很久支持 小程序的组件了。文档介绍地址: http://uniapp.dcloud.io/
vant 官方文档:
https://youzan.github.io/vant-weapp
怎么使用昵?
安装方式支持npm git 。还有一个方式是直接去 git clone 传送门:https://github.com/youzan/vant-weapp
下载后 把压缩文件解压,看到根目录有一个 dist 的目录,将整个目录拷贝下来。
然后在你的UNI 的项目根目录创建文件: wxcomponents/vant ,将你上面拷贝的 dist 目录的内容粘贴到 项目根目录 wxcomponents/vant 下。
然后打开你项目根目录的 pages.json 在每个页面的 style 下 创建一个 usingComponent (这块就请看UNI的官方文档吧!)
例如:
"usingComponents" : {
"van-search": "/wxcomponents/vant/dist/search/index"
}
创建后 打开page.vue 页面。 使用组件 (每个组件使用的方式都不一样 这点可以去vant官网查看!)
<van-search :value="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel"></van-search>
值得一说的是 vant 提供的方式代码是 :
<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
show-action
bind:search="onSearch"
bind:cancel="onCancel"
/>
在UNI 下需要做一些修改:
1.绑定的变量使用 :value="value"
- bind:search 更改为 @search="onSearch" ; 就是把 bind: 换成 @ 即可。
更改后的例子:
<van-search :value="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel"></van-search>
特别要说明的是:每次修改 page.vue 中的节点以后 保存后不会直接生效,你得点重新运行(控制台右上角有一个类似刷新的图标)
vant weapp用于app时,在低端Android上有css兼容性问题要注意。因为app的webview和微信不一样,app是系统webview。Android5以下的webview版本较低,有些较新的css不支持。
收起阅读 »一周 D 报(2018-10-24)
本周的 D 报来的晚了一些,但来的早不如来的巧,今天是属于各位程序员同学的节日 1024。
在此节日期间,DCloud 也为大家送上一份大礼。那就是,uni-app 官方视频教程:https://ke.qq.com/course/343370。
为了更加方便观看教程,可以加入 uni-app QQ 群,直接点击课堂即可。
- uni-app 1群:531031261(已满)
- uni-app 2群:901474938(已满)
- uni-app 3群:773794803(期待你的加入)
uni-app
- rich-text 里面的节点样式怎么控制? 两种思路,一种是生成富文本时就处理好,另一种就是在 nodes 中设置节点的 style 或者 class 来处理。
- 使用nvue页面不能生成小程序吗? nvue 是 App 平台的强化,并不属于小程序的规范。
- uni-app 可以直接改变元素的 css 吗? uni-app 中没有 DOM 的操作,因此实现的思路是点击之后修改相关的计算属性来动态调整样式。
- v-for 中必须声明 key Vue 的规范是推荐声明 key,uni-app 做了强制约定。
- uni-app 有退出接口么? 详见这篇文档 uni-app 中退出应用。
- 小程序里是有50ms的请求间隔限制,打包成App也有吗? 目前同样存在此限制,后面酌情考虑调整。
- uni-app ios目前在app store可以审核通过吗:可以下载案例中的应用体验。
nvue
uni-app 在 App 平台下提供了 nvue,实现了 App 端页面的原生渲染进一步提高页面的流畅性。
- 详细的文档参考:在 uni-app 中使用 Weex
- 参考示例:hello uni-app->模板->选项卡->原生
H5+
开源与分享
- DCloud 官方出品的 uni-app 教程,已经在腾讯课堂开课了,免费的哦。欢迎大家参与学习,并且提出你宝贵的意见。
- 近期又有许多 uni-app 开发的应用顺利上线了,欢迎大家下载体验,也希望大家踊跃向 DCloud 提交更多案例。
欢迎更多的同学参与进来,分享自己的经验心得。
结束
本期周报就到这里,感谢大家的阅读。新的一周,祝大家工作顺利。

本周的 D 报来的晚了一些,但来的早不如来的巧,今天是属于各位程序员同学的节日 1024。
在此节日期间,DCloud 也为大家送上一份大礼。那就是,uni-app 官方视频教程:https://ke.qq.com/course/343370。
为了更加方便观看教程,可以加入 uni-app QQ 群,直接点击课堂即可。
- uni-app 1群:531031261(已满)
- uni-app 2群:901474938(已满)
- uni-app 3群:773794803(期待你的加入)
uni-app
- rich-text 里面的节点样式怎么控制? 两种思路,一种是生成富文本时就处理好,另一种就是在 nodes 中设置节点的 style 或者 class 来处理。
- 使用nvue页面不能生成小程序吗? nvue 是 App 平台的强化,并不属于小程序的规范。
- uni-app 可以直接改变元素的 css 吗? uni-app 中没有 DOM 的操作,因此实现的思路是点击之后修改相关的计算属性来动态调整样式。
- v-for 中必须声明 key Vue 的规范是推荐声明 key,uni-app 做了强制约定。
- uni-app 有退出接口么? 详见这篇文档 uni-app 中退出应用。
- 小程序里是有50ms的请求间隔限制,打包成App也有吗? 目前同样存在此限制,后面酌情考虑调整。
- uni-app ios目前在app store可以审核通过吗:可以下载案例中的应用体验。
nvue
uni-app 在 App 平台下提供了 nvue,实现了 App 端页面的原生渲染进一步提高页面的流畅性。
- 详细的文档参考:在 uni-app 中使用 Weex
- 参考示例:hello uni-app->模板->选项卡->原生
H5+
开源与分享
- DCloud 官方出品的 uni-app 教程,已经在腾讯课堂开课了,免费的哦。欢迎大家参与学习,并且提出你宝贵的意见。
- 近期又有许多 uni-app 开发的应用顺利上线了,欢迎大家下载体验,也希望大家踊跃向 DCloud 提交更多案例。
欢迎更多的同学参与进来,分享自己的经验心得。
结束
本期周报就到这里,感谢大家的阅读。新的一周,祝大家工作顺利。

在 5+ App 更加优雅地控制下拉刷新的开关
Webview 对象的 setPullToRefresh 方法将会被废弃,使用新的 API 来控制下拉刷新的开关。
var webview = plus.webview.currentWebview();
// 开启下拉刷新功能
webview.setStyle({
pullToRefresh: {
support: true //关闭下拉刷新的话,把这里设置为 false。
}
});
// 监听下拉刷新事件,关闭的情况下不会触发该事件。
webview.addEventListener('pullToRefresh', function() {
// 这里可执行从服务器获取数据刷新业务逻辑
setTimeout(function() {
// 完成刷新逻辑后调用endPullToRefresh退出刷新状态
plus.nativeUI.toast('更新完成!');
webview.endPullToRefresh();
}, 5000);
}, false);
下拉刷新的开关与事件的监听,是分开的,开启/关闭下拉刷新只需要通过 setStyle 来调整即可,不用每次都设置下拉的回调函数。
Webview 对象的 setPullToRefresh 方法将会被废弃,使用新的 API 来控制下拉刷新的开关。
var webview = plus.webview.currentWebview();
// 开启下拉刷新功能
webview.setStyle({
pullToRefresh: {
support: true //关闭下拉刷新的话,把这里设置为 false。
}
});
// 监听下拉刷新事件,关闭的情况下不会触发该事件。
webview.addEventListener('pullToRefresh', function() {
// 这里可执行从服务器获取数据刷新业务逻辑
setTimeout(function() {
// 完成刷新逻辑后调用endPullToRefresh退出刷新状态
plus.nativeUI.toast('更新完成!');
webview.endPullToRefresh();
}, 5000);
}, false);
下拉刷新的开关与事件的监听,是分开的,开启/关闭下拉刷新只需要通过 setStyle 来调整即可,不用每次都设置下拉的回调函数。
收起阅读 »uni-app 中退出应用
在 App 环境下,可以直接调用 5+ API 来实现。
// #ifdef APP-PLUS
plus.runtime.quit();
// #endif
注意:iOS 平台不支持此 API,只能是用户主动杀进程。
微信小程序平台下,2.1.0 版本开始,navigate 支持设置 open-type 为 exit 来退出。
<navigator target="miniProgram" open-type="exit">退出小程序</navigator> 在 App 环境下,可以直接调用 5+ API 来实现。
// #ifdef APP-PLUS
plus.runtime.quit();
// #endif
注意:iOS 平台不支持此 API,只能是用户主动杀进程。
微信小程序平台下,2.1.0 版本开始,navigate 支持设置 open-type 为 exit 来退出。
<navigator target="miniProgram" open-type="exit">退出小程序</navigator> 收起阅读 »
Android开发中XRecyclerview用法及遇到的一些问题
目前通过xrecyclerview的开源代码来实现系列功能,加载数据传入type,值为1,2,3,分别表示初次加载,下拉刷新数据,上拉加载更多数据操作,刷新数据只需要重新放入数据,然后notifyDataSetChanged();即可.加载更多数据只需要在上拉时将获取数据放入之前数据list中刷新数据即可.这么说可能会比较抽象,下面通过代码来具体给大家演示一下是如何实现的吧。
核心代码:
首先需要配置xRecyclerview的属性:
xRecyclerView.setPullRefreshEnabled(true);
xRecyclerView.setLoadingMoreEnabled(true);
xRecyclerView.setRefreshProgressStyle(ProgressStyle.BallSpinFadeLoader);
xRecyclerView.setLoadingMoreProgressStyle(ProgressStyle.Pacman);
xRecyclerView.setLoadingListener(new XRecyclerView.LoadingListener() {
@Override
public void onRefresh() {
new Handler().postDelayed(new Runnable(){
public void run() {
getWorksData(1,2);
}
}, 2000);
}
@Override
public void onLoadMore() {
count+=1;
loge("第几次加载=="+count);
new Handler().postDelayed(new Runnable(){
public void run() {
getWorksData(count,3);
}
}, 2000);
}
});
从上面代码可以看到,需要先设置下拉刷新和加载更多可执行,为true,然后设置它的加载样式,有多种样式可以选择,具体参考xrecyclerview的github介绍,接下里设置一下loadingListener即可.我们需要实现它的两个方法:刷新回调方法onRefresh()和加载更多方法onLoadingMore(),即分别在这两个方法中实现自己的刷新和加载数据逻辑即可.
getWorksData(参数1,参数2)即为获取后天数据的方法.参数1是指数据请求的次数,也指代请求后台的数据页数,初始化为1;参数2表示当前数据的操作模式(为1:初次请求数据,为2:刷新数据,为3:加载更多数据).
loadingDialog.dismiss();
creativeImageBean = JSONObject.parseObject(response, CreativeImageBean.class);
if (creativeImageBean!=null && creativeImageBean.getCode() == 1000) {
if(type==1){
//是初次加载
loge("初次加载数据");
data=creativeImageBean.getData().getList();
Message msg = Message.obtain(handler);
msg.what = GET_DATA;
handler.handleMessage(msg);
}else if(type==2){
//下拉刷新
//data = new ArrayList();
updateData=creativeImageBean.getData().getList();
count = 1;
loge("刷新了");
xRecyclerView.refreshComplete();
if (workAdapter != null) {
Message msg = Message.obtain(handler);
msg.what = UPDATE_DATA;
handler.sendMessage(msg);
} else {
Message msg = Message.obtain(handler);
msg.what = GET_DATA;
handler.sendMessage(msg);
}
}else if(type==3){
//加载更多
//moreData = new ArrayList();
moreData = creativeImageBean.getData().getList();
loge("加载更多数据页数==" + count+"---数据量--"+moreData.size());
if (moreData != null && moreData.size() > 0) {
data.addAll(moreData);
loge("data加载更多数据后的地址=="+data.hashCode());
loge("作品总数据长度==" + data.size());
// Message msg = Message.obtain(handler);
// msg.what = UPDATE_DATA;
// handler.sendMessage(msg);
if(workAdapter!=null){
loge("workAdapter不为空");
workAdapter.notifyDataSetChanged();
}else {
loge("workAdapter为空");
workAdapter = new WorksShowAdapter(MemoryWorksActivity.this,data);
xRecyclerView.setAdapter(workAdapter);
}
xRecyclerView.loadMoreComplete();
//workAdapter.addNewData(data);//添加数据
//如果添加moreData,为空是什么原因
} else {
loge("moreData数据为空");
// xRecyclerView.setLoadingMoreEnabled(false);
// toast(getString(R.string.act_home_loadmore));
xRecyclerView.loadMoreComplete();
}
}
}
刷新数据需要先清除原有数据,然后放入最新数据,接着调用adaper.motifyDataSetChange()方法.
问题总览
点击第i个item,提示却是第i+1个item被点击
问题原因:xrecyclerrview默认添加的header和footer,这就导致item的真实位置发生了变化,
解决方案:将item的位置由holder.getLayoutPosition()改为position就可以了,adapter中修改代码如下:
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//int pos = holder.getLayoutPosition();//点击的item控件的位置
myListener.onItemClick(holder.itemView, position);
/*
此方法返回的pos值与onBindViewHolder方法传入的position值有可能不同。
根据SDK中的解释,在Recyclerview 进行添加、移除item等操作时,position位置可能会变化,
而所有的adapter的刷新并不总是及时的,
只有这个方法返回的才是当前item经过一些变换后所处的真正位置。
*/
}
});
notifySetDataCahnged()无法刷新数据的问题:
问题原因:先下拉刷新,然后上拉加载数据为空不显示,因为data的地址发生了变化,数据的刷新是在adapter中实现的,并且是新建一个list,然后调用了list.addAll(data),导致刷新data数据地址改变,刷新无效
解决方案:新建一个list对象moreData来专门接收下拉刷新的数据,并且摒弃adapter中的addNewData()方法,直接data.clear()—data.addAll(moreData)—adapter.notifyDataChanged()
虽然内容有些多,但是只要大家按照刚才分享的源码来一步一步的去做,都是可以做到的,如果还是存在不理解的地方,可以咨询我们哦。
本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明原文作者及出处。
目前通过xrecyclerview的开源代码来实现系列功能,加载数据传入type,值为1,2,3,分别表示初次加载,下拉刷新数据,上拉加载更多数据操作,刷新数据只需要重新放入数据,然后notifyDataSetChanged();即可.加载更多数据只需要在上拉时将获取数据放入之前数据list中刷新数据即可.这么说可能会比较抽象,下面通过代码来具体给大家演示一下是如何实现的吧。
核心代码:
首先需要配置xRecyclerview的属性:
xRecyclerView.setPullRefreshEnabled(true);
xRecyclerView.setLoadingMoreEnabled(true);
xRecyclerView.setRefreshProgressStyle(ProgressStyle.BallSpinFadeLoader);
xRecyclerView.setLoadingMoreProgressStyle(ProgressStyle.Pacman);
xRecyclerView.setLoadingListener(new XRecyclerView.LoadingListener() {
@Override
public void onRefresh() {
new Handler().postDelayed(new Runnable(){
public void run() {
getWorksData(1,2);
}
}, 2000);
}
@Override
public void onLoadMore() {
count+=1;
loge("第几次加载=="+count);
new Handler().postDelayed(new Runnable(){
public void run() {
getWorksData(count,3);
}
}, 2000);
}
});
从上面代码可以看到,需要先设置下拉刷新和加载更多可执行,为true,然后设置它的加载样式,有多种样式可以选择,具体参考xrecyclerview的github介绍,接下里设置一下loadingListener即可.我们需要实现它的两个方法:刷新回调方法onRefresh()和加载更多方法onLoadingMore(),即分别在这两个方法中实现自己的刷新和加载数据逻辑即可.
getWorksData(参数1,参数2)即为获取后天数据的方法.参数1是指数据请求的次数,也指代请求后台的数据页数,初始化为1;参数2表示当前数据的操作模式(为1:初次请求数据,为2:刷新数据,为3:加载更多数据).
loadingDialog.dismiss();
creativeImageBean = JSONObject.parseObject(response, CreativeImageBean.class);
if (creativeImageBean!=null && creativeImageBean.getCode() == 1000) {
if(type==1){
//是初次加载
loge("初次加载数据");
data=creativeImageBean.getData().getList();
Message msg = Message.obtain(handler);
msg.what = GET_DATA;
handler.handleMessage(msg);
}else if(type==2){
//下拉刷新
//data = new ArrayList();
updateData=creativeImageBean.getData().getList();
count = 1;
loge("刷新了");
xRecyclerView.refreshComplete();
if (workAdapter != null) {
Message msg = Message.obtain(handler);
msg.what = UPDATE_DATA;
handler.sendMessage(msg);
} else {
Message msg = Message.obtain(handler);
msg.what = GET_DATA;
handler.sendMessage(msg);
}
}else if(type==3){
//加载更多
//moreData = new ArrayList();
moreData = creativeImageBean.getData().getList();
loge("加载更多数据页数==" + count+"---数据量--"+moreData.size());
if (moreData != null && moreData.size() > 0) {
data.addAll(moreData);
loge("data加载更多数据后的地址=="+data.hashCode());
loge("作品总数据长度==" + data.size());
// Message msg = Message.obtain(handler);
// msg.what = UPDATE_DATA;
// handler.sendMessage(msg);
if(workAdapter!=null){
loge("workAdapter不为空");
workAdapter.notifyDataSetChanged();
}else {
loge("workAdapter为空");
workAdapter = new WorksShowAdapter(MemoryWorksActivity.this,data);
xRecyclerView.setAdapter(workAdapter);
}
xRecyclerView.loadMoreComplete();
//workAdapter.addNewData(data);//添加数据
//如果添加moreData,为空是什么原因
} else {
loge("moreData数据为空");
// xRecyclerView.setLoadingMoreEnabled(false);
// toast(getString(R.string.act_home_loadmore));
xRecyclerView.loadMoreComplete();
}
}
}
刷新数据需要先清除原有数据,然后放入最新数据,接着调用adaper.motifyDataSetChange()方法.
问题总览
点击第i个item,提示却是第i+1个item被点击
问题原因:xrecyclerrview默认添加的header和footer,这就导致item的真实位置发生了变化,
解决方案:将item的位置由holder.getLayoutPosition()改为position就可以了,adapter中修改代码如下:
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//int pos = holder.getLayoutPosition();//点击的item控件的位置
myListener.onItemClick(holder.itemView, position);
/*
此方法返回的pos值与onBindViewHolder方法传入的position值有可能不同。
根据SDK中的解释,在Recyclerview 进行添加、移除item等操作时,position位置可能会变化,
而所有的adapter的刷新并不总是及时的,
只有这个方法返回的才是当前item经过一些变换后所处的真正位置。
*/
}
});
notifySetDataCahnged()无法刷新数据的问题:
问题原因:先下拉刷新,然后上拉加载数据为空不显示,因为data的地址发生了变化,数据的刷新是在adapter中实现的,并且是新建一个list,然后调用了list.addAll(data),导致刷新data数据地址改变,刷新无效
解决方案:新建一个list对象moreData来专门接收下拉刷新的数据,并且摒弃adapter中的addNewData()方法,直接data.clear()—data.addAll(moreData)—adapter.notifyDataChanged()
虽然内容有些多,但是只要大家按照刚才分享的源码来一步一步的去做,都是可以做到的,如果还是存在不理解的地方,可以咨询我们哦。
本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明原文作者及出处。
收起阅读 »拍照后获取图片的宽,高,大小等信息
plus.camera.getCamera().captureImage(function(absPath) {
//创建一个 bitmap 对象,参数1是id,参数2是拍照返回的图片绝对路径
var bitmap = new plus.nativeObj.Bitmap('test', absPath);
//没办法,费点事,再用 bitmap 保存一下,overwrite 属性表示是否覆盖原来文件,第1个回调是保存成功,第2个回调是保存失败
bitmap.save(
absPath,
{
overwrite: true,
format: 'jpg',
},
function(event) {
// Code here
// 保存后的图片url路径,以"file://"开头
var target = event.target;
// 保存后图片的大小,单位为字节(Byte)
var size = event.size;
// 保存后图片的实际宽度,单位为px
var width = event.width;
// 保存后图片的实际高度,单位为px
var height = event.height;
console.log('图片绝对路径: ' + target)
console.log('图片文件大小:' + size)
console.log('图片宽度:' + width)
console.log('图片高度:' + height)
function bytesToSize(bytes) {
if (bytes === 0) {
return '0 B'
}
var k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}
var ss = bytesToSize(size);
console.log(ss)
},
function(error) {
// Error.
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
console.log(code)
console.log(message)
}
);
}
其实我觉得 new plus.nativeObj.Bitmap('test', absPath) 后就应该包含了该有的信息了....
plus.camera.getCamera().captureImage(function(absPath) {
//创建一个 bitmap 对象,参数1是id,参数2是拍照返回的图片绝对路径
var bitmap = new plus.nativeObj.Bitmap('test', absPath);
//没办法,费点事,再用 bitmap 保存一下,overwrite 属性表示是否覆盖原来文件,第1个回调是保存成功,第2个回调是保存失败
bitmap.save(
absPath,
{
overwrite: true,
format: 'jpg',
},
function(event) {
// Code here
// 保存后的图片url路径,以"file://"开头
var target = event.target;
// 保存后图片的大小,单位为字节(Byte)
var size = event.size;
// 保存后图片的实际宽度,单位为px
var width = event.width;
// 保存后图片的实际高度,单位为px
var height = event.height;
console.log('图片绝对路径: ' + target)
console.log('图片文件大小:' + size)
console.log('图片宽度:' + width)
console.log('图片高度:' + height)
function bytesToSize(bytes) {
if (bytes === 0) {
return '0 B'
}
var k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}
var ss = bytesToSize(size);
console.log(ss)
},
function(error) {
// Error.
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
console.log(code)
console.log(message)
}
);
}
其实我觉得 new plus.nativeObj.Bitmap('test', absPath) 后就应该包含了该有的信息了....
收起阅读 »




