小程序onload_哔哩哔哩【微信小程序】

一、bilibili项目介绍：

原生微信小程序

上传到简书：https://www.jianshu.com/p/1341f4f7c7c7

代码上传到github ：https://github.com/wcvwv/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;}

四、设置顶部标题，在json文件中

{  "usingComponents": {},//使用公共组件  "navigationBarTitleText": "哔哩哔哩"}

五、公共组件头部

1、在根目录下，新建一个文件夹components

2、在components文件夹下，新建myHeader文件夹，右键新建component，此时在myHeader文件夹中新建四个文件

3、使用公共组件，在index文件中的index.json,注册公共组件

"usingComponents": {    "myHeader":"../../components/myHeader/myHeader"   (名称加地址)  },

4、在index.wxml中使用公共组件 ==》就可以在首页看到公共组件

5、开始编写头部公共组件

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中的可滑动组件中进行循环，

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；设置上下标，点击事件【bindtap】

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标签

八、实现视频列表。

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文件中，

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

3、在detail.json文件中，使用公共组件，修改顶部名称

{  "usingComponents": {    "myHeader": "../../components/myHeader/myHeader"  },  "navigationBarTitleText": "视频详情"}

4、在detail.wxml文件中，使用公共组件

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文件中，展示数据