
图片并排排版、src中使用js等小代码
调用系统相册中图片js:
<script language="javascript">
document.getElementById('img_ho').src = plus.io.resolveLocalFileSystemURL("_www/hengping.jpg");
document.getElementById('img_vo').src = plus.io.resolveLocalFileSystemURL("_www/shuping.jpg");
</script>
并排显示在页面上:
<table><tr>
<td><a href="vo.html" target="_parent" title="点击获取"><img id="img_vo" src="?" onerror="this.src='images/nopic.png';this.οnerrοr=null" border=0/></a></td>
<td><a href="ho.html" target="_parent" title="点击获取"><img id="img_ho" src="?" onerror="this.src='images/nopic.png';this.οnerrοr=null" border=0/></a></td>
</tr></table>
调用系统相册中图片js:
<script language="javascript">
document.getElementById('img_ho').src = plus.io.resolveLocalFileSystemURL("_www/hengping.jpg");
document.getElementById('img_vo').src = plus.io.resolveLocalFileSystemURL("_www/shuping.jpg");
</script>
并排显示在页面上:
<table><tr>
<td><a href="vo.html" target="_parent" title="点击获取"><img id="img_vo" src="?" onerror="this.src='images/nopic.png';this.οnerrοr=null" border=0/></a></td>
<td><a href="ho.html" target="_parent" title="点击获取"><img id="img_ho" src="?" onerror="this.src='images/nopic.png';this.οnerrοr=null" border=0/></a></td>
</tr></table>
收起阅读 »

js_to_APP手机不能下载base格式图片的处理
js在pc端正常下载base图片,使用HBuilder生成APP后下载失败,原因是手机浏览器不能直接下载base64位图片的文件,使用plus进行直接转存,代码如下:
image对象为base64对象,调用方法为 saveBasePic(base,"ceshi.jpg"),切记在使用HB生成APP时注意在配置文件中修改runmode为liberate模式,normal测试是有问题的。
"runmode" : "liberate", /应用的首次启动运行模式,可取liberate或normal,liberate模式在第一次启动时将解压应用资源(Android平台File API才可正常访问_www目录)/
function saveBasePic (image,imageName){
var b = new plus.nativeObj.Bitmap();
var path = plus.io.convertLocalFileSystemURL("_www/"+imageName);//将文件短路径转换成本地完整路径
alert(path);
b.loadBase64Data(image,function(){
//alert("创建成功");
b.save("_www/"+imageName,{overwrite:true},function(){
//console.log("保存成功");
plus.gallery.save("_www/"+imageName, function () {
alert( "保存图片到相册成功" );
event_b(true,path);
},function(){
alert( "保存图片到相册失败" );
event_b(false,path);
});
},function(){
alert("保存图片失败!");
event_b(false,path);
});
},function(){
alert("写入文件失败,确认APP是否具有权限!");
event_b(false,path);
});
}
js在pc端正常下载base图片,使用HBuilder生成APP后下载失败,原因是手机浏览器不能直接下载base64位图片的文件,使用plus进行直接转存,代码如下:
image对象为base64对象,调用方法为 saveBasePic(base,"ceshi.jpg"),切记在使用HB生成APP时注意在配置文件中修改runmode为liberate模式,normal测试是有问题的。
"runmode" : "liberate", /应用的首次启动运行模式,可取liberate或normal,liberate模式在第一次启动时将解压应用资源(Android平台File API才可正常访问_www目录)/
function saveBasePic (image,imageName){
var b = new plus.nativeObj.Bitmap();
var path = plus.io.convertLocalFileSystemURL("_www/"+imageName);//将文件短路径转换成本地完整路径
alert(path);
b.loadBase64Data(image,function(){
//alert("创建成功");
b.save("_www/"+imageName,{overwrite:true},function(){
//console.log("保存成功");
plus.gallery.save("_www/"+imageName, function () {
alert( "保存图片到相册成功" );
event_b(true,path);
},function(){
alert( "保存图片到相册失败" );
event_b(false,path);
});
},function(){
alert("保存图片失败!");
event_b(false,path);
});
},function(){
alert("写入文件失败,确认APP是否具有权限!");
event_b(false,path);
});
}
收起阅读 »

uniapp数字键盘
插件预览图

