uni-app小记内容。

冷不防 2023-02-26 12:24 2阅读 0赞

**基础**  
①小程序规定：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。

再`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  
④记录手指按下屏幕的时间/坐标，和离开屏幕的时间/坐标作对比。  
**实现：**

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:"下载成功"})
      }

[ES6]: https://editor.csdn.net/md/?articleId=107163068