小程序?qū)崙?zhàn)--仿bilibil（嗶哩嗶哩）小程序

時(shí)間：2023-04-23 16:42:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-04-23 16:42:02 來源：網(wǎng)站運(yùn)營

小程序?qū)崙?zhàn)--仿bilibil（嗶哩嗶哩）小程序：摘要: 之前就被朋友安利使用小程序，最近接近了小程序，發(fā)現(xiàn)了它竟然帶來了一場(chǎng)“大革命”。 簡(jiǎn)單說，它就是一個(gè)可以實(shí)現(xiàn)之前只能是原生態(tài)APP可以實(shí)現(xiàn)的效果和功能。比如說，一些酷炫的頁面與轉(zhuǎn)場(chǎng)，一些可以直接和手機(jī)硬件交互的功能，錄音啊，拍視頻啊，調(diào)用手機(jī)的重力感應(yīng)啊，GPS啊等等。

小程序？大改變？

之前就被朋友安利使用小程序，最近接近了小程序，發(fā)現(xiàn)了它竟然帶來了一場(chǎng)“大革命”。

簡(jiǎn)單說，它就是一個(gè)可以實(shí)現(xiàn)之前只能是原生態(tài)APP可以實(shí)現(xiàn)的效果和功能。比如說，一些酷炫的頁面與轉(zhuǎn)場(chǎng)，一些可以直接和手機(jī)硬件交互的功能，錄音啊，拍視頻啊，調(diào)用手機(jī)的重力感應(yīng)啊，GPS啊等等。

專業(yè)點(diǎn)來說，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開應(yīng)用。

小程序的輕量化帶來了app所不具有的許多優(yōu)點(diǎn)，它同時(shí)也在向著我們的日常app“宣戰(zhàn)”，這場(chǎng)戰(zhàn)爭(zhēng)花落誰家，就讓我們拭目以待吧。

制作簡(jiǎn)單？

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

我們能做什么？

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

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

1. 微信web開發(fā)者工具： 微信小程序官網(wǎng)微信開發(fā)的小程序編輯軟件，下載安裝即可使用；
2. 開發(fā)文檔： 微信小程序?qū)毜涿丶?這里面詳細(xì)的介紹了小程序的各種信息，包括組件、框架、API等等，有很多值得我們?nèi)ラ喿x的信息；
3. 圖標(biāo)庫： Iconfont-阿里巴巴矢量圖標(biāo)庫 這個(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

頁面注冊(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)航欄

<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為頁面跳轉(zhuǎn)所帶來的參數(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)前頁面的id，當(dāng)觸發(fā)點(diǎn)擊事件時(shí)，加載與該id匹配的信息。要注意的是一開始要給currentId一個(gè)頁面的值，不然無法顯示出來。

彈幕功能

小程序本身具備彈幕功能，閱讀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: '今生無悔入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í)長 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; } }})參考了開源代碼后，發(fā)現(xiàn)彈幕其實(shí)就是對(duì)字進(jìn)行動(dòng)畫效果，沿著y軸滾動(dòng)出現(xiàn)，利用計(jì)時(shí)器不停播放多組動(dòng)畫，抽屜效果也就是對(duì)遮罩層的利用，然后利用動(dòng)畫效果，將彈出欄顯示出來，在制作時(shí)，記得讓視頻暫停，這樣才能給用戶一個(gè)好的體驗(yàn)，畢竟沒有人想錯(cuò)過一部精彩的視頻(￣y▽￣)~

分享功能

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

onShareAppMessage: function onShareAppMessage() { wx.createVideoContext('myVideo').pause(); return { title: '【Fate全系列】英靈亂斗: 奪回未來的戰(zhàn)爭(zhēng)「Grand Order」', desc: '【Fate全系列】英靈亂斗: 奪回未來的戰(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，之前我也不明白，后來發(fā)現(xiàn)這個(gè)id就是你要分享的這篇文章的id，但是一定要注意異步與同步的問題。

踩過的坑<(｀^′)>

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

2.再次強(qiáng)調(diào)，小程序api很重要，里面包含了很多知識(shí)，我的彈幕功能也是后來查找時(shí)發(fā)現(xiàn)了api，這可以讓我們少走很多彎路；

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

項(xiàng)目地址

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

最后要說的話

現(xiàn)在的自己技術(shù)還是有些不太成熟，接觸小程序不久，還有很多需要學(xué)習(xí)的地方，不能很好的重現(xiàn)嗶哩嗶哩的功能，不過作為一個(gè)學(xué)生，還有很長的學(xué)習(xí)之路要走。

最后希望能得到各位在求學(xué)路上同行的小伙伴的小星星:star:，謝謝(′?｀)?




文章來源于開源中國社區(qū) 小程序?qū)崙?zhàn)--仿bilibil（嗶哩嗶哩）小程序 - 第九程序