uni-app小记内容。

基础
①小程序规定：750rpx = 屏幕的宽度。
②H5规定：100vh = 屏幕的宽度。
③父组件传参给子组件：

//父：
<List-Item :list="list">
//子：
props:{
   list:Array
}

④子组件向父组件传参：通过v-on(@)监听事件的方式带参数过去。
本质是：父向子传递一个事件，子通过emit调用这个事件，把结果传回来。

//子：
<view @click="handleClick"></view>
methods:{
   handleClick(){
    this.$emit("textChange","要传递的参数")
  }
}
//父：
<ul-com :list="list" @textChange="handleTextChange"></ul-com>
methods:{
   handleTextChange(e){
     console.log('接收到的参数'+e);
  }
}

在此案例中，父组件的textChange必须和子组件$emit监听的第一个参数同名；父组件接收的handleTextChange函数得到的便是子组件中$emit监听的要传递的参数。

⑤定义全局数据
Ⅰ，采用vue的原型：在main.js或者其他导入了Vue的文件中，定义this.prototype.baseUrl = "https://www.ccc"，使用方式：this.baseUrl。
Ⅱ，采用小程序原生globalData对象，在app.vue中定义globalData:{baseUrl:"www.com"}，使用方式：getApp().globalData.baseUrl。

⑥插槽：父组件向子组件传递标签，使用slot标签作占位符。

使用脚手架创建项目
① vue create -p dcloudio/uni-preset-vue dnpicture
②cd .\dnpicture\ 进入对应的目录结构。
③安装sass依赖：npm install sass-loader node-sass
④运行项目：npm run dev:mp-weixin
⑤uni-ui安装：npm install @dcloudio/uni-ui，引用：import {uniBadge} from '@dcloudio/uni-ui'，在components中注册即可使用。
⑥在app.vue中全局引用style。

<style lang="scss">
/*每个页面公共css */
@import url('./common/css/iconfont');
@import url('./common/css/main.css');
</style>

再uni.scss中可自定义主题颜色等，直接引用$color即可。
⑦自主封装请求。
Ⅰ，基于原生的promise来封装，详见ES6，其中ajax换成uni.request。
Ⅱ，挂载到原型Vue上，main.js中使用Vue.prototype.request = request。
Ⅲ，通过this.request({url:""}).then(res=>{})来使用。
☆ 新建request.js

export default(params)=>{
  uni.showLoading({title:'加载中'});
  return new Promise((resolve,reject)=>{
    wx.request({
      ...params,
      success(res){
         resolve(res);
      },
      fail(err){
         reject(err);
      },
      complete(){
        uni.hideLoading();
      }
    })
  })
}

⑧组件中加载数据使用mounted(){}
⑨时间戳转换可直接采用moment.js库
⑩uni规定屏幕的高度：height:calc(100vh);

下拉触底分页加载的逻辑
①触底判断hasMore存在把page+1。
②重新请求数据this.getList();
③回到getList中修改数据数组成拼接[...this.list,...res.list];并设置提示弹窗。
④只执行一次的逻辑放进第一次请求的数据中。
⑤data中设置hasMore=true;当请求数据为空(res.list.length==0)时设置为false，并设置提示弹窗。
★ 当整个页面滚动时使用微信原生的onReachBottom方法；当部分滚动且有些固定时使用scroll-view的触底事件@scrolltolower，如果想要scroll-view标签里还能实现flex布局，需要给scroll-view 标签添加enable-flex属性。
代码 ：

data(){
  return{
	   hasMore:true,
	   params:{
		    page:0,
		    size:10
	   },
	   theList:[]
	  }
},
method:{
      getList() {
			this.request({
				url: '....',
				data: this.params
			}).then(result => {
				if (result.data === 0||res.data.count == vm.theList.length) {
					this.hasMore = false;
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
					return;
				}
				if(this.params.page == 0){
				  this.theList = result.data;
				}else{
			      this.theList = [...this.theList,...result.data];
				}
			});
		},
		handleScrolltolower(){
			if(this.hasMore){
				this.params.page = this.params.page +1;
				this.getList();
			}else{
				uni.showToast({
					title:'没有更多数据了',
					icon:'none'
				})
			}
		},
}

在tabs页面执行切换时的分页效果

data(){
  return{
	   hasMore:true,
	   params:{
		    page:0,
		    size:10
	   },
	   theList:[]
	  }
},
method:{
      getList() {
			this.request({
				url: '....',
				data: this.params
			}).then(result => {
				if (result.data === 0||res.data.count == vm.theList.length) {
					this.hasMore = false;
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
					return;
				}
				if(this.params.page == 0){
				  this.theList = result.data;
				}else{
			      this.theList = [...this.theList,...result.data];
				}
			});
		},
		changeTabs(){
	   	 if(this.current != currentIndex){
		    this.params.page = 0;
		    this.theList=[];
		    this.getList();
		 }else{
		  return;
		 }
		},
		handleScrolltolower(){
			if(this.hasMore){
				this.params.page = this.params.page +1;
				this.getList();
			}else{
				uni.showToast({
					title:'没有更多数据了',
					icon:'none'
				})
			}
		},
}