使用教程
1.插件代码拷贝
- 下载后把components目录下/digitKeyboard/digitKeyboard.vue文件拷贝到自己项目目录下
2.插件全局配置
- 在项目里main.js中配置如下代码
import digitKeyboard from './components/digitKeyboard/digitKeyboard.vue'
Vue.component('digitKeyboard', digitKeyboard)
3.插件使用
- vue页面使用
<template>
<view>
<!-- 数字键盘 -->
<digitKeyboard v-if="isShowKeyboardWindow" :inputVal="inputVal" :label="label" @cancel="isShowKeyboardWindow = false" @confirm="keyboardConfirm"/>
</view>
</template>
<script>
export default {
data() {
return {
inputVal:'1',
label:'现金支付',
isShowKeyboardWindow:true,//是否显示键盘窗口
};
},
methods:{
keyboardConfirm(val){
console.log(val)
uni.showToast({
title:'当前输入的值:'+val,
icon:'none',
duration:4000
})
}
}
}
</script>
<style lang="less">
</style>
兼容性
uni-app项目中使用都兼容
插件预览图
使用教程
1.插件代码拷贝
- 下载后把components目录下/digitKeyboard/digitKeyboard.vue文件拷贝到自己项目目录下
2.插件全局配置
- 在项目里main.js中配置如下代码
import digitKeyboard from './components/digitKeyboard/digitKeyboard.vue'
Vue.component('digitKeyboard', digitKeyboard)
3.插件使用
- vue页面使用
<template>
<view>
<!-- 数字键盘 -->
<digitKeyboard v-if="isShowKeyboardWindow" :inputVal="inputVal" :label="label" @cancel="isShowKeyboardWindow = false" @confirm="keyboardConfirm"/>
</view>
</template>
<script>
export default {
data() {
return {
inputVal:'1',
label:'现金支付',
isShowKeyboardWindow:true,//是否显示键盘窗口
};
},
methods:{
keyboardConfirm(val){
console.log(val)
uni.showToast({
title:'当前输入的值:'+val,
icon:'none',
duration:4000
})
}
}
}
</script>
<style lang="less">
</style>
兼容性
uni-app项目中使用都兼容
收起阅读 »
uni-app编译为小程序的时候报,v-slot 不支持动态插槽名
uni-app编译为小程序的时候报,v-slot 不支持动态插槽名,我记得我写微信小程序的时候slot是支持slot动态切换的呀?h5下正常
uni-app编译为小程序的时候报,v-slot 不支持动态插槽名,我记得我写微信小程序的时候slot是支持slot动态切换的呀?h5下正常

