mui关闭页面出现卡白屏或闪页面的情况
从a跳到b 如果想close a窗口首先在打开b的时候 creat:true一下然后在b页面获取所有窗口对象再判断如果是a窗口就close
这样做可能会出现闪屏现象,因此先隐藏a然后再关闭它。代码如下希望大家少跳坑
var all = plus.webview.all();
var current = plus.webview.currentWebview().id;
for(var i=0,len=all.length;i<len;i++){
if(all[i].id ==a.id){
all[i].hide();
all[i].close();
}
}
从a跳到b 如果想close a窗口首先在打开b的时候 creat:true一下然后在b页面获取所有窗口对象再判断如果是a窗口就close
这样做可能会出现闪屏现象,因此先隐藏a然后再关闭它。代码如下希望大家少跳坑
var all = plus.webview.all();
var current = plus.webview.currentWebview().id;
for(var i=0,len=all.length;i<len;i++){
if(all[i].id ==a.id){
all[i].hide();
all[i].close();
}
}
Native.JS监听手机锁屏,解锁,开屏
var receiver;
mui.plusReady(function() {
main = plus.android.runtimeMainActivity(); //获取activity
// 广播接收
var ALARM_RECEIVER = "alarm_receiver";
receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: function(context, intent) { //实现onReceiver回调函数
var Intent = plus.android.importClass('android.content.Intent');
console.log(intent.getAction());
//action = intent.getAction();
if(intent.getAction() == Intent.ACTION_SCREEN_ON) {
console.log('开屏')
} else if(intent.getAction() == Intent.ACTION_SCREEN_OFF) {
console.log('锁屏')
} else if(intent.getAction() == Intent.ACTION_USER_PRESENT) {
console.log('解锁')
}
result.textContent += '\nAction :' + intent.getAction();
main.unregisterReceiver(receiver);
}
});
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var Intent = plus.android.importClass('android.content.Intent');
var filter = new IntentFilter();
filter.addAction(Intent.ACTION_SCREEN_ON);
filter.addAction(Intent.ACTION_SCREEN_OFF);
filter.addAction(Intent.ACTION_USER_PRESENT);
main.registerReceiver(receiver, filter); //注册监听
})
代码已测试过了ctrl+c直接使用
var receiver;
mui.plusReady(function() {
main = plus.android.runtimeMainActivity(); //获取activity
// 广播接收
var ALARM_RECEIVER = "alarm_receiver";
receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: function(context, intent) { //实现onReceiver回调函数
var Intent = plus.android.importClass('android.content.Intent');
console.log(intent.getAction());
//action = intent.getAction();
if(intent.getAction() == Intent.ACTION_SCREEN_ON) {
console.log('开屏')
} else if(intent.getAction() == Intent.ACTION_SCREEN_OFF) {
console.log('锁屏')
} else if(intent.getAction() == Intent.ACTION_USER_PRESENT) {
console.log('解锁')
}
result.textContent += '\nAction :' + intent.getAction();
main.unregisterReceiver(receiver);
}
});
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var Intent = plus.android.importClass('android.content.Intent');
var filter = new IntentFilter();
filter.addAction(Intent.ACTION_SCREEN_ON);
filter.addAction(Intent.ACTION_SCREEN_OFF);
filter.addAction(Intent.ACTION_USER_PRESENT);
main.registerReceiver(receiver, filter); //注册监听
})
代码已测试过了ctrl+c直接使用
收起阅读 »webpack构建h5plus多页面移动app
fast-h5plus
https://github.com/CC4J/fast-h5plus
说明
- 使用webpack构建多页面移动APP开发的快速框架
- 使用scss预处理器提高app样式开发效率
- 使用h5plus库调用移动端底层接口
- 使用vue提高开发效率,远离dom操作的繁琐
- 使用移动端布局终极解决方案hotcss让移动端布局开发更加容易
- 框架默认使用750px的设计稿,开发过程中在样式文件里直接书写像素px单位,webpack编译后会自动转换成对应的rem值
- 支持es6,es7语法,打包编译自动转es5,让你感受丝滑一般的开发畅快
使用
获取fast-h5plus
git clone git@github.com:CC4J/fast-h5plus.git
安装依赖
npm install
若安装缓慢可切换淘宝源
npm install --registry=https://registry.npm.taobao.org
开发
新建页面
新建一个页面我们需要做两步操作。
第一步是在 src/pages/ 目录下新建每个页面的入口js文件以及入口vue文件,如我们新建一个登陆页,我们需要在src/pages/下新建src/pages/login/login.js与src/pages/login/login.vue。
第二步需要在根目录下的config目录中修改page.config.js文件,如:
exports.pageSet = [
{title: '登陆页', filename: 'login'}
]
页面调试
新建完页面之后,我们需要在手机或pc浏览器中调试页面,需要进行三步操作。
第一步:修改根目录下的config目录中修改page.config.js文件,如:
exports.devPage = 'login';
在这里大家要注意,调试哪一个页面,就需要将devPage的值修改成对应页面的文件名。
第二步:修改src/config/ 目录下的api.js文件,如
var devMode = true;
将devMode的值改为true,作用有两处,一是开发阶段将使用webpack-dev-server的反向代理功能进行跨域请求。二是启动vconsole模块,方便在手机端调试时查看控制台的输出信息。这一步操作在整个开发过程中只进行一次。
第三步:在命令行运行npm start指令,启动webpack-dev-server服务。控制台会打印当前服务器的ip地址与端口后,我们只需要在Hbuilder中修改manifest中的入口为此ip地址与端口号则可启动进行真机调试。
注意:每次新建一个页面之后需要先停掉webpack-dev-server服务,按上面步骤操作之后再重新运行npm start命令即可。Hbuilder启动一次之后不需要再重新启动,你甚至可以停掉Hbuilder项目,手机中的调试基座仍会进行自动刷新。
打包
整个开发结束之后,我们需要对项目进行打包成apk或者ipk。打包之前需要进行以下操作:
第一步:修改src/config/ 目录下的api.js文件,如
var devMode = false;
将devMode的值改为false将关闭页面vconsole控制台,关闭webpack-dev-server反向代理进行跨域功能。
第二步:修改Hbuilder中manifest.json文件的入口,如我们app的入口页是登陆页面,则入口修改为dist/login.html.
第三步:使用Hbuilder打包时需要将除dist以外的文件或目录添加到un'pa'ckage非打包清单中,减少我们app的体积。
结束
求个star,嘿嘿
fast-h5plus
https://github.com/CC4J/fast-h5plus
说明
- 使用webpack构建多页面移动APP开发的快速框架
- 使用scss预处理器提高app样式开发效率
- 使用h5plus库调用移动端底层接口
- 使用vue提高开发效率,远离dom操作的繁琐
- 使用移动端布局终极解决方案hotcss让移动端布局开发更加容易
- 框架默认使用750px的设计稿,开发过程中在样式文件里直接书写像素px单位,webpack编译后会自动转换成对应的rem值
- 支持es6,es7语法,打包编译自动转es5,让你感受丝滑一般的开发畅快
使用
获取fast-h5plus
git clone git@github.com:CC4J/fast-h5plus.git
安装依赖
npm install
若安装缓慢可切换淘宝源
npm install --registry=https://registry.npm.taobao.org
开发
新建页面
新建一个页面我们需要做两步操作。
第一步是在 src/pages/ 目录下新建每个页面的入口js文件以及入口vue文件,如我们新建一个登陆页,我们需要在src/pages/下新建src/pages/login/login.js与src/pages/login/login.vue。
第二步需要在根目录下的config目录中修改page.config.js文件,如:
exports.pageSet = [
{title: '登陆页', filename: 'login'}
]
页面调试
新建完页面之后,我们需要在手机或pc浏览器中调试页面,需要进行三步操作。
第一步:修改根目录下的config目录中修改page.config.js文件,如:
exports.devPage = 'login';
在这里大家要注意,调试哪一个页面,就需要将devPage的值修改成对应页面的文件名。
第二步:修改src/config/ 目录下的api.js文件,如
var devMode = true;
将devMode的值改为true,作用有两处,一是开发阶段将使用webpack-dev-server的反向代理功能进行跨域请求。二是启动vconsole模块,方便在手机端调试时查看控制台的输出信息。这一步操作在整个开发过程中只进行一次。
第三步:在命令行运行npm start指令,启动webpack-dev-server服务。控制台会打印当前服务器的ip地址与端口后,我们只需要在Hbuilder中修改manifest中的入口为此ip地址与端口号则可启动进行真机调试。
注意:每次新建一个页面之后需要先停掉webpack-dev-server服务,按上面步骤操作之后再重新运行npm start命令即可。Hbuilder启动一次之后不需要再重新启动,你甚至可以停掉Hbuilder项目,手机中的调试基座仍会进行自动刷新。
打包
整个开发结束之后,我们需要对项目进行打包成apk或者ipk。打包之前需要进行以下操作:
第一步:修改src/config/ 目录下的api.js文件,如
var devMode = false;
将devMode的值改为false将关闭页面vconsole控制台,关闭webpack-dev-server反向代理进行跨域功能。
第二步:修改Hbuilder中manifest.json文件的入口,如我们app的入口页是登陆页面,则入口修改为dist/login.html.
第三步:使用Hbuilder打包时需要将除dist以外的文件或目录添加到un'pa'ckage非打包清单中,减少我们app的体积。
结束
求个star,嘿嘿
收起阅读 »【分享】uni-app 原生导航 titleNView 搜索框
贴子为以前的,官方已经集成了搜索框了
移步到这里看
https://uniapp.dcloud.io/collocation/pages?id=app-plus
经测试官方已修复安卓的BUG
以下是苹果的
以下是安卓的
操作方法,先配置是下page.json
{
"path": "你的页面",
"style": {
"backgroundColorTop": "#ebebeb",
"backgroundColorBottom": "#ebebeb",
"app-plus": {
"scrollIndicator": "none",
"titleNView": {
"titleText":"",//不要设置标题
"buttons": [{
"text": "取消",
"fontSize": "14"
}]
}
}
}
}
不要设置标题,不然在安卓上就会显示出来,画的盖不住
以下操作在您要画搜索框的页面
在onload引用startcreatview就可以了
设置延迟,不做延迟会出现错误
startcreatview(){
var s = this;
s.TitleTimer = setTimeout(function() {
s.createView();
}, 100);//具体缓迟时间可以按需设置
},
createView() {
clearTimeout(this.TitleTimer);
var s = this;
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
var nTitle = currentWebview.getTitleNView();
nTitle.draw(
[{
"tag": "rect",
"id": "rect",
"color": "#999",
"position": {
"left": "50px",
"right": "50px",
"top": "7px",
"bottom": "7px"
},
"rectStyles": {
"color": "#f6f6f6",
"radius": "30px",
"borderColor": "#999"
}
},
{
"tag": "font",
"id": "font",
"text": "\ue466",
"position": {
"left": "55px",
"width": "30px",
"top": "7px",
"bottom": "7px"
},
"textStyles": {
"size": "13px",
"fontSrc": "/static/uni.ttf",
"color": "#999"
}
},
{
"tag": "input",
"id": "input",
"position": {
"left": "80px",
"right": "70px",
"top": "7px",
"bottom": "7px"
},
"inputStyles": {
"placeholder": "关键字搜索",
"borderRadius": "30px",
"borderWidth": "0px",
"fontSize": "13px",
"type": "search",
"fontSrc": "/static/uni.ttf",
"color": "#999",
onComplete: function(e) {
console.log('点击搜索执行' + e.text)
},
onFocus: function(e) {
console.log('获得焦点')
},
onBlur: function(e) {
console.log('失去焦点')
}
}
}
]
);
},
如果只需要一个假搜索框,把上面代码的inputStyles部份替换为
"textStyles": {
"size": "13px",
"fontSrc": "/static/uni.ttf",
"color": "#999"
}
同时添加监听假搜索框的点击事件nTitle.addEventListener('click', '点击事件', false);
贴子为以前的,官方已经集成了搜索框了
移步到这里看
https://uniapp.dcloud.io/collocation/pages?id=app-plus
经测试官方已修复安卓的BUG
以下是苹果的
以下是安卓的
操作方法,先配置是下page.json
{
"path": "你的页面",
"style": {
"backgroundColorTop": "#ebebeb",
"backgroundColorBottom": "#ebebeb",
"app-plus": {
"scrollIndicator": "none",
"titleNView": {
"titleText":"",//不要设置标题
"buttons": [{
"text": "取消",
"fontSize": "14"
}]
}
}
}
}
不要设置标题,不然在安卓上就会显示出来,画的盖不住
以下操作在您要画搜索框的页面
在onload引用startcreatview就可以了
设置延迟,不做延迟会出现错误
startcreatview(){
var s = this;
s.TitleTimer = setTimeout(function() {
s.createView();
}, 100);//具体缓迟时间可以按需设置
},
createView() {
clearTimeout(this.TitleTimer);
var s = this;
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
var nTitle = currentWebview.getTitleNView();
nTitle.draw(
[{
"tag": "rect",
"id": "rect",
"color": "#999",
"position": {
"left": "50px",
"right": "50px",
"top": "7px",
"bottom": "7px"
},
"rectStyles": {
"color": "#f6f6f6",
"radius": "30px",
"borderColor": "#999"
}
},
{
"tag": "font",
"id": "font",
"text": "\ue466",
"position": {
"left": "55px",
"width": "30px",
"top": "7px",
"bottom": "7px"
},
"textStyles": {
"size": "13px",
"fontSrc": "/static/uni.ttf",
"color": "#999"
}
},
{
"tag": "input",
"id": "input",
"position": {
"left": "80px",
"right": "70px",
"top": "7px",
"bottom": "7px"
},
"inputStyles": {
"placeholder": "关键字搜索",
"borderRadius": "30px",
"borderWidth": "0px",
"fontSize": "13px",
"type": "search",
"fontSrc": "/static/uni.ttf",
"color": "#999",
onComplete: function(e) {
console.log('点击搜索执行' + e.text)
},
onFocus: function(e) {
console.log('获得焦点')
},
onBlur: function(e) {
console.log('失去焦点')
}
}
}
]
);
},
如果只需要一个假搜索框,把上面代码的inputStyles部份替换为
"textStyles": {
"size": "13px",
"fontSrc": "/static/uni.ttf",
"color": "#999"
}
同时添加监听假搜索框的点击事件nTitle.addEventListener('click', '点击事件', false);
【IOS】官方20180929版本SDK中Swift的Demo
Mac 10.14
Xcode 10.1
1、第一步下载https://github.com/devdawei/libstdc-,并执行install.sh
2、若如下错误
"OBJC_CLASS$_QLPreviewController", referenced from: objc-class-ref in liblibWidget.a(PGRuntime.o)
添加QuickLook.framework
3、若报如下错误
"OBJC_CLASS$_SKStoreProductViewController", referenced from:
objc-class-ref in liblibPDRCore.a(DCH5ScreenAdvertising.o)
"_SKStoreProductParameterITunesItemIdentifier", referenced from:
-[DCH5ScreenAdvertising touchesEnded:withEvent:] in liblibPDRCore.a(DCH5ScreenAdvertising.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
添加 libIAPPay.a liblibPayment.a 两个文件
Mac 10.14
Xcode 10.1
1、第一步下载https://github.com/devdawei/libstdc-,并执行install.sh
2、若如下错误
"OBJC_CLASS$_QLPreviewController", referenced from: objc-class-ref in liblibWidget.a(PGRuntime.o)
添加QuickLook.framework
3、若报如下错误
"OBJC_CLASS$_SKStoreProductViewController", referenced from:
objc-class-ref in liblibPDRCore.a(DCH5ScreenAdvertising.o)
"_SKStoreProductParameterITunesItemIdentifier", referenced from:
-[DCH5ScreenAdvertising touchesEnded:withEvent:] in liblibPDRCore.a(DCH5ScreenAdvertising.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
添加 libIAPPay.a liblibPayment.a 两个文件
收起阅读 »热力图如何在前端实现
关于热力图的实现原理:
一般可大致归纳为以下几个步骤:
1.为每个数据点设置一个从中心向外灰度渐变的圆;
2.利用灰度可以叠加的原理,计算每个像素点数据交叉叠加得到的灰度值;
3.根据每个像素计算得到的灰度值,在一条彩色色带中进行颜色映射,最后对图像进行着色,得到热力图。
当热力图基于前端技术的具体实现时,又可分为以下四个步骤,接下来为大家详细解析:
1.准备热力图数据格式
由于热力图使用场景一般为地图,所以,数据源需要提供经纬度作为位置信息,以及count作为数据点的权重值。
2.在地图上填充数据
基于canvas绘制热力图时,热力图中每个数据点的半径大小会直接影响到热力图的展现效果,所以一般要结合使用地图的缩放级别以及数据精度来进行设置。
3.叠加显示,权重(密度)算法
上面的绘制结果中,因为没有使用到权重值,所以每个数据点圆的中心点灰度值都是1,不能直接用于颜色映射,需要根据离散点缓冲区的叠加来确定热力分布密度。每一个热点都有一个位置和权重,权重越大,则该点越显著,也就代表其渐变的一个衰变因素,此时,我们需要根据不同的count设置出不同的alpha值。本文主要根据count最小值对应alpha0,最大值对应1的映射计算方式,求得每个数据点,从而绘制出alpha:
4.颜色映射
根据画布上每个像素点累计得到的灰度值,可以从彩色映射色带中得到对应位置的颜色。
那么如何得到画布上每个像素点的信息呢?可以使用canvas提供的getImageData()方法,返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。需要注意的是,ImageData对象中的每个像素,都包含RGBA四项信息:
关于热力图的实现原理:
一般可大致归纳为以下几个步骤:
1.为每个数据点设置一个从中心向外灰度渐变的圆;
2.利用灰度可以叠加的原理,计算每个像素点数据交叉叠加得到的灰度值;
3.根据每个像素计算得到的灰度值,在一条彩色色带中进行颜色映射,最后对图像进行着色,得到热力图。
当热力图基于前端技术的具体实现时,又可分为以下四个步骤,接下来为大家详细解析:
1.准备热力图数据格式
由于热力图使用场景一般为地图,所以,数据源需要提供经纬度作为位置信息,以及count作为数据点的权重值。
2.在地图上填充数据
基于canvas绘制热力图时,热力图中每个数据点的半径大小会直接影响到热力图的展现效果,所以一般要结合使用地图的缩放级别以及数据精度来进行设置。
3.叠加显示,权重(密度)算法
上面的绘制结果中,因为没有使用到权重值,所以每个数据点圆的中心点灰度值都是1,不能直接用于颜色映射,需要根据离散点缓冲区的叠加来确定热力分布密度。每一个热点都有一个位置和权重,权重越大,则该点越显著,也就代表其渐变的一个衰变因素,此时,我们需要根据不同的count设置出不同的alpha值。本文主要根据count最小值对应alpha0,最大值对应1的映射计算方式,求得每个数据点,从而绘制出alpha:
4.颜色映射
根据画布上每个像素点累计得到的灰度值,可以从彩色映射色带中得到对应位置的颜色。
那么如何得到画布上每个像素点的信息呢?可以使用canvas提供的getImageData()方法,返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。需要注意的是,ImageData对象中的每个像素,都包含RGBA四项信息:
mui框架做的粉红风格服装包包商城网站模板
mui框架做的粉红风格服装包包商城网站模板
这个风格时尚美观,比较适合卖女性商品
喜欢的朋友可以下载研究研究
下载地址:http://www.sucaihuo.com/templates/4490.html
mui框架做的粉红风格服装包包商城网站模板
这个风格时尚美观,比较适合卖女性商品
喜欢的朋友可以下载研究研究
下载地址:http://www.sucaihuo.com/templates/4490.html
关于JAVA开发HBuillder的微信支付(获取预支付订单后调起微信支付),经验分享
本项目主要是集成微信支付,android APP请求java服务器获取预支付订单后调起微信支付。代码简单,亲测可用!
源码demo下载地址:
微信支付java服务端demo
主要是用于替换HBuillder H5+模板中的plus/payment.html文件中如下代码
var PAYSERVER='http://demo.dcloud.net.cn/payment/?payid=';
本项目主要是集成微信支付,android APP请求java服务器获取预支付订单后调起微信支付。代码简单,亲测可用!
源码demo下载地址:
微信支付java服务端demo
主要是用于替换HBuillder H5+模板中的plus/payment.html文件中如下代码
var PAYSERVER='http://demo.dcloud.net.cn/payment/?payid=';
解决mui下拉刷新使用mui(querySelector).pullRefresh().setStopped(false);禁止和恢复的问题
把你们的mui.min.js的源码部分修改如下
修改前
disablePullupToRefresh: function() {
this._initPullupRefresh(), this.bottomPocket.className = "mui-pull-bottom-pocket " e, window.removeEventListener("dragup", this)
},
enablePullupToRefresh: function() {
this._initPullupRefresh(), this.bottomPocket.classList.remove(e), this.pullCaption.className = g " " h, this.pullCaption.innerHTML = this.options.up.contentdown, b.addEventListener("plusscrollbottom", this), window.addEventListener("dragup", this)
}
修改后
disablePullupToRefresh: function() {
this._initPullupRefresh(), this.topPocket.className = "mui-pull-bottom-pocket " e, window.removeEventListener("dragup", this)
},
enablePullupToRefresh: function() {
this._initPullupRefresh(), this.topPocket.classList.remove(e), this.topCaption.className = g " " h, this.topCaption.innerHTML = this.options.up.contentdown, b.addEventListener("plusscrollbottom", this), window.addEventListener("dragup", this)
}
第一次发帖,有点激动。
把你们的mui.min.js的源码部分修改如下
修改前
disablePullupToRefresh: function() {
this._initPullupRefresh(), this.bottomPocket.className = "mui-pull-bottom-pocket " e, window.removeEventListener("dragup", this)
},
enablePullupToRefresh: function() {
this._initPullupRefresh(), this.bottomPocket.classList.remove(e), this.pullCaption.className = g " " h, this.pullCaption.innerHTML = this.options.up.contentdown, b.addEventListener("plusscrollbottom", this), window.addEventListener("dragup", this)
}
修改后
disablePullupToRefresh: function() {
this._initPullupRefresh(), this.topPocket.className = "mui-pull-bottom-pocket " e, window.removeEventListener("dragup", this)
},
enablePullupToRefresh: function() {
this._initPullupRefresh(), this.topPocket.classList.remove(e), this.topCaption.className = g " " h, this.topCaption.innerHTML = this.options.up.contentdown, b.addEventListener("plusscrollbottom", this), window.addEventListener("dragup", this)
}
第一次发帖,有点激动。
收起阅读 »关于IOS缓存本地图片读取显示空白的问题解决办法
说一下我的应用场景:
网络加载图片太多,所以考虑使用本地缓存。图片下载到本地后使用本地路径。
用到的接口:
// 检查本地是否已经存储
plus.io.resolveLocalFileSystemURL
// 下载文件
plus.downloader.createDownload
// 下载失败删除文件
plus.io.resolveLocalFileSystemURL
存储地址使用:_downloads/xxx.jpg
得到的结果如楼主一样,安卓可以读取本地文件,iOS返回空白。
在群里问了半天,最后群主说建议使用uni的API
尝试方法:
// 下载文件
uni.downloadFile(OBJECT)
// 保存文件
uni.saveFile(OBJECT)
通过这种方法,确实可以显示图片,但是有一个问题,就是无法自定义文件名,
下载的临时路径,文件名是使用时间戳命名的,存储到本地后也只能是这个文件名,如果我们要监测缓存,就需要去维护一个网络图片与本地图片的map关系,而且缓存删除更新,都需要更新这个map文件,相对复杂。
思考:为什么uni.saveFile返回的路径可以显示,是不是ios的相对路径不一样?
通过打印,发现uni.saveFile存储到路径在_doc/目录下,尝试把存储路径从_downloads改为_doc后,发现,问题解决了!
原来如此。
相关文档 相对路径URL
说一下我的应用场景:
网络加载图片太多,所以考虑使用本地缓存。图片下载到本地后使用本地路径。
用到的接口:
// 检查本地是否已经存储
plus.io.resolveLocalFileSystemURL
// 下载文件
plus.downloader.createDownload
// 下载失败删除文件
plus.io.resolveLocalFileSystemURL
存储地址使用:_downloads/xxx.jpg
得到的结果如楼主一样,安卓可以读取本地文件,iOS返回空白。
在群里问了半天,最后群主说建议使用uni的API
尝试方法:
// 下载文件
uni.downloadFile(OBJECT)
// 保存文件
uni.saveFile(OBJECT)
通过这种方法,确实可以显示图片,但是有一个问题,就是无法自定义文件名,
下载的临时路径,文件名是使用时间戳命名的,存储到本地后也只能是这个文件名,如果我们要监测缓存,就需要去维护一个网络图片与本地图片的map关系,而且缓存删除更新,都需要更新这个map文件,相对复杂。
思考:为什么uni.saveFile返回的路径可以显示,是不是ios的相对路径不一样?
通过打印,发现uni.saveFile存储到路径在_doc/目录下,尝试把存储路径从_downloads改为_doc后,发现,问题解决了!
原来如此。
相关文档 相对路径URL
收起阅读 »Koa nuxt最佳实践前篇
从demo快速上手
首先我们下载demo
git clone https://github.com/doodooke/doodoo-nuxt-demo.git
进入目录安装依赖和启动
yarn install && npm run dev
访问浏览器http://127.0.0.1:3000

从demo快速上手
首先我们下载demo
git clone https://github.com/doodooke/doodoo-nuxt-demo.git
进入目录安装依赖和启动
yarn install && npm run dev
访问浏览器http://127.0.0.1:3000






