亚马逊企业网站建设,免费网站建设知识,创新的做pc端网站,wordpress 摘要插件“uni-app 是一个使用 Vue.js 开发所有前端应用的框架#xff0c;是一种终极的跨平台解决方案#xff0c;这里的平台#xff0c;主要指的是App平台(android、ios)、小程序平台、H5平台。开发者编写一套代码#xff0c;可发布到iOS、Android、H5、以及各种小程序(微信/支付宝… “uni-app 是一个使用 Vue.js 开发所有前端应用的框架是一种终极的跨平台解决方案这里的平台主要指的是App平台(android、ios)、小程序平台、H5平台。开发者编写一套代码可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。”01开发一个小视频应用一初始化项目打开HBuilderX IDE新建一个名称为mini-video的初始化uni-app项目这里勾选uni-app即可创建项目创建完成后打开pages/index/index.vue将中的模板内容content部分清空将uni-app初始项目中与应用无关的东西进行清空、修改即可。二创建底部导航栏组件首先要弄清楚我们的uni-app已经提供了tabBar的配置即提供了底部导航栏的那为什么还需要自定义底部导航栏呢 因为uni-app提供的默认底部导航栏tabBar的背景颜色只支持十六进制所以无法设置为透明。同时我们又需要将底部导航栏中的页面设置为tabBar页面所以我们还是要进行tarBar的配置而一配置tabBar那么就会自动出现uni-app提供的默认导航栏所以我们必须在应用启动onLaunch的时候将默认tabBar进行隐藏。那么没有了默认导航栏我们怎么进行tabBar页面的切换呢我们可以通过组件设置不同的跳转方式实现应用内各种页面之间的跳转。记住APP和微信小程序是不支持标签跳转的。底部导航栏有五个页面: 首页(index.vue)、关注(follow.vue)、加号(添加好友friend.vue)、消息(news.vue)、我(personal.vue)。所以需要在pages中模仿index新建出剩余的四个页面页面新建完成后需要配置到pages.json中的tarBar中只需要配置list即可如:{ tabBar: { // 在pages.json中添加上tabBar配置如下 list: [ {pagePath:pages/index/index}, {pagePath:pages/follow/follow}, {pagePath:pages/friend/friend}, {pagePath:pages/news/news}, {pagePath:pages/personal/personal} ] }}// App.vue中onLaunch的时候隐藏掉uni-app自带的tabBar export default { setTimeout(() { uni.hideTabBar(); // 隐藏tabBar }, 1000); }/script在ios和安卓App平台上运行时会出现tabBar隐藏失败的情况解决办法就是隐藏的时候需要添加一个1000ms左右的延迟。// 项目根目录下新建一个components目录并在其中新建一个tab-bar.vue即自定义底部导航栏组件template view classtab navigator open-typeswitchTab url/pages/index/index classtab-box 首页 navigator navigator open-typeswitchTab url/pages/follow/follow classtab-box 关注 navigator view classtab-box view navigator open-typeswitchTab url/pages/news/news classtab-box 消息 navigator navigator open-typeswitchTab url/pages/personal/personal classtab-box 我 navigator viewtemplatestyle.tab{ height:50px; width:100%; position:fixed; bottom: 0; left: 0; z-index: 20;}.tab-box{ float: left; width: 20%; color: #FFFFFF; text-align: center; height: 50px; line-height: 50px; font-size:20px}.icon-box{ width: 60%; height: 30px; background: #FFFFFF; color: #000000; margin: 10px 20%; line-height:30px; border-radius: 5px; font-size: 15px;}style三添加图标字体添加图标字体非常简单就是登录iconfont网站然后创建一个图标项目然后搜索自己需要的图标比如加号、搜索、返回将它们加入到项目中然后点击下载即可下载完成后解压找到iconfont.css这个文件这个就是我们要用到的图标字体的css样式直接引入到项目中即可为了方便使用我们将图标字体css文件作为一个全局样式引入到App.vue组件中。使用的时候我们只需要在需要添加图标字体的标签上添加上iconfont 具体的图标样式名即可如:// App.vuestyle /*每个页面公共css */ import url(./static/iconfont.css);style// components/tab-bar.vueview classtab-box view classiconfont icon-jiahao icon-box viewview四创建首页头部导航栏首页头部导航栏最左侧是一个搜索图标中间是推荐和同城右侧无内容。同样我们的uni-app是有一个默认头部导航栏的所以我们首先要隐藏掉默认的头部导航栏要隐藏默认头部导航栏我们需要在pages.json文件中设置其navigationStyle属性值为custom即自定义如:{ globalStyle: { navigationStyle:custom // 设置头部导航栏为自定义模式头部导航栏会自动消失 }}// /components/index-header.vuetemplate view classindex-header view classiconfont icon-icon-- iconview view classmiddle view classtext推荐view| view classtext同城view view viewtemplatestyle scoped.index-header { height: 35px; line-height: 35px; width: 100%; position: fixed; top: 25px; left: 0; margin: 0 auto; background: #000000; z-index: 20;}.icon { position: absolute; left: 0; top: 0; color: white; width: 20%; text-align: center;}.middle { text-align: center; color: white;}.text { display: inline; margin: 0 10px;}style五创建视频播放组件视频播放组件即一个全屏的页面然后里面嵌入一个组件即可实现。这里需要特别说一下如何让页面全屏显示我们设置页面全屏通常会让需要全屏的元素设置上width: 100%; height: 100%;可是当我们给视频播放组件根元素标签设置上width为100%height为100%后它并没有全屏显示因为当样式属性值为百分数的时候其是相对于父元素的即是父元素宽高的100%而此时视频播放组件的父元素是html、body它们并没有设置宽高所以我们需要在App.vue中设置一下全局样式将html和body的宽高设置为100%此后其中的子元素设置百分数的时候才会其作用。// App.vuehtml,body { width: 100%; height: 100%; margin: 0; padding: 0;}// /components/video-player.vuetemplate view classvideo-player video classvideo :src video.src :controlsfalse :looptrue video viewtemplatescript export default { props: [video] }scriptstyle .video-player { width: 100%; height: 100%; } .video { width: 100%; height: 100%; z-index: 19; }style六创建视频列表组件视频列表组件我们使用的是组件里面部分则为上面的视频播放组件。// /components/video-list.vue view classvideo-list view classswiper-box swiper classswiper :verticaltrue swiper-item v-for(item,index) in videos :keyindex view classswiper-item video-player :videoitem :indexindex video-player view swiper-item swiper view viewtemplatescript import VideoPlayer from ./video-player.vue; export default { components: { video-player: VideoPlayer }, props:[list], data() { return { videos:[], } }, watch:{ list(){ this.videosthis.list; } } }scriptstyle scoped .video-list { width: 100%; height: 100%; } .swiper-box{ height:100%; width: 100%; } .swiper{ height:100%; width: 100%; } .swiper-item { width: 100%; height: 100%; background: red; }style七向视频列表组件传入列表数据视频列表组件和视频播放组件都已经完成后就可以在首页onLoad的时候获取视频数据然后传递给视频列表组件视频列表组件在遍历传递过来的视频列表将视频地址传入对应的视频播放组件中即可这里采用mock数据的方式提供视频列表。// pages/index/index.vuetemplate view classcontent index-headerindex-header video-list :listlistvideo-list tab-bartab-bar viewtemplatescript import TabBar from ../../components/tab-bar.vue; import IndexHeader from ../../components/index-header.vue; import VideoList from ../../components/video-list.vue; export default { components: { tab-bar: TabBar, index-header: IndexHeader, video-list: VideoList }, data() { return { list: [] } }, onLoad() { this.getVideos(); }, methods: { getVideos() { const res [ { id: 0, src: http://alimov2.a.yximgs.com/bs2/gdtPostRoll/postRoll-MTA3MDY0NDY3Mzk.mp4, autho: 张三, title: 仙娜美, loveNumber: 10000, commentNumber: 2000, shareNumber: 30000 }, { id: 1, src: http://upmov.a.yximgs.com/upic/2019/02/13/22/BMjAxOTAyMTMyMjUxMTlfNDc4ODM2MzlfMTA3Mjc5ODU2MjhfMV8z_b_B1fbc185eaca8cc06efa2d4f713e13e8c.mp4, autho: 李四, title: 【搞笑】最强猜歌王, loveNumber: 40000, commentNumber: 5000, shareNumber: 60000 }, { id: 2, src: http://bdmov.a.yximgs.com/bs2/gdtPostRoll/postRoll-MTA3MDk5Mjc5OTg.mp4, autho: 王五, title: 特制流泪芥末酱, loveNumber: 70000, commentNumber: 8000, shareNumber: 90000 } ]; this.list res; } } }scriptstyle .content { width: 100%; height: 100%; }style原文作者Rolan原文地址http://www.wxapp-union.com/article-5582-1.html -福利驾到- 拉上好友一起拼团最高可优惠70元
