摘要：微信小程序?qū)W習(xí)仿嗶哩嗶哩制作的小程序待完善項(xiàng)目預(yù)覽圖小程序大改變之前就被朋友安利使用小程序，最近接近了小程序，發(fā)現(xiàn)了它竟然帶來(lái)了一場(chǎng)大革命。

之前就被朋友安利使用小程序，最近接近了小程序，發(fā)現(xiàn)了它竟然帶來(lái)了一場(chǎng)“大革命”。
簡(jiǎn)單說(shuō)，它就是一個(gè)可以實(shí)現(xiàn)之前只能是原生態(tài)APP可以實(shí)現(xiàn)的效果和功能。比如說(shuō)，一些酷炫的頁(yè)面與轉(zhuǎn)場(chǎng)，一些可以直接和手機(jī)硬件交互的功能，錄音啊，拍視頻啊，調(diào)用手機(jī)的重力感應(yīng)啊，GPS啊等等。
專(zhuān)業(yè)點(diǎn)來(lái)說(shuō)，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶(hù)掃一掃或搜一下即可打開(kāi)應(yīng)用。
小程序的輕量化帶來(lái)了app所不具有的許多優(yōu)點(diǎn)，它同時(shí)也在向著我們的日常app“宣戰(zhàn)”，這場(chǎng)戰(zhàn)爭(zhēng)花落誰(shuí)家，就讓我們拭目以待吧。

小程序作為一顆冉冉升起的新星，他之所以能被大家接受，不僅僅是因?yàn)樗妮p量化，脫去了app的繁重外殼，還因?yàn)樗苋菀咨鲜帧Ｔ诮?jīng)過(guò)幾天時(shí)間去熟悉小程序的構(gòu)建和說(shuō)明文檔等，我這種初學(xué)者也能慢慢地摸到小程序的門(mén)檻，進(jìn)入小程序這個(gè)新世界，完成自己的構(gòu)思。

作為一個(gè)二次元愛(ài)好者（別看著我，我當(dāng)然不是死宅(ノ=Д=)ノ┻━┻），使用最多的app當(dāng)然就是我大b站了（嗶哩嗶哩 (゜-゜)つロ 干杯~-bilibili），所以應(yīng)著自己的愛(ài)好，嘗試著制作了一個(gè)嗶哩嗶哩的小程序，途中簡(jiǎn)直是經(jīng)歷了千難萬(wàn)險(xiǎn)，最后因?yàn)槟芰?wèn)題只是制作了一個(gè)半成品，尚有很多功能尚未實(shí)現(xiàn)，但是我是有夢(mèng)想的人，之后還是要多學(xué)習(xí)，將它慢慢完善，這次就當(dāng)交流，大家互相學(xué)習(xí)（?ò ? ó?）

微信web開(kāi)發(fā)者工具：微信小程序官網(wǎng) 微信開(kāi)發(fā)的小程序編輯軟件，下載安裝即可使用；

開(kāi)發(fā)文檔：微信小程序?qū)毜涿丶?這里面詳細(xì)的介紹了小程序的各種信息，包括組件、框架、API等等，有很多值得我們?nèi)ラ喿x的信息；

圖標(biāo)庫(kù)： Iconfont-阿里巴巴矢量圖標(biāo)庫(kù) 這個(gè)是網(wǎng)站簡(jiǎn)直是神器，什么圖標(biāo)都能找到，我很喜歡。

├── 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
    

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

廣告輪播圖

視頻播放

彈幕功能

彈窗功能

分享功能

這個(gè)有點(diǎn)多。。。畢竟是我大B站，目前只實(shí)現(xiàn)了一些力所能及的功能，以后會(huì)完善的。

       
         {{item.name}}
       
     
   
   
   
   
         
           
              
               
              
           
         
   
 

 onLoad: function (options) {
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
    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();
    }
  }

頂部導(dǎo)航欄實(shí)際就是利用scroll-view控件，給他綁定當(dāng)前頁(yè)面的id，當(dāng)觸發(fā)點(diǎn)擊事件時(shí)，加載與該id匹配的信息。要注意的是一開(kāi)始要給currentId一個(gè)頁(yè)面的值，不然無(wú)法顯示出來(lái)。

小程序本身具備彈幕功能，閱讀api，對(duì)著原版代碼進(jìn)行了一些改變，實(shí)現(xiàn)了彈幕自己選擇顏色，并且將彈幕和彈出層結(jié)合在一起使用。

