安装软件：
Hbuilder：负责编写代码
微信开发者工具：配置运行路径，负责查看编译效果
页面布局
1、自定义导航栏
1.1- 新建tabbar组件
隐藏tabbar 与 nav导航栏
文件位置：APP.vue
onLaunch: function() {
uni.hideTabBar()
},
文件位置：pages.json
"navigationStyle": "custom",
新建组件tab编写tabbar，在index.vue页面中引用
引入使用iconfont图标：因为cdn不可用，所以本地引用，新建style文件放入下载好的iconfont文件，在APP.vue中引入iconfont.css文件,编写加号样式
1.2- 新建nav组件
新建nav组件，在App.vue中引用
<view class="navbox">
<view class="search iconfont icon-sousuo" />
<view class="title">
<span>推荐</span>
<span>同城</span>
</view>
</view>
缺点：高度被定死，在微信端显示时不能适配
2、视频播放组件
新建swiper轮播组件，使用uniapp的swiper组件实现纵向轮播
新建vedio组件，在swiper组件使用vedio组件，完成swiper组件的布局大小（不占据nav tab的高度）
优化视频组件，增加自动播放，循环播放，去掉视频原生播放键
vedio组件左下侧编写视频个人信息
新建vedio-right组件，用于vedio右侧点赞、信息等功能的展示
搭建apache服务器，将视频与json文件放在服务器上，在index路由中通过onLoad，uni.request获取json文件中的数据，将视频数据通过父子传参给轮播组件渲染展示
为music图标，跟左下侧日报添加旋转、移动动画效果
//旋转
animation: animusic 1.5s linear 0.2s infinite;
@keyframes animusic {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
//移动
animation: anitext 4s linear 0.2s infinite;
@keyframes anitext{
0%{
transform: translate3d(80%,0,0);
}
100%{
transform: translate3d(-80%,0,0);
}
}
实现点击加号隐藏加号、点击爱心变红再次点击变白效果
增加swiper滑动的时候播放当前item显示的视频，暂停前后两个视频的播放（利用@change\video的paly与pause事件、ref获取video play，pause事件方法控制播放暂停）
//swiper组件@change事件方法
<Vedio ref="video" :videourl="item.url"></Vedio>
itemchange(res){
let num = res.detail.current
this.$refs.video[num].vplay()
if(num == 0){
this.$refs.video[num+1].vpause()
}else if(num == this.$refs.video.length -1){
this.$refs.video[num-1].vpause()
}else{
this.$refs.video[num-1].vpause()
this.$refs.video[num+1].vpause()
}
}
//video组件
<video :controls="false"
enable-play-gesture
id="myVideo"
@play="vplay"
@pause="vpause"
:src="videourl"></video>
methods:{
vplay(){
this.videoContext.play()
},
vpause(){
this.videoContext.pause()
}
},
created(){
this.videoContext = uni.createVideoContext('myVideo',this)
}
使用click事件增加单击视频暂停播放，使用setTimeout来确定双击事件通过ref操作子组件方法点亮爱心收藏
//位置：video组件,点击video促发tcvideo方法
//单击视频暂停
<VedioRight ref="tclove" class="right"></VedioRight>
tcvideo(){
this.twoclick++
clearTimeout(this.timeout)
//300毫秒内点击两次即为双击
this.timeout = setTimeout(()=>{
//单击执行
if(this.twoclick < 2){
if(this.stop){
this.stop = false
this.vplay()
}else{
this.stop = true
this.vpause()
}
}else{
this.$refs.tclove.tbLove()
}
this.twoclick = 0
},300)
增加首个视频自动播放功能，如果autoplay直接等于true，swiper的item将会把所有视频都自动播放一遍，这里通过swiper组件将index传给video组件，通过判断index让autoplay只执行一次
<Vedio ref="video" :videourl="item.url" :index="index"></Vedio>
//位置video组件
props: ['videourl', 'index'],
autoplay(){
if(this.index === 0){
this.firstplay = true
}
}
created(){
this.autoplay()
}
遇到的问题：
1、在微信端视频无法显示，微信端使用网络视频路径可以显示，H5端可以显示，这里我使用短链接网站将长链接缩短，放在data中进行循环渲染(没有一天就失效了，只能下载视频放在服务器里面获取)
我这里安装了apache，帮下载好的视频文件放在本地，在本地中访问视频(默认80端口访问)
生命周期onload页面加载时调用接口，使用了uni.request访问json文件获取数据
2、使用uni.request运行在微信端需要Appid，编辑appid更换成功再次运行更换失败
在manifest.json文件中修改源码，修改微信appid
3、mock.js数据运行在微信端请求出现403跨域问题
微信端需要https协议请求
4、视频内容高度的设置需要App.vue中的body,boxsizing与vh,100%高度的相互配和实现
3、 城市路由页面 1、城市路由页面布局
新建city路由页面，新建content组件，完成同城页面布局
新建citychoose页面，新建citylist组件，完成城市切换布局
放置城市字母表json文件，组件中获取数据并渲染
优化了页面路由之间的跳转
citychoose页面添加字母表选择内容
为字母表添加hover-class点击字体变大效果、通过uniapp的scroll、scroll-into-view设置id通过id，点击滑动到对应城市内容效果
点击城市，改变citychoose路由的自动定位城市（通过兄弟传参改变），改变city路由的自动定位城市，通过编程式导航路由传参，uniapp特有的组件接收参数实现，组件中需要在mounted中接收参数，created不可以
uni.$on("getcityName",name=>{
this.place = name
uni.navigateTo({
url:"/pages/City/City?city="+name
})
})
mounted() {
//获取当前路由参数
const pages = getCurrentPages();
//获取路由参数
const curPage = pages[pages.length - 1];
this.city = curPage.options.city
}
遇到的问题：
1、视频列表滚动时超出顶部状态栏，overflow:hidden与height:100%均未解决(已解决)
通过uniapp文档style有介绍自定义导航的高度占据，通过绝对定位与zindex遮盖住了超出的内容
4、关注页面
1、新建follow tabbar路由页面，新建follow-nav组件完成头部布局
2、优化了tabbar栏的全局高度，采用单个页面使用calc计算100 - 100rpx高度(-号两边要有空格)
3、新建follow-list组件完成内容布局
4、添加滚动自动播放功能，根据滚动事件@scroll通过video的play()方法实现，通过ref获取vedio，优化@scorll方法触动条件，通过watch监听num的变化来触发播放暂停方法（num不发生改变不触发），添加标题滚动动画
5、使用setTimeout优化@scroll频繁触发请求问题
遇到的问题：
1、uniapp定义了ref获取不到，原因是uniapp把ref编写在原生组件上是获取不到的，只能编写到自定义组件上
5、消息页面
1、新建new页面，新建new-header、new-content组件，完成消息页面布局
6、我的页面
1、新建user页面，新建nav、content、navlist组件，完成页面布局
2、为navlist添加动态切换效果，添加切换对应内容显示
3、切换内容添加
7、编辑资料页面
1、完成编辑路由跳转与页面布局
2、添加点击返回回到User页面，添加点击编辑头像选择本地图片更换头像功能（通过uni.choosrImg实现）
看到好多评论有要源码的：其实这个项目主要是练习样式布局的，视频的讲解有点粗，所以后面就没仔细做了，里面大量使用了组件的调用，后面我也是了解了这样的代码太粗糙了，所以就没放源码出来，而且接口的调用是用的Apache本地搭建的服务器获取的数据，实际的数据获取还需要自己准备视频，准备.json数据，（代码很粗糙，不建议学习这样的代码风格）