图片添加文字水印-安卓
export function addWatermark(tempFilePath, gText) {
let Resources = plus.android.importClass('android.content.res.Resources')
let Bitmap = plus.android.importClass('android.graphics.Bitmap')
let BitmapFactory = plus.android.importClass('android.graphics.BitmapFactory')
let Canvas = plus.android.importClass('android.graphics.Canvas')
let Paint = plus.android.importClass('android.graphics.Paint')
let Color = plus.android.importClass('android.graphics.Color')
let TextPaint = plus.android.importClass('android.text.TextPaint')
let Layout = plus.android.importClass('android.text.Layout')
let StaticLayout = plus.android.importClass('android.text.StaticLayout')
let BufferedOutputStream = plus.android.importClass('java.io.BufferedOutputStream')
let File = plus.android.importClass('java.io.File')
let FileOutputStream = plus.android.importClass('java.io.FileOutputStream')
let filePath = plus.io.convertLocalFileSystemURL(tempFilePath)
let options = new BitmapFactory.Options()
options.inPreferredConfig = Bitmap.Config.ARGB_8888;
let bitmap = BitmapFactory.decodeFile(filePath, options);
// 画图
let main = plus.android.runtimeMainActivity()
let application = main.getApplication()
let resources = application.getResources()
let displayMetrics = resources.getDisplayMetrics()
let scale = plus.android.getAttribute(displayMetrics, 'density' )
let bitmapConfig = bitmap.getConfig();
bitmapConfig = Bitmap.Config.ARGB_8888;
bitmap = bitmap.copy(bitmapConfig, true);
let canvas = new Canvas(bitmap);
let paint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
// 设置颜色
paint.setColor(Color.WHITE);
paint.setTextSize((16 * scale));
paint.setShadowLayer(1, 0, 1, Color.WHITE);
let textWidth = canvas.getWidth() - (16 * scale);
// text-align: ALIGN_NORMAL,ALIGN_OPPOSITE,ALIGN_CENTER,ALIGN_LEFT,ALIGN_RIGHT;
let textLayout = new StaticLayout(
gText, paint, textWidth, Layout.Alignment.ALIGN_CENTER, 1, 0, false);
let textHeight = textLayout.getHeight();
canvas.save();
// 计算画的位置
canvas.translate(0, canvas.getHeight() - textHeight);
textLayout.draw(canvas);
canvas.restore();
let file = new File(filePath);
let bos = new BufferedOutputStream(new FileOutputStream(file));
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, bos);
bos.flush();
bos.close();
}
叠加地址和日期 使用\n可以折行,叠加位置可以自己计算
addWaterMark(tempFilePath) {
return new Promise((resolve, reject) => {
uni.getLocation({
geocode: true,
success: ({ address: { city, district, street, streetNum, poiName } }) => {
const address = city + district + street + streetNum + poiName
const date = dayjs().format('YYYY-MM-DD HH:mm')
addWatermark(tempFilePath, `${address}\n${date}`)
resolve(tempFilePath)
}
})
})
}
export function addWatermark(tempFilePath, gText) {
let Resources = plus.android.importClass('android.content.res.Resources')
let Bitmap = plus.android.importClass('android.graphics.Bitmap')
let BitmapFactory = plus.android.importClass('android.graphics.BitmapFactory')
let Canvas = plus.android.importClass('android.graphics.Canvas')
let Paint = plus.android.importClass('android.graphics.Paint')
let Color = plus.android.importClass('android.graphics.Color')
let TextPaint = plus.android.importClass('android.text.TextPaint')
let Layout = plus.android.importClass('android.text.Layout')
let StaticLayout = plus.android.importClass('android.text.StaticLayout')
let BufferedOutputStream = plus.android.importClass('java.io.BufferedOutputStream')
let File = plus.android.importClass('java.io.File')
let FileOutputStream = plus.android.importClass('java.io.FileOutputStream')
let filePath = plus.io.convertLocalFileSystemURL(tempFilePath)
let options = new BitmapFactory.Options()
options.inPreferredConfig = Bitmap.Config.ARGB_8888;
let bitmap = BitmapFactory.decodeFile(filePath, options);
// 画图
let main = plus.android.runtimeMainActivity()
let application = main.getApplication()
let resources = application.getResources()
let displayMetrics = resources.getDisplayMetrics()
let scale = plus.android.getAttribute(displayMetrics, 'density' )
let bitmapConfig = bitmap.getConfig();
bitmapConfig = Bitmap.Config.ARGB_8888;
bitmap = bitmap.copy(bitmapConfig, true);
let canvas = new Canvas(bitmap);
let paint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
// 设置颜色
paint.setColor(Color.WHITE);
paint.setTextSize((16 * scale));
paint.setShadowLayer(1, 0, 1, Color.WHITE);
let textWidth = canvas.getWidth() - (16 * scale);
// text-align: ALIGN_NORMAL,ALIGN_OPPOSITE,ALIGN_CENTER,ALIGN_LEFT,ALIGN_RIGHT;
let textLayout = new StaticLayout(
gText, paint, textWidth, Layout.Alignment.ALIGN_CENTER, 1, 0, false);
let textHeight = textLayout.getHeight();
canvas.save();
// 计算画的位置
canvas.translate(0, canvas.getHeight() - textHeight);
textLayout.draw(canvas);
canvas.restore();
let file = new File(filePath);
let bos = new BufferedOutputStream(new FileOutputStream(file));
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, bos);
bos.flush();
bos.close();
}
叠加地址和日期 使用\n可以折行,叠加位置可以自己计算
addWaterMark(tempFilePath) {
return new Promise((resolve, reject) => {
uni.getLocation({
geocode: true,
success: ({ address: { city, district, street, streetNum, poiName } }) => {
const address = city + district + street + streetNum + poiName
const date = dayjs().format('YYYY-MM-DD HH:mm')
addWatermark(tempFilePath, `${address}\n${date}`)
resolve(tempFilePath)
}
})
})
}
收起阅读 »

