张照博
张照博

微信小程序（有始有终，全部代码）开发--- 新增【在线播放+弹幕】

开篇语

前几天发了一篇练手文章，不出意外地火了：
《简年15： 微信小程序（有始有终，全部代码）开发---跑步App+音乐播放器 》
后来又发了BUG修复的版本，出乎意料的火了：
简年18： 微信小程序（有始有终，全部代码）开发---跑步App+音乐播放器 Bug修复
昨晚又新增了一个模块，嗯，这个还没火：
微信小程序（有始有终，全部代码）开发--- 新增模块： 图片选取以及拍照功能

正文

一、UI改进

今天本来想就此罢手，但是没办法，手痒难耐，所以又加了个在线放视频的功能。同时调整了下以前的一些代码，比如一些的UI设计增进了。.WXSS文件也被我丰富了一点点。那些不影响功能的我就没有细说了，代码已经全部更新于Github，欢迎大家去查看：
https://github.com/HustWolfzzb/WeChat-Fucking_Running.git
更新之后的页面更加漂亮了。当然，功能也稍微提高了点：

微信小程序（有始有终，全部代码）开发--- 新增【在线播放+弹幕】_第1张图片
请忽略下面那两个大头，按照自己的喜好去找替代的图片

更新的代码如下，是在app.json这个文件下作的更改：


  "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"
  }

二、废物利用

大家伙还记得我一直吐槽的莫名其妙的动画界面吗？现在算是废物利用，我给它增开了一个组件，就是今天的主角--video。顾名思义，就是视频播放。内容的话选择了我比较喜欢的东京食尸鬼。不过由于第一季的画质较高，转码估计要转到我开学，所以我就选择了画质较差的第二季。但是手机用户的观看体验应该也差不了多少。文件格式采用的是webm，也就是通用的web播放流媒体的视频文件格式。

微信小程序（有始有终，全部代码）开发--- 新增【在线播放+弹幕】_第2张图片
本地文件。上传至服务器端也是这样命名的

代码更新如下：


  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
    })
  },
















  
    
      
        
      
      
        
        
        
        
     
        
        
        
        
        
                 上面分别是旋转、缩放、移动、倾斜