目錄結構

├── 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站，目前只實現了一些力所能及的功能，以后會完善的。

部分功能實現

頂部導航欄

“` 

```
 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▽￣)~

#### 分享功能
其實也是對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級。(:з」∠)

項目地址

最后要說的話

現在的自己技術還是有些不太成熟，接觸小程序不久，還有很多需要學習的地方，不能很好的重現嗶哩嗶哩的功能，不過作為一個學生，還有很長的學習之路要走。  最后希望能得到各位在求學路上同行的小伙伴的小星星?，謝謝(´∀｀)?