iOS开发者账号到期续费流程(2020)
iOS开发者账号在到期的前一个月即可续费,如果到期没有续费APP将会下架,在App Store无法搜索
1、登录苹果开发者中心
有这个红色提示说明该续费了
会要求先到Apple Developer这个应用验证下资料才能进入续费页面。
2、在苹果手机App Store搜索Apple Developer并安装上(需要iOS12.4系统以上,不然搜不到这个app)
3、登录苹果账号填写相资料验证(先到手机设置那边登录开发者账号)
3、输入申请人姓名、身份证号、电话(中文输入)
人脸识别,拍个自拍照
4、验证好了资料返回苹果开发者中心
点击红色处,进入付款页面。
输入visa信用卡信息及地址信息!
确认付款提示下图,即完成了付款!
iOS上架辅助工具分享推荐
Appuploader可以辅助在Windows、linux或mac系统直接申请iOS证书p12,及上传ipa到App Store,最方便在Windows开发上架没有苹果Mac电脑的开发者!
iOS开发者账号在到期的前一个月即可续费,如果到期没有续费APP将会下架,在App Store无法搜索
1、登录苹果开发者中心
有这个红色提示说明该续费了
会要求先到Apple Developer这个应用验证下资料才能进入续费页面。
2、在苹果手机App Store搜索Apple Developer并安装上(需要iOS12.4系统以上,不然搜不到这个app)
3、登录苹果账号填写相资料验证(先到手机设置那边登录开发者账号)
3、输入申请人姓名、身份证号、电话(中文输入)
人脸识别,拍个自拍照
4、验证好了资料返回苹果开发者中心
点击红色处,进入付款页面。
输入visa信用卡信息及地址信息!
确认付款提示下图,即完成了付款!
iOS上架辅助工具分享推荐
Appuploader可以辅助在Windows、linux或mac系统直接申请iOS证书p12,及上传ipa到App Store,最方便在Windows开发上架没有苹果Mac电脑的开发者!

