After autumn comes winter. 2017 is coming to an end, this year carries too many memories, a Tencent video demo to help us record these sad, or beautiful, or moving moments.

A copy of Tencent video small program:

Development tools:

  • Wechat developer tools
  • Applets development documentation
  • Iconfont Vector icon library: You can find the appropriate tabBar icon
  • Easy-mock: Provides a virtual data interface
  • Wilddog: Real-time data synchronization at the millisecond level without having to build your own back-end server

Project functions:

1. Realized functions:

  • Restore the home page interface
  • Load, refresh, jump and other basic events
  • Swiper and Scroll events
  • Easy mock is used to get data from the background
  • Use WildDog to achieve search history records, wechat login functions, etc

2. Still working on features:

  • Precise search matching
  • Comment, reply and other functions
  • View history function

Page registration:

Pages /videos/videos", // short video "pages/mine/mine", // my "pages/search/search", // my "pages/search/search", // my "pages/search/search", Pages /channel/channel", // channel" pages/playing/playing", // play interfaceCopy the code

Project Presentation:

1. Display of home page:

The home page is actually more good-looking, beautiful and generous, it is a pity that the official version has been revised

  • The background of each swiper is bound to the first image

Index. WXML part of the code

  <image class="top-image" src="{{bannerList[activeBannerIndex].url}}" mode="widthFix"></image>
Copy the code

Index.js part of the code

BannerList: [{url: ".. /.. / images/hu_1 PNG "}, {url: ".. /.. / images/huang_1. JPG "}, {url: "../../images/zhao_1.jpg" } ],Copy the code

2. Display of short video and channel interface:

  • The data here is obtained from easy-mock

  • This is my interface, I did not do a lot, you can use it to practice, will be added later

    <swiper-item> <view class="swiper-item weui-tab__content" wx:for="{{wangzhe}}"> <view class="contain"> <view class="list-title">{{item.label}} ></view> <view class="detail" wx:for="{{item.video}}"> <image src="{{item.videoImage}}" mode="widthFix" class="wz"></image> <view class="list-font"><text>{{item.title}}</text></view>  </view> </view> </view> </swiper-item>Copy the code

  • Since the data are all pictures, I made a triangle playing icon with fake elements to restore authenticity

      .picture ::before
  {
  position: absolute;
  border:11px solid transparent;
  border-left:17px solid #fff;
  content: "";
  top: 100px;
  left: 180px;
  }
Copy the code

3. Display of the playing interface:

4. Display of search interface:

  • The search interface references the WeUI style

  • @import “./weui.wxss”;

    <view class="weui-search-bar"> <view class="weui-search-bar__form"> <view class="weui-search-bar__box"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> <input type="text" class="weui-search-bar__input" Placeholder ="{{inputVal}}" focus="{{inputShowed}}" bindinput="bindKeyInput"/> <view class="weui-icon-clear" bindtap="clearInput"> <icon type="clear" size="14"></icon> </view> </view> <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput"> <icon class="weui-icon-search" Type ="search" size="14"></icon> <view class="weui-search-bar__text" bindtap=""> Search </view> </label> </view> <view class="weui-search-bar__cancel-btn" hidden="{{! InputShowed}}" bindtap="addItem"> search </view> </view> <view class="search-log" wx:for="{{searchs}}"> <text style="font-size:14px; font-family:microsoft yahei">{{item.text}}</text> <icon type="clear" class="inline" bindtap="deleteItem" data-key="{{item.key}}" size="14"></icon> </view> </view>Copy the code

  • Hidden search record and search box

    Data :{searchs:[], current:null, hidden:true, // Load the display whether scrollTop: 0, // the top height inputShowed: False, // search input box is displayed inputVal: "", // search content histroyShowed:true // search record}Copy the code

About the wilddog

Using dingo SDK, we can achieve a variety of real-time functions, can modify background data in each terminal, message delivery milliseconds can reach, can provide a good help for small program developers online

This is hisThe official documentation

  • The first step is to import wilddog-eapp-all.js

      var wilddog = require('wilddog-weapp-all');
Copy the code

  • Reference to the interface created

      var config = {
        syncURL:'https://appid.wilddogio.com',
        authDomain:'appid.wilddog.com'
      }
Copy the code

Appid Specifies the id of the application created for you

  • Wilddog stores data in the form of key-values, and creating a reference locates it to the root node. To locate the child node, simply append the path to the URL:

  • Use the dingo child() method to obtain the child node, to achieve the function of deleting and adding

    addItem:function(){ if(this.data.current ! = null){app.js app.addItem(this.data.current)} this.setData({inputVal:""})}, deleteItem:function(e){ var key = e.target.dataset.key; this.ref.child(key).remove(); }, onLoad:function(options){ this.ref = app.getTodoRef(); This.ref. on('child_added',function(snapshot,prkey){var key = snapshot.key() var text = snapshot.val() // JSON structure var newItem = {key:key, text:text} this.data.searchs.push(newItem); this.setData({ searchs:this.data.searchs }) },this); this.ref.on('child_removed',function(snapshot){ var key = snapshot.key(); var index = this.data.searchs.findIndex( (item,index)=>{ if(item.key == key){ return true; } return false; }); if(index >= 0){ this.data.searchs.splice(index,1); this.setData({ searchs:this.data.searchs }) } },this) }Copy the code

Tips:

1. Problems encountered:

  • After writing the data, I realized that everything was missing:

    Applets support only http:// service requests

  • When quizzing on your phone, Chika never beats:

    -webkit-overflow-scrolling: touch;

  • During the mobile test, the entire page slides along:

    Add an overflow to the style to hide overflow:hidden;

  • If there is a problem with the JS section, console the key data, see if it can be printed, and then troubleshoot it

I encountered some problems during the development, which need to be considered slowly. Read more documents and be patient to solve them. Start your brain, good idea idea is very important, elegant programming, divergent thinking, put your imagination into code to achieve, is a very cool thing.

2. A few words:

If you want to change the world, then we can be friends. But if you want to sell sugared water for the rest of your life, then we can be friends. Because I’m just writing code to make friends. If you have any questions, you can find me in the following ways:

Eggs:

Finally, I present to you the three-minute Review of 2017 in demo. Thank you for your support and mutual encouragement.