1.小程序--项目搭建与配置

1.两个主页面：首先在pages下面新建一个home-music文件夹，但是对一个页面来说应该包含四个文件，直接右键，新建pages，就可以啦！

 这个小程序应该是包含两个主页面的，而且是通过tabbar进行切换的。再新建一个home-video文件夹。

2.tabbar：tabbar一方面可以自定义一个，另一方面也可以通过微信里面提供的直接配置，不需要开发一个组件。

 很显然这是一个全局配置，所以应该写在app.json中：

 现在tabbar就开发好啦，可以进行一个切换。

3.视频页面

3.1 这个页面比较单一，就是一个页面的展示，所以要从服务器获取数据。（数据是网易的，在github上是一个开源的数据（MIT协议），已经在服务器上部署好啦，我们直接用就行了。）

做这个页面时有一个小问题：每次打开这个小程序时会首先自动定位到音乐这个页面，那有没有办法让它定位到视频这个页面呢？

法一：

 调换一个位置，这样就可以了。

法二：

3.2网络请求 

我们希望的是视频这个页面一旦加载完，就请求数据，相当于vue的created生命周期。

发送网络请求需要用到一个API：

 在index.js中发起网络请求，但是你会发现会报错：

 它说我的请求不和合法域名列表中，可以采用以下方式暂时解决：

 现在编译器里面就可以拿到数据了，现在我们要把它放在data中。

 但是我的APPData里面居然看不到数据，我觉得很奇怪唉。重启一下就好了！

4.对网络请求API进行二次封装

 

 我其实觉得这里已经封装的可以了，但是还是可以进行进一步封装的。

 

 其实是一种分层的架构，这样代码就非常简介了。

下面还可以对网络请求做一些优化：

 

 

 

5.页面布局 

下面就开始视频页面布局：

 然后就是一些样式了。另外现在有两个小问题：

1.播放量太大了不应该这样显示

2.时间应该是时分秒

如果相对wxml中展示的数据进行修改，可以使用wxs(不支持ES6的语法)。

 

时间格式化功能：

 

 6.组件封装

如果封装的这个页面只在这个项目中使用--components，

如果封装的这个页面在其他项目中也使用--base-ui。（这里就不用这么复杂了，(*/ω＼*)）

里面有一些细节哦！

 将之前block里面的内容都放在index.wxml中，以及相关样式放到index.wxss中。要想在使用这个组件，需要先注册：

 那么怎么把数据传到组件中呢？

 

 另外要注意的是这里没有继续用block，而是改成了view。因为我们发现用block加自定义组件做flex布局会出现很多问题，

一般这种情况下可以在外层包裹一个view，对view做flex布局，而子组件的元素占据100%即可。

又有了新的问题：

 因为我没有把wxs导入自定义组件中：

7.上拉加载更多

 

 不过要注意的是这里请求的数据是有限的，一直下拉，程序会崩掉。所以在下拉时要进行一定的判断。

8.上拉刷新 

按以下操作页面就可以下拉刷新了：

 

 9.封装网络请求方法

通过前面的操作，我们会发现存在很多重复代码，那不如来封装一下把。

 10.下拉刷新小动画

下拉刷新其实本来就已经有了，只是颜色和背景白色一样，导致看不见了。

 这样就可以了。