uni-app支持快应用-webview版,欢迎体验
快应用是基于手机硬件平台的新型应用形态,标准由国内主流手机厂商联合制定。
快应用可以认为是手机硬件厂商的小程序,但和微信、支付宝等小程序又有较大不同:
- 微信、支付宝、百度、字节跳动等各家小程序架构设计接近,开发规范接近,都是基于webview渲染,布局方式一致,开发者开发不同小程序时,学习成本较低,且可借助跨端框架或转换器快速实现多平台发行。
- 快应用是单独的架构设计,单独的开发规范,基于 Native 原生渲染(相比web,布局上有更多限制),有额外的学习成本,且项目代码不易与 Web、小程序等相互复用
这些差异,严重制约了快应用生态的发展,参与的开发者少,提交的快应用的数量也很少,不过几千款,与微信的百万级应用数差距很大。
为此,vivo、华为等厂积极探索,推出快应用(webview 版)(为叙述方便,下文统称为「快应用」),它同小程序一样,采取 Webview 渲染方式,使得开发者没有额外学习成本(有 Web、小程序开发经验即可),能够使用 Web 上各种能力,同时令用户有良好应用访问体验。
uni-app在第一时间跟进了快应用新引擎适配,目前已在 uni-app 的 vue-cli 版中,和HBuilderX 2.7.12+版本,发布了对快应用-webview版的适配。
创建项目
-
在HBuilderX 2.7.12+中新建uni-app项目,可以直接运行到快应用。需先按照快应用的开发工具,分快应用联盟版和快应用华为版,需要分别安装。
-
cli方式创建项目
# npm script
# 全局安装vue-cli
$ npm install -g @vue/cli
# 创建uni-app项目,会提示选择项目模板,初次接触建议选择 hello uni-app 模板
$ vue create -p dcloudio/uni-preset-vue#alpha my-project
# 进入项目目录
$ cd my-project
# dev 模式,编译预览/联盟(仅vivo oppo支持)
$ npm run dev:quickapp-webview-union
# build 模式,发行打包
$ npm run build:quickapp-webview-union
# dev 模式,编译预览/华为
$ npm run dev:quickapp-webview-huawei
# build 模式,发行打包
$ npm run build:quickapp-webview-huawei
编译目录为: dist\(dev|build)\quickapp-webview-union
预览测试
-
下载开发者工具
- 快应用联盟:直接从快应用联盟官网下载开发工具,详见:https://www.quickapp.cn/docCenter/IDEPublicity
- 华为快应用:从华为官网下载,详见:安装华为快应用IDE;
-
启动开发者工具,打开编译后的项目目录:
dist\(dev|build)\quickapp-webview
-
在pc模拟器上,可直接看到开发效果。
-
手机真机预览方式:将手机与电脑成功连接,并打开“开发者调试”模式。点击顶部菜单的
运行
按钮,开发者工具会通过USB自动安装调试 apk 到手机上,并自动启动基座进行测试
发布
vivo
https://dev.vivo.com.cn/distribute/quickApp
华为
https://developer.huawei.com/consumer/cn/console
manifest.json 配置
// vivo / oppo
"quickapp-webview-union": {
"icon": "/static/logo.png",
"package": "com.example.demo",
"minPlatformVersion": 1062, //最小平台支持 vivo/oppo >= 1062
"versionName": "1.0.0",
"versionCode": 1,
},
// 华为
"quickapp-webview-huawei" : {
"icon" : "/static/logo.png",
"package" : "com.example.demo",
"minPlatformVersion" : 1070,//最小平台支持 >= 1070
"versionName" : "1.0.0",
"versionCode" : 1
}
sign 证书配置
sign放到项目根目录,编译后自动拷贝到 .quickapp/sign
,每次编译完成时会删除.quickapp,避免证书丢失
快应用平台文档(平台独有api使用条件编译调用)
华为:https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-frame-overview
vivo/oppo:https://qapp-chimera.vivo.com.cn/framework/index.html
欢迎共研
所有快应用适配代码,均已开源在github,欢迎star鼓励!也欢迎加入QQ群交流:148203425。
如果你对原生渲染的快应用适配感兴趣,也欢迎参与社区共研,详见 https://ask.dcloud.net.cn/article/37145。
快应用是基于手机硬件平台的新型应用形态,标准由国内主流手机厂商联合制定。
快应用可以认为是手机硬件厂商的小程序,但和微信、支付宝等小程序又有较大不同:
- 微信、支付宝、百度、字节跳动等各家小程序架构设计接近,开发规范接近,都是基于webview渲染,布局方式一致,开发者开发不同小程序时,学习成本较低,且可借助跨端框架或转换器快速实现多平台发行。
- 快应用是单独的架构设计,单独的开发规范,基于 Native 原生渲染(相比web,布局上有更多限制),有额外的学习成本,且项目代码不易与 Web、小程序等相互复用
这些差异,严重制约了快应用生态的发展,参与的开发者少,提交的快应用的数量也很少,不过几千款,与微信的百万级应用数差距很大。
为此,vivo、华为等厂积极探索,推出快应用(webview 版)(为叙述方便,下文统称为「快应用」),它同小程序一样,采取 Webview 渲染方式,使得开发者没有额外学习成本(有 Web、小程序开发经验即可),能够使用 Web 上各种能力,同时令用户有良好应用访问体验。
uni-app在第一时间跟进了快应用新引擎适配,目前已在 uni-app 的 vue-cli 版中,和HBuilderX 2.7.12+版本,发布了对快应用-webview版的适配。
创建项目
-
在HBuilderX 2.7.12+中新建uni-app项目,可以直接运行到快应用。需先按照快应用的开发工具,分快应用联盟版和快应用华为版,需要分别安装。
-
cli方式创建项目
# npm script
# 全局安装vue-cli
$ npm install -g @vue/cli
# 创建uni-app项目,会提示选择项目模板,初次接触建议选择 hello uni-app 模板
$ vue create -p dcloudio/uni-preset-vue#alpha my-project
# 进入项目目录
$ cd my-project
# dev 模式,编译预览/联盟(仅vivo oppo支持)
$ npm run dev:quickapp-webview-union
# build 模式,发行打包
$ npm run build:quickapp-webview-union
# dev 模式,编译预览/华为
$ npm run dev:quickapp-webview-huawei
# build 模式,发行打包
$ npm run build:quickapp-webview-huawei
编译目录为: dist\(dev|build)\quickapp-webview-union
预览测试
-
下载开发者工具
- 快应用联盟:直接从快应用联盟官网下载开发工具,详见:https://www.quickapp.cn/docCenter/IDEPublicity
- 华为快应用:从华为官网下载,详见:安装华为快应用IDE;
-
启动开发者工具,打开编译后的项目目录:
dist\(dev|build)\quickapp-webview
-
在pc模拟器上,可直接看到开发效果。
-
手机真机预览方式:将手机与电脑成功连接,并打开“开发者调试”模式。点击顶部菜单的
运行
按钮,开发者工具会通过USB自动安装调试 apk 到手机上,并自动启动基座进行测试
发布
vivo
https://dev.vivo.com.cn/distribute/quickApp
华为
https://developer.huawei.com/consumer/cn/console
manifest.json 配置
// vivo / oppo
"quickapp-webview-union": {
"icon": "/static/logo.png",
"package": "com.example.demo",
"minPlatformVersion": 1062, //最小平台支持 vivo/oppo >= 1062
"versionName": "1.0.0",
"versionCode": 1,
},
// 华为
"quickapp-webview-huawei" : {
"icon" : "/static/logo.png",
"package" : "com.example.demo",
"minPlatformVersion" : 1070,//最小平台支持 >= 1070
"versionName" : "1.0.0",
"versionCode" : 1
}
sign 证书配置
sign放到项目根目录,编译后自动拷贝到 .quickapp/sign
,每次编译完成时会删除.quickapp,避免证书丢失
快应用平台文档(平台独有api使用条件编译调用)
华为:https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-frame-overview
vivo/oppo:https://qapp-chimera.vivo.com.cn/framework/index.html
欢迎共研
所有快应用适配代码,均已开源在github,欢迎star鼓励!也欢迎加入QQ群交流:148203425。
如果你对原生渲染的快应用适配感兴趣,也欢迎参与社区共研,详见 https://ask.dcloud.net.cn/article/37145。
收起阅读 »
解决scroll-view下拉刷新无法正常恢复的问题
refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore" scrolltolower="loadMore"
1.通过程序将triggered设为true时,将触发onRefresh;
2.不管triggered为何值,在界面中下拉,也会触发onRefresh,但不会自动改变triggered值(不能双向绑定,这是问题的根本原因);
3.onRefresh执行完毕,不会自动触发onRestore(这是问题的表现),使得刷新图标一直显示,必须是triggered由true变为false,才会触发onRestore并隐藏刷新图标;如果triggered一直为false,或一直为true,都不会触发。
解决办法:
1.在进入onRefresh后,如果triggered为false,则将它置为true,当执行完你的刷新操作(通常是获取新的数据)后,将triggered置为false。
2.由于上一步中将triggered置为true,会再次触发onRefresh,故需再增加一个_freshing,表示是否正在执行刷新操作,在onRefresh中做判断,如_freshing为true,不执行刷新操作直接返回。
如果scroll-view有多个,要每个用自己的 triggered和refreshing来控制。
代码如下,和官方差不多,注意有关键的几个细节不同。
<script>
export default {
data() {
return {
triggered: false,
_freshing: false
}
},
onLoad() {
this._freshing = false;
setTimeout(() => {
this.triggered = true;//触发onRefresh来加载自己的数据,如果不用这种方式,不要在此改变triggered的值
}, 1000)
},
methods: {
onPulling(e) {
console.log("onpulling", e);
},
onRefresh() {
if (this._freshing) return;
this._freshing = true;
if (!this.triggered)//界面下拉触发,triggered可能不是true,要设为true
this.triggered = true;
setTimeout(() => {
this.triggered = false;//触发onRestore,并关闭刷新图标
this._freshing = false;
}, 3000)
},
onRestore() {
console.log("onRestore");
},
onAbort() {
console.log("onAbort");
}
}
}
</script>
refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore" scrolltolower="loadMore"
1.通过程序将triggered设为true时,将触发onRefresh;
2.不管triggered为何值,在界面中下拉,也会触发onRefresh,但不会自动改变triggered值(不能双向绑定,这是问题的根本原因);
3.onRefresh执行完毕,不会自动触发onRestore(这是问题的表现),使得刷新图标一直显示,必须是triggered由true变为false,才会触发onRestore并隐藏刷新图标;如果triggered一直为false,或一直为true,都不会触发。
解决办法:
1.在进入onRefresh后,如果triggered为false,则将它置为true,当执行完你的刷新操作(通常是获取新的数据)后,将triggered置为false。
2.由于上一步中将triggered置为true,会再次触发onRefresh,故需再增加一个_freshing,表示是否正在执行刷新操作,在onRefresh中做判断,如_freshing为true,不执行刷新操作直接返回。
如果scroll-view有多个,要每个用自己的 triggered和refreshing来控制。
代码如下,和官方差不多,注意有关键的几个细节不同。
<script>
export default {
data() {
return {
triggered: false,
_freshing: false
}
},
onLoad() {
this._freshing = false;
setTimeout(() => {
this.triggered = true;//触发onRefresh来加载自己的数据,如果不用这种方式,不要在此改变triggered的值
}, 1000)
},
methods: {
onPulling(e) {
console.log("onpulling", e);
},
onRefresh() {
if (this._freshing) return;
this._freshing = true;
if (!this.triggered)//界面下拉触发,triggered可能不是true,要设为true
this.triggered = true;
setTimeout(() => {
this.triggered = false;//触发onRestore,并关闭刷新图标
this._freshing = false;
}, 3000)
},
onRestore() {
console.log("onRestore");
},
onAbort() {
console.log("onAbort");
}
}
}
</script>
收起阅读 »

