手牵手，使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)

系列文章

• 手牵手，使用uni-app从零开发一款视频小程序 (系列上 准备工做篇)

• 手牵手，使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)

扫码体验，先睹为快

能够扫描下微信小程序的二维码，体验一下开发完毕的效果：

代码地址:

• GitHub : https://github.com/Tzlibai/uni-app-video -- Star 100+

• uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=1839 -- 插件下载量1000+

前言

Hello，又见面了~

相信你看到这篇文章的时候已经阅读了上篇文章的开发这个小程序的准备工做，若是你准备好了，那接下来让咱们一块儿开始吧！

---

开发

本机当前环境：

操做系统：Windows 10

// 软件版本
Vue.js    ： 2.9.6
Node.js   ： v12.13.0
HBuilderX ： 2.7.5.20200519
QQMusic   ： 17.77.5338.0714    // 锻炼听力专用
WeChat    ： 2.9.5.41           // 寻找对象专用

页面开发

1 首页的页面开发

初始工做咱们已经完成了，接下来咱们进入每一个页面的开发。

首先咱们在pages目录下建立index目录 -> 建立index.vue文件

建立好文件以后，还须要在pages.json中添加路由：pagesjson文件源码地址：pages.json

1.1 首页的UI图

1.2 核心代码分析

「咱们能够把该页面分红三个部分：大图Logo及搜索、轮播图、电影列表」

页面代码你们能够直接打开首页源码（首页源码地址）复制到你的 index.vue 文件中查看效果，页面代码很是简单，我这边把关键代码分析下。

 * @description:  首页伪代码示例
 * @author:       zhc
 * @date:         2020-08-17 22:27:32

<template>
 <view class="container">
  <!-- loading动画 -->
  <mi-loading ref="loading" title="加载中" :hasMask="true"></mi-loading>
  <!-- 整个页面使用<scroll-view>标签 -->
  <scroll-view>

      
### 大图Logo及搜索 --正常编写
  <view class="topBar">
   <image src="~@/static/img/banner.png" mode="widthFix" class="response"></image>
   <view class="search-t">请输入关键字搜索</view>
   </view>  

      
### 轮播图 --使用的colorui的组件
   <swiper>
    <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''" @click="getBanner(item)">
     <view class="swiper-item">
      <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
     </view>
    </swiper-item>
   </swiper>

      
### 电影列表 --写好样式，使用v-for循环添加，使用<uni-load-more>标签上拉加载更多
   <view class="movieH">豆瓣高分</view>
   <view class="movieBox">
   </view>
   <uni-load-more :status="listStatus" :contentText="contentText" v-if="loadStatu"></uni-load-more>
  </scroll-view>
 </view>
</template>
<script>
// onShareAppMessage函数做用是点击右上角分享小程序，能够配置分享的名称及成功或者失败后的回调函数
onShareAppMessage: function(res) {
 var that = this;
 return {
  title: '老赵的杂货铺',
  path: 'pages/index/index' ,
  success: function(res) {
   console.log("转发成功:" + JSON.stringify(res));
   that.shareClick();
  },
  fail: function(res) {
  console.log("转发失败:" + JSON.stringify(res));
  }
 }
}

// onReachBottom函数做用是页面触底触发的函数，当加载必定数量，提示没有更多了
onReachBottom: function() { 
 console.log('触底’')
 this.getmorenews()
}   

// 这里操做了Storage，把首页的图片和标题存储起来，用做详情页的背景图片和标题
getDate(item) {
 uni.setStorage({
  key: 'storage_bg',
 data: item.images.small,
 success: function() {
  console.log('item.images.small');
 }
 })
}
</script>

1.3 总结

整个页面加上css代码总共400行左右，其实仍是比较简单，若是你在过程当中遇到了问题，能够在下面评论处留言，我会第一时间回复你的疑问~

2 详情页面开发

首页咱们已经完成了，接下来咱们进入列表详情页面的开发。

首先咱们在pages目录下建立detail目录 -> 建立index.vue文件

建立好文件以后，还须要在pages.json中添加detail路由：pagesjson文件源码地址：pages.json

2.1 详情的UI图

2.2 核心代码分析

