uniapp的一些总结（持续补充修改）

• uniapp第三方组件库（很成熟）

uview
2.x
1.x

• 使用上拉加载，下拉刷新.

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();
},