小程序實戰--仿bilibil（嗶哩嗶哩）小程序

時間 2019-12-07

標籤程序實戰 bilibil 简体版

原文原文鏈接

項目預覽圖

小程序？大改變？

以前就被朋友安利使用小程序，最近接近了小程序，發現了它居然帶來了一場「大革命」。html

簡單說，它就是一個能夠實現以前只能是原生態APP能夠實現的效果和功能。好比說，一些酷炫的頁面與轉場，一些能夠直接和手機硬件交互的功能，錄音啊，拍視頻啊，調用手機的重力感應啊，GPS啊等等。git

專業點來講，是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或搜一下便可打開應用。web

小程序的輕量化帶來了app所不具備的許多優勢，它同時也在向着咱們的平常app「宣戰」，這場戰爭花落誰家，就讓咱們拭目以待吧。json

製做簡單？

小程序做爲一顆冉冉升起的新星，他之因此能被你們接受，不只僅是由於他的輕量化，脫去了app的繁重外殼，還由於他很容易上手。在通過幾天時間去熟悉小程序的構建和說明文檔等，我這種初學者也能慢慢地摸到小程序的門檻，進入小程序這個新世界，完成本身的構思。小程序

咱們能作什麼？

做爲一個二次元愛好者（別看着我，我固然不是死宅(ノ=Д=)ノ┻━┻），使用最多的app固然就是我大b站了（嗶哩嗶哩 (゜-゜)つロ乾杯~-bilibili），因此應着本身的愛好，嘗試着製做了一個嗶哩嗶哩的小程序，途中簡直是經歷了千難萬險，最後由於能力問題只是製做了一個半成品，尚有不少功能還沒有實現，可是我是有夢想的人，以後仍是要多學習，將它慢慢完善，此次就當交流，你們互相學習（｡ò ∀ ó｡）微信小程序

項目工具及文檔

微信web開發者工具： 微信小程序官網微信開發的小程序編輯軟件，下載安裝便可使用；
開發文檔： 微信小程序寶典祕籍這裏面詳細的介紹了小程序的各類信息，包括組件、框架、API等等，有不少值得咱們去閱讀的信息；
圖標庫： Iconfont-阿里巴巴矢量圖標庫這個是網站簡直是神器，什麼圖標都能找到，我很喜歡。

目錄結構

├── app.js
├── app.json
├── app.wxss
├── utils
│   └── util.js
├── pages
│   ├── common
│   │   ├── header.wxml
│   │   └── item.wxml
│   ├── index
│   │   ├── index.js
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── selectColor
│   │   ├── selectColor.js
│   │   ├── selectColor.wxml
│   │   └── selectColor.wxss
│   ├── play
│   │   ├── play.js
│   │   ├── play.json
│   │   ├── play.wxml
│   │   └── play.wxss
└── resources
    └── images

頁面註冊

app.json

"pages":[
        "pages/index/index",
        "pages/play/play",    
        "pages/selectColor/selectColor"
      ],

項目功能

已實現功能：

廣告輪播圖
視頻播放
彈幕功能
彈窗功能
分享功能

未實現功能：

這個有點多。。。畢竟是我大B站，目前只實現了一些力所能及的功能，之後會完善的。api

部分功能實現

頂部導航欄

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
         <text wx:for="{{section}}" wx:key="id" id="{{item.id}}" catchtap="handleTap"
               class="nav-name {{item.id == currentId ? 'nav-hover' : ''}}"
               style=" padding-right:{{topdistance}}px;padding-left:{{topdistance}}px">{{item.name}}</text>
       </scroll-view>
     </view>
   </view>
   <block wx:if="{{currentId == 1001}}">
   <view class="slider-wrapper">
   <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
      interval="{{interval}}" duration="{{duration}}" indicator-active-color="#EA6CAF">
         <block wx:for="{{imgUrls}}">
           <swiper-item>
              <navigator url="{{item.link}}" hover-class="navigator-hover">
               <image src="{{item.url}}" class="slide-image" width="355" height="150" />
              </navigator>
           </swiper-item>
         </block>
   </swiper>
 </view>

onLoad: function (options) {
    // 頁面初始化 options爲頁面跳轉所帶來的參數
    this.setTopDistance();
    this.setData({
      stagePoint: util.stagePoint()
    })
    if (this.data.currentId == 1001) {
      this.Page();
    }
    else if (this.data.currentId == 1004) {
      this.channelPage();
    }
    else if (this.data.currentId == 1003) {
      this.livePage();
    }
  }

頂部導航欄實際就是利用scroll-view控件，給他綁定當前頁面的id，當觸發點擊事件時，加載與該id匹配的信息。要注意的是一開始要給currentId一個頁面的值，否則沒法顯示出來。微信

彈幕功能

小程序自己具有彈幕功能，閱讀api，對着原版代碼進行了一些改變，實現了彈幕本身選擇顏色，而且將彈幕和彈出層結合在一塊兒使用。微信開發

