小程序模板網(wǎng)

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

發(fā)布時間:2017-12-27 11:00 所屬欄目:小程序開發(fā)教程

項(xiàng)目預(yù)覽圖小程序?大改變?之前就被朋友安利使用小程序,最近接近了小程序,發(fā)現(xiàn)了它竟然帶來了一場“大革命”。簡單說,它就是一個可以實(shí)現(xiàn)之前只能是原生態(tài)APP可以實(shí)現(xiàn)的效果和功能。比如說,一些酷炫的頁面與轉(zhuǎn) ...

 
 
 

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

小程序?大改變?

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

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

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

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

制作簡單?

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

我們能做什么?

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

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

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

頁面注冊

app.json

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

項(xiàng)目功能

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

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

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

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

部分功能實(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)擊事件時,加載與該id匹配的信息。要注意的是一開始要給currentId一個頁面的值,不然無法顯示出來。

彈幕功能

小程序本身具備彈幕功能,閱讀api,對著原版代碼進(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) {
    /* 動畫部分 */
    // 第1步:創(chuàng)建動畫實(shí)例 
    var animation = wx.createAnimation({
      duration: 200, //動畫時長 
      timingFunction: "linear", //線性 
      delay: 0 //0則不延遲 
    });

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

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

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

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

分享功能

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

onShareAppMessage: function onShareAppMessage() {
    wx.createVideoContext('myVideo').pause();
    return {
      title: '【Fate全系列】英靈亂斗: 奪回未來的戰(zhàn)爭「Grand Order」',
      desc: '【Fate全系列】英靈亂斗: 奪回未來的戰(zhàn)爭「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'
   }
 }

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

踩過的坑<(`^´)>

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

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

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

項(xiàng)目地址

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

最后要說的話

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

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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18271.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