「咱们依旧能够把该页面分红三个部分：电影大图、简介、演职员及评论、预告片」

详情页面代码你们能够直接打开详情页的源码（详情页源码地址）复制到你的 /detail/index.vue 文件中查看效果，页面代码也是很是简单，我照例把关键代码分析下。

 * @description:  详情页面伪代码示例
 * @author:       zhc
 * @date:         2020-08-17 22:54:09

<template>  
### 电影大图
  <view class="detailBgMax">
   <view class="detailBg" :style="{backgroundImage: 'url(' + viewBg + ')'}">></view>
  </view>

  
### 简介、演职员及评论
  <scroll-view class="scrollBox">
    <text v-if="summarStatu">剧情简介: </text>
    <text v-if="summarStatu">演职员: </text>
    <text class="hTitle" v-if="summarStatu">精选评论</text>
        <!-- 评分标签使用的是uni自带的<uni-rate> -->
        <uni-rate></uni-rate>
  </scroll-view>

  
### 预告片
    <!-- #ifdef MP-WEIXIN || MP-BAIDU,条件注释语句，让预告片只在微信小程序上显示，由于当时使用uni-app把该项目代码打包成APP时视频出了一些问题，因此加了条件注释，让其只在微信小程序上显示 -->
  <!-- #ifdef MP-WEIXIN || MP-BAIDU -->
  <view style="width: 98%;margin: 0 auto;">预告片 / 剧照
   <video controls></video>
    </view>
  <!-- #endif -->
</template>
<script>
  // onLoad是当页面加载完毕执行，在这里读取了首页存储的图片和标题，
  // 咱们经过UI图能够发现背景图会随着不一样页面而变化，其实背景图就是首页存储的图片
  // 经过CSS属性 filter: blur(60rpx)，把图片处理成模糊的效果
  onLoad: function(option) {
  // 获取本地存储的图片
  uni.getStorage({
  key: 'storage_bg',
  success: function(res) {
  that.viewBg = res.data
 }
 });
}
</script>

2.3 总结

这里强行总结一下,若是你在这里遇到了问题，能够在评论处留言，除了夜里睡觉时间，我会第一时间回复你的疑问~~

3 搜索页面

首页、详情咱们已经完成了，是否是比你想象中的简单，接下来咱们进入搜索页面的开发。

首先咱们在pages目录下建立search目录 -> 建立index.vue文件

老规矩，建立好文件以后，还须要在pages.json中添加search路由：pagesjson文件源码地址：pages.json

3.1 搜索的UI图

3.2 核心代码分析

「咱们依旧能够把该页面分红...，分红两个模块，搜索框、下方搜索以后的列表」

​ 搜索页面代码你们如上节同样能够直接打开搜索页面的源码（搜索页面源码地址）复制到你的 /search/index.vue 文件中查看效果，页面代码也是很是简单，我依旧、照例、仍是把关键代码分析下。

 * @description:  搜索页面伪代码示例
 *  @author:      zhc
 * @date:         2020-08-17 23:40:13

<template>
### 搜索框
  <view style="background-color: #CAF2F2">
   <cu-custom :isBack="true">
        <input class="search-t" placeholder="请输入关键字搜索" @input="messagesearch"></input>
   </cu-custom>
  </view>


### 搜索以后的列表
  <scroll-view>
   <!-- 电影列表 -->
   <view class="movieH">搜索结果</view>
   <view class="movieBox">
    <view v-for="(item, index) in movieInfo" ></view>
   </view>
  </scroll-view>
</template>

搜索页面的一些逻辑其实和首页的基本相同，这里就不作过多赘述。

后记

如今已经一点了，越写越佩服一直在坚持写博客的大佬们，咱们打开阅读一篇文章可能只须要几分钟，可是编写一篇优质的博客可能须要几天，向全部的博主致敬~

这个项目三个页面下来代码不到2000行，阅读上手仍是比较容易,若是在过程当中遇到问题或是编写错误，能够在下方评论处留言，我会第一时间回复.

到这里「手牵手写小程序」的旅程就该结束了，期待下次再见!

谢谢你愿意花时间阅读这篇文章，但愿能够对你有所帮助，早点休息，别熬太晚梦会短~