swiper样式问题
①swiper不会被image的高度撑开，默认150rpx。
②image默认高度240px，宽度320px。
③计算图片宽高比，并写入swiper样式。
④设置swiper{height:calc(750rpx/2.3)}，image{height:100%}

uni传递url参数

:url= "` /pages/index?id=${item.id} `"

解读换行符
①在view中添加text。
②white-space:pre-wrap;

判断对象为空

Object.keys(this.album).length==0

使用moment.js实现几天前

import moment from 'moment.js';
moment.locale("zh-cn");
//xxx年的数据
this.cnTime = moment(this.atime*1000).fromNow();

.fromNow()显示几个月前，moment.locale(“zh-cn”);显示为中文。

封装手势滑动
原理：
①手指按下屏幕的事件@touchstart
②手指离开屏幕的事件@touchend
③手指在屏幕上的坐标event.changedTouches[0].clientX/Y
④记录手指按下屏幕的时间/坐标，和离开屏幕的时间/坐标作对比。
实现：

<view @touchstart="handleTouchStart" @touchend="handleTouchend" ></view>

data(){
   return {
      startTime:0,
      startX:0,
      startY:0
   }
},
methods:{
    handleTouchend(event){
       const endTime = Date.now();
       const endX = event.changedTouched[0].clientX;
       const endY = event.changedTouched[0].clientY;
       //判断按下的时长
       if(endTime - this.startX > 2000){
          return;
       }
       let direction = "";
       //判断移动距离是否合法
       if(Math.abs(endX - this.startX) > 10 && Math.abs(endY-this.startY)<10){
       //储存滑动方向
       direction = end - this.startX > 0 ? 'right':'left';
       }else{
        return;
       }
    },
    handleTouchStart(event){
       this.startTime = Date.now();
       this.startX = event.changedTouched[0].clientX;
       this.startY = event.changedTouched[0].clientY;
    },
}

下载图片到本地：
①uni.downloadFile 下载远程文件到小程序的内存中
②uni.saveImageToPhotosAlbum 将图片从内存中下载到本地
实现：

//异步操作较多使用async
  async downloadImage(){
     await uni.showLoading({
     title:"下载中"
     })
 //将远程文件下载到小程序内存中 tempFilePath
    const tempResult = await uni.downloadFile({url:this.imgDetail.img}); //可直接把当前数组的图片作为url路径。
    const {tempFilePath} = tempResult[1];
 //将小程序内存中的临时文件下载到本地
    const result = await uni.saveImageToPhotosAlbum({filePath:tempFilePath});
    
    uni.hideLoading();
    await uni.showToast({title:"下载成功"})
  }

切换tabs传递参数给子组件
☆ 先把接口相关的数据封装在tabs数组中方便调用。
①子组件props接收参数，并在mounted()方法中挂载一次。
②当切换tabs参数改变时，需要在watch:{}监听数据发生的改变。
实现：

//子组件：
props:{
  urlObj:Object
},
data(){
 return{
 theList:[]
 }
},
watch:{
  //当urlObj发生改变时调用
  urlObj(){
    this.getList();
  }
},
mounted(){
  this.getList();
},
methods:{
 getList(){
   this.request({
     url:urlObj.url,
     data:urlObj.pramas
   }).then(result=>{
     this.theList = result.data;
   })
 }
}
//父组件
<组件 :urlObj="urlObj"></组件>

c3滤镜
模糊：filter:blur(20px);

video视频样式填充满
<video objectFit="fill"></video>

button按钮透明（转发/客服）等

.share{
 position:relative;
 button{
   position:absolute;
   width:100%;
   height:100%;
   opacity:0;
  }
}

下载视频到本地：
①uni.downloadFile({url:""})下载远程文件到小程序的内存中
②uni.saveVideoToPhotosAlbum 将视频从内存中下载到本地
实现：

//异步操作较多使用async
  async downloadImage(){
     await uni.showLoading({
     title:"下载中"
     })
 //将远程文件下载到小程序内存中 tempFilePath
    const tempResult = await uni.downloadFile({url:this.videoObj.video}); //可直接把当前数组的图片作为url路径。
    const {tempFilePath} = tempResult[1];
 //将小程序内存中的临时文件下载到本地
    const result = await uni.saveVideoToPhotosAlbum({filePath:tempFilePath});
    
    uni.hideLoading();
    await uni.showToast({title:"下载成功"})
  }