正文

一、UI改進(jìn)

今天本來(lái)想就此罷手，但是沒(méi)辦法，手癢難耐，所以又加了個(gè)在線放視頻的功能。同時(shí)調(diào)整了下以前的一些代碼，比如一些的UI設(shè)計(jì)增進(jìn)了。.WXSS文件也被我豐富了一點(diǎn)點(diǎn)。那些不影響功能的我就沒(méi)有細(xì)說(shuō)了，代碼已經(jīng)全部更新于Github，歡迎大家去查看：
https://github.com/HustWolfzzb/WeChat-Fucking_Running.git
更新之后的頁(yè)面更加漂亮了。當(dāng)然，功能也稍微提高了點(diǎn)：

更新的代碼如下，是在app.json這個(gè)文件下作的更改：

  "window":{
    "backgroundTextStyle":"black",
    "navigationBarBackgroundColor": "#ffddae",
    "navigationBarTitleText": "Running Man",
    "navigationBarTextStyle":"black"
  },
   "tabBar": {


    "list": [{
      "pagePath": "pages/index",

      "backgroundColor": "#adddaa",
       "iconPath":"/resources/yan1.jpg",
       "selectedIconPath":"/resources/yan1.jpg"
    }, {
      "pagePath": "pages/logs/logs",

       "iconPath":"/resources/yan2.jpg",
       "selectedIconPath":"/resources/yan2.jpg"
    }
    ],
    "color": "#ad8888",
    "backgroundColor": "#fdfdae"
  }

二、廢物利用

大家伙還記得我一直吐槽的莫名其妙的動(dòng)畫(huà)界面嗎？現(xiàn)在算是廢物利用，我給它增開(kāi)了一個(gè)組件，就是今天的主角--video。顧名思義，就是視頻播放。內(nèi)容的話選擇了我比較喜歡的東京食尸鬼。不過(guò)由于第一季的畫(huà)質(zhì)較高，轉(zhuǎn)碼估計(jì)要轉(zhuǎn)到我開(kāi)學(xué)，所以我就選擇了畫(huà)質(zhì)較差的第二季。但是手機(jī)用戶的觀看體驗(yàn)應(yīng)該也差不了多少。文件格式采用的是webm，也就是通用的web播放流媒體的視頻文件格式。

代碼更新如下：

<animation.js>

  data:{
// Chapters:[1,2,3,4,5,6,7,8,9,10,11,12],
chapter:0
},

Next:function(){
this.setData(
{
  chapter:this.data.chapter + 1
})
},
  Last:function(){
    this.setData(
    {
      chapter:this.data.chapter - 1
    })
  },

<animation.wxml>

<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />

<label class="label" type="primary">東京食尸鬼第{{chapter}}集</label>
<video class="video" src="http://119.29.74.46/Dj/Dj_{{chapter}}.webm"   objectFit="contain"></video>



<button bindtap="Last">上一集</button>
<button bindtap="Next">下一集</button>


<view class="container">
<!--  <template is="header" data="{{title: 'createAnimation'}}"/>
-->
  <view class="page-body">
    <view class="page-body-wrapper">
      <view class="animation-element-wrapper">
        <view class="animation-element" animation="{{animation}}"></view>
      </view>
      <view class="animation-buttons" scroll-y="true">
        <button class="animation-button" bindtap="rotate">Rotate</button>
        <button class="animation-button" bindtap="scale"> Scale</button>
        <button class="animation-button" bindtap="translate">Translate</button>
        <button class="animation-button" bindtap="skew">Skew</button>

        <button class="animation-button" bindtap="rotateAndScale">Rotate&Scale</button>
        <button class="animation-button" bindtap="rotateThenScale">Rotate-Scale</button>
        <button class="animation-button" bindtap="all">All</button>
        <button class="animation-button" bindtap="allInQueue">All~</button>
        <button class="animation-button-reset" bindtap="reset">Reset</button>
                 <view class="page-body-info">上面分別是旋轉(zhuǎn)、縮放、移動(dòng)、傾斜</view>
      </view>

    </view>
  </view>

  <template is="footer" />
</view>

本次更改，其實(shí)還是有問(wèn)題殘留的，因?yàn)槲視簳r(shí)沒(méi)找到辦法獲取wxml文件中的數(shù)值傳到j(luò)s文件中的辦法。大家可以看到上面的js文件中的data里面有一個(gè)Chapters被注釋了。我的本來(lái)的想法是利用wx:for="{{Chapters}}"來(lái)直接把所有的視頻鏈接做成按鈕放到頁(yè)面上去的。就類似下面的這樣:

