uniapp的一些总结(持续补充修改)
1.使用上拉加载,下拉刷新.1.推荐mecroll(有用到选项卡上拉,下拉)移步官网:http://www.mescroll.com/index.html?v=202003052.如果页面中选项卡的tab分类较多,建议使用nvue去做,利用官方提供的list组件。长列表滚动,上拉、下拉。使用vue性能不太好。3.使用原生上拉,下拉性能最好,需要注意布局问题.使用图表1.推荐ucharts如果封装自
- uniapp第三方组件库(很成熟)
- 使用上拉加载,下拉刷新.
1.推荐mecroll(有用到选项卡上拉,下拉)
移步官网:http://www.mescroll.com/index.html?v=20200305
2.如果页面中选项卡的tab分类较多,建议使用nvue去做,利用官方提供的list组件。长列表滚动,上拉、下拉。使用vue性能不太好。
3.使用原生上拉,下拉性能最好,需要注意布局问题.
4.scroll-view 自定义下拉上拉
- 使用图表
1.推荐ucharts
如果封装自定义组件,在一个页面生成多个图表的时候需要注意要让canvas的每一个ID都不一样。
移步官网:http://doc.ucharts.cn/1073940)
2.可以到uniapp的插件市场去找。利用renderjs来使用echarts
3.uniapp不支持引入echarts
* 分享微信、朋友圈
```javascript
shareWx(sharetype){
<!--sharetype为 WXSceneSession 、 WXSenceTimeline-->
uni.share({
provider: 'weixin',
scene: sharetype,
title:'xxApp',
href:this.logs.invite_url, //地址
summary: "您的好友邀请您******",
imageUrl:'/static/img/thumb.png', //可以使用本地或网络图片
success:(res)=>{
},
fail:(err)=>{
uni.showToast({
title: '分享失败',
icon: 'none'
});
}
})
},
// 这里只写了微信。朋友圈。官方也有分享微博、qq的api
- app分享小程序
<!--sharetype为 WXSceneSession 、 WXSenceTimeline-->
//下面方法里属性值都是变量是因为,分享小程序只能是微信好友列表。朋友圈是不能分享的所以简单的封装了一下
uni.share({
provider: "weixin",
scene: obj.sharetype,
type: typeNum, // 填5的时候是分享小程序
href: shareurl, //type 为 0 时必选,也就是朋友圈这个是必填的
title: 'xxapp',
imageUrl: '//可以使用本地或网络图片',
summary: '您的好友邀请您一起使用xxapp',
miniProgram:{
id:'xxx', //微信小程序原始id,
path:shareurl, //小程序链接 //'/pages/details/details'有参数的话,正常拼接就可以
type:0, //微信小程序版本类型,可取值: 0-正式版; 1-测试版; 2-体验版。 默认值为0。
webUrl:'xxxx'//兼容低版本的网页链接
},
success:(res)=>{
successCallback && successCallback(res);
},
fail:(err)=>{
errorCallback && errorCallback(err)
}
});
- 解决在有引导页的时候或者有些页面只是展示一次,uniapp启动时间太长
<!--在APP.vue-->
onLaunch: function() {
switch (uni.getSystemInfoSync().platform) {
case 'android':
setTimeout(()=>{
plus.navigator.closeSplashscreen();
},3500)
break;
case 'ios':
setTimeout(()=>{
plus.navigator.closeSplashscreen();
},3500)
break;
default:
break;
}
},
- 解决uniapp在后台时间长某些情况下造成白屏
<!--APP.vue-->
<!--思路:利用时间戳-->
data(){
return {
endtime:'',
nowtime:'',
}
},
methods:{
DateDifference(faultDate,completeTime){
var stime =new Date(faultDate).getTime();
var etime = new Date(completeTime).getTime();
var usedTime = etime - stime; //两个时间戳相差的毫秒数
var days=Math.floor(usedTime/(24*3600*1000));
//计算出小时数
var leave1=usedTime%(24*3600*1000); //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000); //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));
var time = hours;
return time;
},
},
onShow: function() {
plus.globalEvent.addEventListener('pause', ()=>{
this.endtime = new Date().getTime();
},false);
plus.globalEvent.addEventListener('resume', ()=>{
let a = this.DateDifference(this.endtime,new Date().getTime());
if(a >= 1){ //判断停留后台超过1h或1h
plus.runtime.restart(); //=>重启应用
}
},false);
},
- 适配iphonex底部安全区域
<!--在mainfest文件中-->
"safearea": {
"background":"#CCCCCC", // 安全区域外的背景颜色,默认值为"#FFFFFF" ,可以不配置
"bottom":{ // 底部安全区域配置
"offset":"none|auto"//底部安全区域偏移,"none"表示不空出安全区域,"auto"自动计算空出安全区域,默认值为"none"
}
}
<!-- css -->
constant(safe-area-inset-bottom)
env(safe-area-inset-bottom)
- 获取当前项目的版本号,用来做检测更新
1.plus.runtime.versionCode //版本号
plus.runtime.version //版本名称
2.plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
// 版本名称(类似1.1.1)
let versionname = wgtinfo.version;
// 版本号(类似111)
let versioncode = wgtinfo.versionCode;
})
- 生成二维码
1.使用tkiQrcode
2. 插件市场去找有很多,这里列举一个
<tki-qrcode ref="qrcode" :val="val" :size="400" :loadMake="true" :showLoading="true" />
<script>
//生成二维码
creatQrcode() {
this.$refs.qrcode._makeCode()
},
//在获取到要生成二维码的地址后,把值赋给val.需要利用setTime(),延迟在调用上面的creatQrcode();
</script>
- 图片路径base64转地址,地址转base64
1.image-tools
2.地址 https://github.com/zhetengbiji/image-tools
pathToBase64(path)
.then(path => {
console.log(path)
})
.catch(error => {
console.error(error)
});
- 文字滚动(公告)
1.使用uniNoticeBar
2.如果样式不好改的话,直接修改源码样式
3.地址 https://ext.dcloud.net.cn/plugin?id=30
<uni-notice-bar class="gundong" scrollable="true" single="true" v-if="textf" :text="textf" :speed="50"></uni-notice-bar>
<script>
import uniNoticeBar from '@/components/fontgundong/uni-notice-bar/uni-notice-bar.vue'
//动态加载文字需要加上v-if="textf"
this.textf = "您有" +res.data.data+ "个API在审核中。绑定的API需要10-20分钟后才会显示在晒单界面中,请耐心等待."
</script>
- input在iOS上粘贴会造成重复
ios系统的bug
解决:固定长度maxheight
- 使用cryptojs 加密sign
npm 下载 crypto-js
https://www.cnblogs.com/luoxiaoer/p/10268068.html
https://www.liaoxuefeng.com/wiki/1022910821149312/1023025778520640
//只是一个示例,看项目需要
import CryptoJS from '../components/crypto-js/crypto-js.js'
// sign.js
export default{
changeData(val){
var hash = CryptoJS.HmacSHA256(val, 'key');
var hashInBase64 = CryptoJS.enc.Base64.stringify(hash);
return hashInBase64;
},
}
- 获取元素节点信息
mounted(){
const query = uni.createSelectorQuery().in(this);
query.select('.swiperbox').boundingClientRect(data => {
console.log(data) //元素节点信息
}).exec();
},
更多推荐
所有评论(0)