ES6中的全局配置文件——json全局样式文件

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

ES6中的全局配置文件——json全局样式文件

全局配置文件只需要基础配置，这里修改内容样式

应用程序.json

  {    "pages":[      "pages/index/index",      "pages/logs/logs"    ],    "window":{      "backgroundTextStyle":"light",      "navigationBarBackgroundColor": "#f8ac09",      "navigationBarTitleText": "敢玩原创视频",      "navigationBarTextStyle":"black"    }  }  

全局样式没有太多规则。 为了避免后期计算错误ES6中的全局配置文件——json全局样式文件，需要注意两点。

应用程序.wxss

  /* 让页面高占满全屏，类似给 html 设置 100% 让子集元素的百分比为全屏的百分比 */  page {    height: 100%;  }    /* border-box 非常方便我们计算宽高 */  view, text {    box-sizing: border-box;  }    .container {    height: 100%;    display: flex;    flex-direction: column;    align-items: center;    justify-content: space-between;    box-sizing: border-box;  }  

注意： * 选择器无效。 强烈建议使用flex进行布局。 普通的布局规则在很多场景下是无效的。

主页上有一个轮播。 当轮播图像发生变化时，剧集也会发生变化。 默认情况下它是隐藏的。 页面结构如下

页面/index/index.wxml

                                                                                                  {{item.title}}            {{item.play_count}}次播放                                                  第{{videoIndex + 1}}集:{{videoTitle}}              上一集        下一集            没看过瘾？返回主页侧滑看更多炸裂专辑        

注意：wx:for建议写在外层块标签中，并且必须添加wx:key来定义你的flag字段，否则会报错。 如果绑定的事件是tap，强烈建议不要使用。 除非对冒泡触发事件有特殊要求，否则用它来避免冒泡。 为什么这里用wx:if（首屏加载块但切换成本高）而不是官方推荐的（首屏加载慢但切换成本小）。 在这个场景层，频繁切换适合使用，但是有一个bug，无法隐藏。 在视图层包含的元素中，视频标签仍然暴露在外并占用空间，破坏了我们的整体布局。 在实际测试中，wx:if在微应用场景下并没有出现任何性能问题。

看一下整体的样式文件

页面/index/index.wxss

  .swiper {    width: 100%;    height: 40%;  }    .swiper-item {    display: flex;    justify-content: center;      background: #dedede;  }    .slide-image {    width: 50%;    height: 100%;  }    .scroll-view {    height: 60%;  }    .video-item {    display: flex;    flex-direction: row;    justify-content: flex-start;    height: 115px;    padding: 10px;      background: rgba(255, 255, 255, 0.9);    border-bottom: 1px solid #dedede;  }    .video-cover {    display: block;    width: 150px;    height: 95px;      border-radius: 5px;  }    .video-info {    display: flex;    flex: 1;    flex-direction: column;    justify-content: space-between;    padding: 5px 0 5px 20px;  }    .video-title {    width: 100%;      line-height: 1.5;    font-size: 14px;  }    .video-play-count {    width: 100%;    display: flex;    justify-content: flex-end;    font-size: 12px;  }    .player {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    z-index: 100;      background: #000;  }    .player-title {    width: 100%;    padding-left: 10px;      border-left: 3px solid #ccc;      overflow:hidden;    white-space:nowrap;    text-overflow:ellipsis;      color: #fff;    font-size: 14px;  }    .close {    position: fixed;    top: 20px;    right: 20px;  }    .video {    width: 100%;    margin-top: 80px;  }    .handle-bar {    display: flex;    flex-direction: row;    justify-content: space-around;      margin-top: 20px;  }    .pre-btn, .next-btn {    width: 40%;      background: #f49d0d;      color: #673806;  }    .button-hover {    background-color: #f9bd3a;  }    .msg {    width: 216px;    margin-left: -108px;    position: fixed;    bottom: 10px;    left: 50%;      font-size: 12px;    color: #999;  }  

注意：样式采用flex+进行整体布局，具体的块级元素和字体给出px值。

页面/index/index.js

  //获取应用实例  var app = getApp()    Page({    data: {      albums: [],      videoList: [],      scrollTop: 0,      indicatorDots: true,      autoplay: false,      duration: 1000,      playerShow: false,      videoUrl: '',      videoTitle: '',      videoIndex: 0    },    changeAlbum: function(e){      this.setData({        videoList: this.data.albums[e.detail.current].videos,        scrollTop: 0      })    },    playVideo: function(e){      let index = e.currentTarget.dataset.id        this.setData({        videoTitle: this.data.videoList[index].title,        videoUrl: this.data.videoList[index].play_url,        playerShow: true,        videoIndex: index      })    },    closeVideo: function(){      this.setData({        videoUrl: '',        playerShow: false      })    },    preVideo: function(){      let index = this.data.videoIndex        if (index === 0) {        wx.showToast({          title: '前面没有啦！',          icon: 'loading',          duration: 10000        })          setTimeout(function(){          wx.hideToast()        },1000)      } else {        this.setData({          videoTitle: this.data.videoList[index - 1].title,          videoUrl: this.data.videoList[index - 1].play_url,          videoIndex: index - 1        })      }    },    nextVideo: function(){      let index = this.data.videoIndex        if (index === this.data.videoList.length - 1) {        wx.showToast({          title: '后面没有啦！',          icon: 'loading',          duration: 10000        })          setTimeout(function(){          wx.hideToast()        },1000)      } else {        this.setData({          videoTitle: this.data.videoList[index + 1].title,          videoUrl: this.data.videoList[index + 1].play_url,          videoIndex: index + 1        })      }    },    onReady: function(){      var that = this      wx.request({        url: 'https://api.idarex.com/www/index',        success (res) {          that.setData({            albums: res.data.columns,            videoList: res.data.columns[0].videos          })        }      })    }  })  

注意：替换 6.4.3有一个bug。 事件的参数必须通过event..传递到wxml中，通过定义data-xxx属性来绑定key。 其他代码简单易懂，无需高级语法。 可以直接复制粘贴然后自定义修改。

*终效果如下

先进的

如果你的小程序有一定规模，肯定会尝试模块化开发、ES6、7高级语法、第三方库等。

实现原理是按照模块化开发来编写微信小程序开发语言，使用npm安装依赖库，然后编译成微信开发工具可以识别的项目结构。

下面是根据需求聚集的几个项目，wepy，

如果您有兴趣，可以点击进去看看。 是否使用它取决于您项目的复杂程度。 如果你的异步操作太多，ES6就无法满足你的需求。 ES7的async/await可以帮助你，或者你的状态太高了。 如果你想使用redux，可以尝试微信小程序组件开发框架。

在这个例子中，再封装一层框架只是自找麻烦，没有任何意义。

总结

对于小程序的评价褒贬不一。 与其评价它存在的意义，不如看看它的适用场景。 非常适合功能强大的应用程序。 这个例子不合适。 但如果腾讯视频能做小程序，我们就能做。 没有人能确切地说出它未来会如何发展。 至少稳定性可以保证。 通过编写小程序可以加深对类Vue框架的理解。 内联事件编写也是未来的一个趋势。 数据绑定就像 React。 ，如果你之前尝试过这两个框架开发小程序，你会感觉很舒服。

从：

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等