Page({
  inputValue: "",
  data: {
    isRandomColor: true,
    src: "",
    numberColor: "#ff0000",
    danmuList: [{
      text: "這波不虧呀",
      color: "#ff0000",
      time: 1
    }, {
      text: "大神666",
      color: "#00ff00",
      time: 2
    },
    {
      text: "今生無(wú)悔入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) {
    /* 動(dòng)畫(huà)部分 */
    // 第1步：創(chuàng)建動(dòng)畫(huà)實(shí)例 
    var animation = wx.createAnimation({
      duration: 200, //動(dòng)畫(huà)時(shí)長(zhǎng) 
      timingFunction: "linear", //線(xiàn)性 
      delay: 0 //0則不延遲 
    });

    // 第2步：這個(gè)動(dòng)畫(huà)實(shí)例賦給當(dāng)前的動(dòng)畫(huà)實(shí)例 
    this.animation = animation;

    // 第3步：執(zhí)行第一組動(dòng)畫(huà)：Y軸偏移240px后(盒子高度是240px)，停 
    animation.translateY(240).step();

    // 第4步：導(dǎo)出動(dòng)畫(huà)對(duì)象賦給數(shù)據(jù)對(duì)象儲(chǔ)存 
    this.setData({
      animationData: animation.export()
    })

    // 第5步：設(shè)置定時(shí)器到指定時(shí)候后，執(zhí)行第二組動(dòng)畫(huà) 
    setTimeout(function () {
      // 執(zhí)行第二組動(dòng)畫(huà)：Y軸不偏移，停 
      animation.translateY(0).step()
      // 給數(shù)據(jù)對(duì)象儲(chǔ)存的第一組動(dòng)畫(huà)，更替為執(zhí)行完第二組動(dòng)畫(huà)的動(dòng)畫(huà)對(duì)象 
      this.setData({
        animationData: animation
      })

      //關(guān)閉抽屜 
      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標(biāo)簽?zāi)J(rèn)寬度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;
  }
  }
})

參考了開(kāi)源代碼后，發(fā)現(xiàn)彈幕其實(shí)就是對(duì)字進(jìn)行動(dòng)畫(huà)效果，沿著y軸滾動(dòng)出現(xiàn)，利用計(jì)時(shí)器不停播放多組動(dòng)畫(huà)，抽屜效果也就是對(duì)遮罩層的利用，然后利用動(dòng)畫(huà)效果，將彈出欄顯示出來(lái)，在制作時(shí)，記得讓視頻暫停，這樣才能給用戶(hù)一個(gè)好的體驗(yàn)，畢竟沒(méi)有人想錯(cuò)過(guò)一部精彩的視頻(￣y▽?zhuān)?~

其實(shí)也是對(duì)api的一種利用，（這里強(qiáng)調(diào)一下，api真的很重要，喜歡大家好好閱讀），微信小程序也是前段時(shí)間才可以通過(guò)按鈕實(shí)現(xiàn)分享功能。

onShareAppMessage: function onShareAppMessage() {
    wx.createVideoContext("myVideo").pause();
    return {
      title: "【Fate全系列】英靈亂斗: 奪回未來(lái)的戰(zhàn)爭(zhēng)「Grand Order」",
      desc: "【Fate全系列】英靈亂斗: 奪回未來(lái)的戰(zhàn)爭(zhēng)「Grand Order」",
      path: "/pages/play/play",
      success: function (res) {
        // 轉(zhuǎn)發(fā)成功
        wx.showToast({
          title: "成功",
          icon: "succes",
          duration: 1000,
          mask: true
        })
          wx.createVideoContext("myVideo").play();       
      },
      fail: function (res) {
        // 轉(zhuǎn)發(fā)失敗
        wx.showToast({
          title: "失敗",
          icon: "fail",
          duration: 1000,
          mask: true
        })
          wx.createVideoContext("myVideo").play();
      }
    }
  }

?這是我的寫(xiě)法，下面給出api內(nèi)容，可以根據(jù)不同人的想法進(jìn)行修改。

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

但是這個(gè)id很多人不明白是什么id，之前我也不明白，后來(lái)發(fā)現(xiàn)這個(gè)id就是你要分享的這篇文章的id，但是一定要注意異步與同步的問(wèn)題。

1.微信小程序的編譯包是不能超過(guò)2M的，一開(kāi)始放了一大堆的本地圖片，結(jié)果打包的時(shí)候，告訴我太大了，無(wú)奈下想辦法將圖片上傳到云端，將圖片鏈接化；
2.再次強(qiáng)調(diào)，小程序api很重要，里面包含了很多知識(shí)，我的彈幕功能也是后來(lái)查找時(shí)發(fā)現(xiàn)了api，這可以讓我們少走很多彎路；
3.重要的事情說(shuō)三遍，頁(yè)面內(nèi)跳轉(zhuǎn)不能超過(guò)5級(jí)，頁(yè)面內(nèi)跳轉(zhuǎn)不能超過(guò)5級(jí)，頁(yè)面內(nèi)跳轉(zhuǎn)不能超過(guò)5級(jí)。_(:з」∠)_

https://github.com/wuyangshu/...

現(xiàn)在的自己技術(shù)還是有些不太成熟，接觸小程序不久，還有很多需要學(xué)習(xí)的地方，不能很好的重現(xiàn)嗶哩嗶哩的功能，不過(guò)作為一個(gè)學(xué)生，還有很長(zhǎng)的學(xué)習(xí)之路要走。
最后希望能得到各位在求學(xué)路上同行的小伙伴的小星星?，謝謝(′?｀)?