uniapp项目在微信和企业微信浏览器获取经纬度
uniapp项目在微信和企业微信浏览器获取经纬度
前段时间开发一个uniapp项目遇到了问题,在微信和企业微信没法调起获取地理位置的方法,uniapp官方方法uni.getLocation,但在pc和普通浏览器可以调起获取地位置的提示,查了很多都不管用,没有考虑用微信的SDK,经过一下午的尝试,找到了一种解决方式。
解决办法
manifest.json文件里配置腾讯地图的key
再把 uni.getLocation 方法的 type 改成 <kbd>gcj02</kbd> 类型,就可以了
// 获取位置
getLocation() {
let that = this;
uni.showLoading({
title: '加载中'
});
// console.log("获取经纬度")
uni.getLocation({
type:'gcj02',
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
},
fail:function(res){
uni.showToast({
title: '获取位置失败',
icon:'none',
duration: 2000
});
}
});
setTimeout(function () {
uni.hideLoading();
}, 2000);
},
uniapp项目在微信和企业微信浏览器获取经纬度
前段时间开发一个uniapp项目遇到了问题,在微信和企业微信没法调起获取地理位置的方法,uniapp官方方法uni.getLocation,但在pc和普通浏览器可以调起获取地位置的提示,查了很多都不管用,没有考虑用微信的SDK,经过一下午的尝试,找到了一种解决方式。
解决办法
manifest.json文件里配置腾讯地图的key
再把 uni.getLocation 方法的 type 改成 <kbd>gcj02</kbd> 类型,就可以了
// 获取位置
getLocation() {
let that = this;
uni.showLoading({
title: '加载中'
});
// console.log("获取经纬度")
uni.getLocation({
type:'gcj02',
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
},
fail:function(res){
uni.showToast({
title: '获取位置失败',
icon:'none',
duration: 2000
});
}
});
setTimeout(function () {
uni.hideLoading();
}, 2000);
},
收起阅读 »

