基础
①小程序规定:750rpx = 屏幕的宽度。
②H5规定:100vh = 屏幕的宽度。
③父组件传参
给子组件:
1
2
3
4
5
6
7//父: <List-Item :list="list"> //子: props:{ list:Array }
④子组件向父组件传参:通过v-on(@)
监听事件的方式带参数过去。
本质是:父向子传递一个事件,子通过emit调用这个事件,把结果传回来。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//子: <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。
1
2
3
4
5
6<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18export 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
属性。
代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44data(){ 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页面执行切换时的分页效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53data(){ 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参数
1
2:url= "` /pages/index?id=${item.id} `"
解读换行符
①在view中添加text。
②white-space:pre-wrap;
判断对象为空
1
2Object.keys(this.album).length==0
使用moment.js实现几天前
1
2
3
4
5import 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
④记录手指按下屏幕的时间/坐标,和离开屏幕的时间/坐标作对比。
实现:
1
2<view @touchstart="handleTouchStart" @touchend="handleTouchend" ></view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32data(){ 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 将图片从内存中下载到本地
实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14//异步操作较多使用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:{}
监听数据发生的改变。
实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31//子组件: 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按钮透明(转发/客服)等
1
2
3
4
5
6
7
8
9
10.share{ position:relative; button{ position:absolute; width:100%; height:100%; opacity:0; } }
下载视频到本地:
①uni.downloadFile({url:""})下载远程文件到小程序的内存中
②uni.saveVideoToPhotosAlbum 将视频从内存中下载到本地
实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14//异步操作较多使用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小记内容内容请搜索靠谱客的其他文章。
发表评论 取消回复