很可惜的沒(méi)有成功回調(diào)wxml中的item的id，看我網(wǎng)上的大神說(shuō)，利用wx:for-index可以回調(diào)id號(hào)，然后利用currentTarget.id;獲取id并導(dǎo)入js文件中，但是很可惜我并沒(méi)有成功。不過(guò)如果最后還是不行的話，可以采用蠢辦法：一個(gè)按鈕一個(gè)事件綁定的野路子。這樣不需要什么的回調(diào)，你選擇哪個(gè)按鈕，我就給你專門(mén)的寫(xiě)一個(gè)事件，反正一部動(dòng)漫，寫(xiě)死了也就幾十個(gè)按鈕事件綁定，而且代碼重用率接近99%，意思就是說(shuō)：復(fù)制一下代碼，然后改一兩個(gè)參數(shù)就可以了。但是這樣很蠢，所以我希望可以找到更好的辦法。目前來(lái)看，還沒(méi)找到，如果找到了，后期我會(huì)寫(xiě)在評(píng)論中。小程序最近玩的很多了。要換點(diǎn)花樣了。然后，后天就去學(xué)校了，真是悲傷。在家的效率很低，但是勝在自由靈活在。在學(xué)校，有點(diǎn)怕！

---

作為半個(gè)強(qiáng)迫癥，我怎么著都想著改善UI 所以剛剛發(fā)覺(jué)那個(gè)上一集下一集的按鈕很丑，而且上邊的label部隊(duì)稱，所以換了個(gè)我比較喜歡的，把樣式文件改了下，好看了不少了：

具體改動(dòng)了：

<animation.wxss>

.page-body-wrapper {
  flex-grow: 1;
}
.index{
    background-color: #Eeefaf;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    flex: 1;
    min-height: 100%;
    font-size: 32rpx;
}
.label
{
  width: 750rpx;
  position:center;
  padding-left: 250rpx
}

<animation.wxml>

<button type="primary" bindtap="Last">上一集</button>

<button type="primary" bindtap="Next">下一集</button>

結(jié)束語(yǔ)

小程序算是假期的一個(gè)調(diào)劑吧，不然可能就真的天天看小說(shuō)，然后逛逛B站了。額，不知道有沒(méi)有追看我的文章的body（除了我已知的那位）？很Sorry，明天可能就會(huì)很少更新了。后天去縣城，大后天到學(xué)校。然后我就要開(kāi)始我的拼命三郎之路了。如果下學(xué)期運(yùn)氣夠好，計(jì)算機(jī)三四級(jí)一刀斬，成績(jī)分?jǐn)?shù)夠我保研，那么以后我估計(jì)爆文多的是，如果運(yùn)氣不夠，那么以后我估計(jì)就會(huì)坎坷了。在家積蓄了一個(gè)月的洪荒之力，已經(jīng)按耐不住了。去了學(xué)校，看命吧！

另外，明天可能開(kāi)始看看機(jī)器學(xué)習(xí)的內(nèi)容。有興趣的朋友可以跟上。恩，當(dāng)然，也許是iOS的開(kāi)發(fā)，還沒(méi)準(zhǔn)備干嘛但是總是要找點(diǎn)事情干的。講不好發(fā)現(xiàn)別的不好玩，又回來(lái)折騰小程序了呢！

諸君，拔劍吧！你們要的彈幕君來(lái)了。。容我展示下：

更新之后的代碼節(jié)選，對(duì)照前面的就可以直接找出我修改了哪些地方了！

<animation.js>

function getRandomColor () {
  let rgb = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
} 

Page({
  onReady: function () {
     this.videoContext = wx.createVideoContext('myVideo')
    this.animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
})

<animation.wxml>

<video  id="myVideo" class="video" src="http://119.29.74.46/Dj/Dj_{{chapter}}.webm"   objectFit="contain" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>


   <input bindblur="bindInputBlur" placeholder="來(lái)這兒輸入你的彈幕！傾瀉彈藥吧！"/>
    <button type="primary" bindtap="bindSendDanmu">發(fā)送彈幕</button>
<button type="primary" bindtap="Last">上一集</button>

<button type="primary" bindtap="Next">下一集</button>

個(gè)人宣言

知識(shí)傳遞力量，技術(shù)無(wú)國(guó)界，文化改變生活！