概述
基础
①小程序规定: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:"下载成功"})
}
最后
以上就是悲凉时光为你收集整理的uni-app小记内容。的全部内容,希望文章能够帮你解决uni-app小记内容。所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复