Hand in hand, use uni-app to develop a small video program from scratch (Development of actual combat in the series)

Hand in hand, use uni-app to develop a small video program from scratch (Development of actual combat in the series)

Series of articles

Scan code experience, see it soon

You can scan the QR code of the WeChat applet to experience the effect of the development

Code address:

Preface

Hello, meet again~

I believe that when you read this article, you have already read the preparations for the development of this small program in the previous article . If you are ready, let's start together!


Development

 

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           // 

Page development

1 Home page development

We have completed the initial work, and then we enter the development of each page.

1. we pagescreate an index directory under the directory -> create an index.vue file

After creating the file, you also need to add a route in pages.json: pagesjson file source address: pages.json

1.1 Homepage UI map

1.2 Core code analysis

" We can divide this page into three parts: big picture logo and search, carousel picture, movie list "

You can directly open the homepage source code ( homepage source code address ) and copy it to your index.vue file to view the effect of the page code. The page code is very simple. I will analyze the key code here.

 * @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' ,
  successfunction(res{
   console.log(" :" + JSON.stringify(res));
   that.shareClick();
  },
  failfunction(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,
 successfunction({
  console.log('item.images.small');
 }
 })
}
</script>

1.3 Summary

The whole page adds about 400 lines of css code. In fact, it is relatively simple. If you encounter problems in the process, you can leave a message in the comments below, and I will reply to your questions as soon as possible~

2 Detail page development

We have completed the home page, and then we enter the development of the list details page.

1. we pagescreate a detail directory under the directory -> create an index.vue file

After creating the file, you also need to add a detailroute in pages.json : pagesjson file source address: pages.json

2.1 Detailed UI diagram

2.2 Core code analysis

" We can still divide the page into three parts: the big picture of the movie, the introduction, the credits and reviews, and the trailer. "

For the details page code, you can directly open the source code of the details page ( detail page source code address ) and copy it to your/detail/index.vue file to view the effect. The page code is also very simple. I will analyze the key code as usual.

 * @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',
  successfunction(res{
  that.viewBg = res.data
 }
 });
}
</script>

2.3 Summary

Here is a forced summary. If you encounter a problem here, you can leave a message in the comment section. In addition to bedtime at night, I will reply to your questions as soon as possible~~

3 Search page

We have completed the homepage and details. Is it easier than you think, next we enter the development of the search page.

First we pagescreate in the directory search -> createindex.vue

The old rule, after creating the file, you need to add a searchroute in pages.json : pagesjson file source address: pages.json

3.1 Search UI map

3.2 Core code analysis

" We can still divide this page into..., into two modules, the search box and the list after the search below "

Search page code, as in the previous section, you can directly open the source code of the search page ( search page source code address ) and copy it to your/search/index.vue file to view the effect. The page code is also very simple. I still, as usual, still keep the key Code analysis.

 * @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>

Some of the logic of the search page is basically the same as that of the home page, so I won t go into details here.

postscript

It s a little bit now, and the more I write, the more I admire the big guys who have been insisting on blogging. It may only take a few minutes for us to open and read an article, but it may take a few days to write a high-quality blog. Pay tribute to all bloggers~

The three pages of this project are less than 2000 lines of code. It is easy to read and get started. If you encounter problems or write errors in the process, you can leave a message in the comments below, and I will reply as soon as possible.

Here " hand in hand to write small programs " journey in relation to the end and look forward to see you next time!

Thank you for taking the time to read this article, I hope it can be helpful to you, rest early, don t stay up too late and dreams will be short