一、bilibili项目介绍：
原生微信小程序
二、接口地址：
公共路径：https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili
首页导航：/navList
首页轮播图：/swiperList
视频列表：/videosList
视频详情：/videoDetail?id 需要带上视频的id
推荐视频：/othersList?id 需要带上视频的id
评论列表：/commentsList?id 需要带上视频的id
三、在app.wxss文件中，设置公共样式【小程序中没有通配符】
page,view,image,swiper,swiper-item,navigator,video{
box-sizing:border-box;
}
四、设置顶部标题
{
"usingComponents": {},//使用公共组件
"navigationBarTitleText": "哔哩哔哩"
}
五、公共组件头部
1、在根目录下，新建一个文件夹components
2、在components文件夹下，新建myHeader文件夹，右键新建component，此时在myHeader文件夹中新建四个文件
3、使用公共组件，在index文件中的index.json,注册公共组件
"usingComponents": {
"myHeader":"../../components/myHeader/myHeader" （名称加地址）
},
4、在index.wxml中使用公共组件 ==》就可以在首页看到公共组件
<myHeader></myHeader>
5、开始编写头部公共组件
<view class="my-title">
<!-- logo -->
<navigator class="logo">
<image class="logo-img" src="../../image/BILIBILI.png"></image>
</navigator>
<!-- 搜索 -->
<view>
<image src="../../image/search.png"></image>
</view>
<!-- 用户 -->
<view class="user-icon">
<image src="../../image/User.png"></image>
</view>
<!-- 下载按钮 -->
<view class="down-app">
下载APP
</view>
</view>
6、调整样式至
六、首页可滑动导航
1、获取数据。在index.js文件中，在page对象中，
data: {
// 页面初始化数据（设置一个空数组）
navList:[]
},
2、同级设置一个方法
// 获取首页导航数据
getNavList(){
//利用小程序内置发送请求的方法
let that = this
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
method:'get',
success(res){
console.log(res.data.data.navList);
if(res.data.code===0){
that.setData({
navList:res.data.data.navList
})
}
}
})
},
3、在onload中调用一下
onLoad: function () {
this.getNavList()
}
4、调用完毕后，会报一个错【小程序的接口，需要在小程序的官网进行配置一下】
5、我们在练习的时候，可以点击微信开发者工具中的详情中的本地配置中的不校验合法域名
6、就可以在控制台拿到请求的数据了
success(res){
//console.log(res);
if(res.data.code===0){
this.setData({
navList:res.data.data.navList
})
}
7、此时再data中声明的空数组navList中就被附上值；我们需要将这个数组在index.wxml中的可滑动组件中进行循环，
<!-- 首页导航 -->
<!-- 自己滚动的区域 -->
<view class="nav-wrap">
<scroll-view class="nav" scroll-x>
<view class="nav-item" wx:for="{{navList}}" wx:key="item.id">{{item.text}}</view>
</scroll-view>
</view>
8、在index.wxss中设置样式，
.nav{
white-space: nowrap;
padding:5rpx 0 ;
}
.nav-item{
padding:20rpx 45rpx;
font-size:30rpx;
display: inline-block;
}
9、此时可以实现首页导航的滑动
10.设置一个当点击首页导航时，底部出现红线
10.1在index.wxss文件中，设置一个class【active】的样式。底线
11.在index.js文件中，设置一个数据，currentIndexNav：0【默认下标是0】
12、在index.wxml中，通过三目运算符判断class；data-index="{{index}}"设置上下标，点击事件【bindtap】
<view class="nav-item {{index === currentIndexNav?'active':''}}"
wx:for="{{navList}}" wx:key="item.id" bindtap="clickIndex" data-index="{{index}}">{{item.text}}</view>
13：点击事件的方法是;
clickIndex(e){
this.setData({
currentIndexNav:e.target.dataset.index
})
},
14即可实现点击底部出现红线
七、轮播图模块
1、在index.js文件中请求数据
①在data中声明一条数据
swiperList:[]
②获取数据，在onLoad周期中进行调用
// 首页获取轮播图
getSwiper(){
let that = this
wx.request({
url:"https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList",
method:"get",
success(res){
console.log(res.data.data.swiperList);
if (res.data.code === 0) {
that.setData({
swiperList: res.data.data.swiperList
})
}
}
})
},
· 2、在index.wxml文件中写入swiper标签
<!-- 轮播图 -->
<view class="swiperBox">
<swiper autoplay="true" circular indicator-dots>
<swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
<navigator>
<image src="{{item.imgSrc}}"></image>
</navigator>
</swiper-item>
</swiper>
</view>
实现轮播图
八、实现视频列表。
1、在index.js中请求数据
在data中，声明一条数据
movieList:[],
2、函数wx:request请求数据：
// 获取电影列表
getMovie() {
let that = this
wx.request({
url: "https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videosList",
method: "get",
success(res) {
console.log(res.data.data.videosList);
if (res.data.code === 0) {
that.setData({
movieList: res.data.data.videosList
})
}
}
})
},
3、onload函数中进行调用。
onLoad: function () {
this.getSwiper(),
this.getMovie(),
this.getNavList();
}
4、在index.wxml文件中，
<view class="video-list">
<navigator class="video-img" wx:for="{{movieList}}" wx:key="{{item.id}}">
<view class="hezi">
<image mode="widthFix" class="image-video" src="{{item.imgSrc}}"></image>
<!-- 播放量 -->
<view class="hezit">
<view class="play-count-wrap">
<text>播放量：</text>
<text class="play-count">{{item.playCount}}</text>
</view>
<view class="play-count-row">
<text>评论量：</text>
<text class="comment-count">{{item.commentCount}}</text>
</view>
</view>
</view>
<view class="img-desc">{{item.desc}}</view>
</navigator>
</view>
5、在indexwxss文件中，
.video-list{
display: flex;
flex-wrap: wrap;
padding:5rpx;
justify-content: space-between;
}
.video-img{
width:48%;
margin-bottom:20rpx;
}
.hezi{
position:relative;
}
.hezi image{
width:100%;
}
.hezit{
display: flex;
width:100%;
justify-content: space-between;
position:absolute;
bottom:10rpx;
left:0;
font-size:24rpx;
color:white;
}
.img-desc{
font-size:28rpx;
display: -webkit-box;
overflow: hidden;
white-space:normal;
text-overflow:ellipsis;
word-wrap:break-word;
line-clamp: 2;
box-orient:vertical;
}
九、创建视频详情页面。
1、在app.json文件中，会再page文件夹中，自动生成4个文件。
"pages": [
"pages/index/index",
"pages/detail/detail"
],
2、在navigator 标签中加上url
<navigator url="../detail/detail?id={{item.id}}" class="video-img" wx:for="{{movieList}}" wx:key="{{item.id}}">
3、在detail.json文件中，使用公共组件，修改顶部名称
{
"usingComponents": {
"myHeader": "../../components/myHeader/myHeader"
},
"navigationBarTitleText": "视频详情"
}
4、在detail.wxml文件中，使用公共组件
<view>
<myHeader></myHeader>
</view>
5、此时的界面是
6、使用视频详情接口，在视频详情页面通过id去请求数据。
7、在detail.js文件中，在生命周期函数中，打印的options就是获取到的id、
onLoad: function (options) {
console.log(options);
},
8、请求数据
onLoad: function (options) {
console.log(options);
let videoId = options.id;
this.getMovieDetail(videoId);
},
data(){
movieDetailData :[]
}
// 获取详情视频
getMovieDetail: function (videoId){
let that = this
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id='+videoId,
method:"get",
success(res){
console.log(res);
that.setData({
movieDetailData : res.data.data.videoInfo
})
}
})
},
9、在detail.wxml文件中，展示数据
<!-- 视频详情 -->
<view class="video_info" >
<!-- 视频标签 -->
<video src="{{movieDetailData.videoSrc}}"></video>
<!-- 视频标题 -->
<view class="video_title">{{movieDetailData.videoTitle}}</view>
<!-- 视频作者-->
<view class="video_detail">
<!-- 作者 -->
<text class="author">{{movieDetailData.author}}</text>
<!-- 播放量 -->
<text class="play_count">{{movieDetailData.playCount}}</text>
<!-- 评论量 -->
<text class="comment_count">{{movieDetailData.commentCount}}</text>
<!-- 时间 -->
<text class="date">{{movieDetailData.date}}</text>
</view>
</view>