uni-app转微信小程序中,.wxs文件中不支持跨端编译~因为微信小程序里不支持new Date
uni-app转微信小程序中,.wxs文件中不支持跨端编译~因为微信小程序里不支持new Date,
var lessTime = function(time,num = 0,show_firstDay = true) {
if(num > 0 || !show_firstDay) {
return true;
}
if(!time) {
return false;
}
//#ifdef APP-PLUS
var date = new Date();
//#endif
//#ifdef MP-WEIXIN
var date = getDate();
//#endif
var hour = parseFloat(time.split(':')[0]);
var minute = parseFloat(time.split(':')[1]);
if(hour > date.getHours() || (hour == date.getHours() && minute - date.getMinutes() >= 20)) {
return true
}
return false;
}
uni-app转微信小程序中,.wxs文件中不支持跨端编译~因为微信小程序里不支持new Date,
var lessTime = function(time,num = 0,show_firstDay = true) {
if(num > 0 || !show_firstDay) {
return true;
}
if(!time) {
return false;
}
//#ifdef APP-PLUS
var date = new Date();
//#endif
//#ifdef MP-WEIXIN
var date = getDate();
//#endif
var hour = parseFloat(time.split(':')[0]);
var minute = parseFloat(time.split(':')[1]);
if(hour > date.getHours() || (hour == date.getHours() && minute - date.getMinutes() >= 20)) {
return true
}
return false;
}
收起阅读 »