小程序模板網(wǎng)

微信小程序demo實(shí)戰(zhàn)教程:Bilibili排行榜

發(fā)布時(shí)間:2018-03-24 15:30 所屬欄目:小程序開(kāi)發(fā)教程

項(xiàng)目預(yù)覽圖

image

小程序?

隨著B(niǎo)ML和CJ的落幕,我的內(nèi)心有一種期許,生為一個(gè)未來(lái)的程序員,當(dāng)然要?jiǎng)邮肿鲆粋€(gè)嗶哩嗶哩項(xiàng)目,想起最近熱門的小程序,自己抱著學(xué)習(xí)的態(tài)度制作了一個(gè)bilibili小程序,希望大家能支持一下,并提出你寶貴的意見(jiàn)。

我們能做什么?

作為一個(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í)(?ò ∀ ó?)

項(xiàng)目工具及文檔

  1. 微信web開(kāi)發(fā)者工具:微信小程序官網(wǎng) 微信開(kāi)發(fā)的小程序編輯軟件,下載安裝即可使用;
  2. 開(kāi)發(fā)文檔:微信小程序?qū)毜涿丶?nbsp;這里面詳細(xì)的介紹了小程序的各種信息,包括組件、框架、API等等,有很多值得我們?nèi)ラ喿x的信息;
  3. 圖標(biāo)庫(kù): Iconfont-阿里巴巴矢量圖標(biāo)庫(kù) 這個(gè)是網(wǎng)站簡(jiǎn)直是神器,什么圖標(biāo)都能找到,我很喜歡。

目錄結(jié)構(gòu)

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

頁(yè)面注冊(cè)

app.json

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

項(xiàng)目功能

已實(shí)現(xiàn)功能:

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

未實(shí)現(xiàn)功能:

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

部分功能實(shí)現(xiàn)

頂部導(dǎo)航欄

“` 

```
 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)畫部分 */  // 第1步:創(chuàng)建動(dòng)畫實(shí)例  var animation = wx.createAnimation({  duration: 200, //動(dòng)畫時(shí)長(zhǎng)  timingFunction: “linear”, //線性  delay: 0 //0則不延遲  });

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

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

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

// 第5步:設(shè)置定時(shí)器到指定時(shí)候后,執(zhí)行第二組動(dòng)畫 
setTimeout(function () {
  // 執(zhí)行第二組動(dòng)畫:Y軸不偏移,停 
  animation.translateY(0).step()
  // 給數(shù)據(jù)對(duì)象儲(chǔ)存的第一組動(dòng)畫,更替為執(zhí)行完第二組動(dòng)畫的動(dòng)畫對(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)畫效果,沿著y軸滾動(dòng)出現(xiàn),利用計(jì)時(shí)器不停播放多組動(dòng)畫,抽屜效果也就是對(duì)遮罩層的利用,然后利用動(dòng)畫效果,將彈出欄顯示出來(lái),在制作時(shí),記得讓視頻暫停,這樣才能給用戶一個(gè)好的體驗(yàn),畢竟沒(méi)有人想錯(cuò)過(guò)一部精彩的視頻( ̄y▽ ̄)~

#### 分享功能
其實(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();  }  }  }  “`

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

分享api格式

onShareAppMessage: function () {  return {  title: '自定義分享標(biāo)題',  path: '/page/user?id=123'  }  }  但是這個(gè)id很多人不明白是什么id,之前我也不明白,后來(lái)發(fā)現(xiàn)這個(gè)id就是你要分享的這篇文章的id,但是一定要注意異步與同步的問(wèn)題。

遇到的問(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í)。(:з」∠)

項(xiàng)目地址

https://github.com/wuyangshu/bilibili

最后要說(shuō)的話

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


本文地址:http://22321a.com/wxmini/doc/course/22856.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