Page({
  inputValue: '',
  data: {
    isRandomColor: true,
    src: '',
    numberColor: "#ff0000",
    danmuList: [{
      text: '這波不虧呀',
      color: '#ff0000',
      time: 1
    }, {
      text: '大神666',
      color: '#00ff00',
      time: 2
    },
    {
      text: '此生無悔入fate',
      color: '#D9D919',
      time: 3
    },
    {
      text: '吾王賽高（｡ò ∀ ó｡）',
      color: '#C0D9D9',
      time: 4
    }
    ],
    showModalStatus: false
  },
  powerDrawer: function (e) {
    var currentStatu = e.currentTarget.dataset.statu;
    this.util(currentStatu)
  },
  util: function (currentStatu) {
    /* 動畫部分 */
    // 第1步：建立動畫實例 
    var animation = wx.createAnimation({
      duration: 200, //動畫時長 
      timingFunction: "linear", //線性 
      delay: 0 //0則不延遲 
    });

    // 第2步：這個動畫實例賦給當前的動畫實例 
    this.animation = animation;

    // 第3步：執行第一組動畫：Y軸偏移240px後(盒子高度是240px)，停 
    animation.translateY(240).step();

    // 第4步：導出動畫對象賦給數據對象儲存 
    this.setData({
      animationData: animation.export()
    })

    // 第5步：設置定時器到指定時候後，執行第二組動畫 
    setTimeout(function () {
      // 執行第二組動畫：Y軸不偏移，停 
      animation.translateY(0).step()
      // 給數據對象儲存的第一組動畫，更替爲執行完第二組動畫的動畫對象 
      this.setData({
        animationData: animation
      })

      //關閉抽屜 
      if (currentStatu == "close") {
        wx.createVideoContext('myVideo').play();
        this.setData(
          {
            showModalStatus: false,
          }
        );
      }
    }.bind(this), 200)

    // 顯示抽屜 
    if (currentStatu == "open") {
      wx.createVideoContext('myVideo').pause();
      this.setData(
        {
          showModalStatus: true
        }
      );
    }
  },
  onLoad: function onLoad() {
    var _this = this;
    wx.getSystemInfo({
      success: function success(res) {
        // video標籤默認寬度300px、高度225px
        var windowWidth = res.windowWidth;
        var videoHeight = 225 / 300 * windowWidth;
        _this.setData({
          videoWidth: windowWidth,
          videoHeight: videoHeight
        });
      }
    });
  },
  onReady: function onReady(res) {
    this.videoContext = wx.createVideoContext('myVideo');
  },
  onShow: function onShow() {
    var _this = this;
    wx.getStorage({
      key: 'numberColor',
      success: function success(res) {
        _this.setData({
          numberColor: res.data
        });
      }
    });
  },
  bindInputBlur: function (e) {
    this.inputValue = e.detail.value;
  }
  }
})

參考了開源代碼後，發現彈幕其實就是對字進行動畫效果，沿着y軸滾動出現，利用計時器不停播放多組動畫，抽屜效果也就是對遮罩層的利用，而後利用動畫效果，將彈出欄顯示出來，在製做時，記得讓視頻暫停，這樣才能給用戶一個好的體驗，畢竟沒有人想錯過一部精彩的視頻(￣y▽￣)~app

分享功能

其實也是對api的一種利用，（這裏強調一下，api真的很重要，喜歡你們好好閱讀），微信小程序也是前段時間才能夠經過按鈕實現分享功能。

onShareAppMessage: function onShareAppMessage() {
    wx.createVideoContext('myVideo').pause();
    return {
      title: '【Fate全系列】英靈亂鬥: 奪回將來的戰爭「Grand Order」',
      desc: '【Fate全系列】英靈亂鬥: 奪回將來的戰爭「Grand Order」',
      path: '/pages/play/play',
      success: function (res) {
        // 轉發成功
        wx.showToast({
          title: '成功',
          icon: 'succes',
          duration: 1000,
          mask: true
        })
          wx.createVideoContext('myVideo').play();       
      },
      fail: function (res) {
        // 轉發失敗
        wx.showToast({
          title: '失敗',
          icon: 'fail',
          duration: 1000,
          mask: true
        })
          wx.createVideoContext('myVideo').play();
      }
    }
  }

這是個人寫法，下面給出api內容，能夠根據不一樣人的想法進行修改。

分享api格式

onShareAppMessage: function () {
   return {
     title: '自定義分享標題',
     path: '/page/user?id=123'
   }
 }

可是這個id不少人不明白是什麼id，以前我也不明白，後來發現這個id就是你要分享的這篇文章的id，可是必定要注意異步與同步的問題。

踩過的坑<(｀^´)>

1.微信小程序的編譯包是不能超過2M的，一開始放了一大堆的本地圖片，結果打包的時候，告訴我太大了，無奈下想辦法將圖片上傳到雲端，將圖片連接化；

2.再次強調，小程序api很重要，裏面包含了不少知識，個人彈幕功能也是後來查找時發現了api，這可讓咱們少走不少彎路；

3.重要的事情說三遍，頁面內跳轉不能超過5級，頁面內跳轉不能超過5級，頁面內跳轉不能超過5級。_(:з」∠)_

項目地址

http://git.oschina.net/djcx/XiaoChengXuShiZhan--FangbilibilXiaoChengXu

最後要說的話

如今的本身技術仍是有些不太成熟，接觸小程序不久，還有不少須要學習的地方，不能很好的重現嗶哩嗶哩的功能，不過做爲一個學生，還有很長的學習之路要走。

最後但願能獲得各位在求學路上同行的小夥伴的小星星:star:，謝謝(´∀｀)♡

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。