E企盈营销工具技术服务商 热线:4006-838-530

微信小程序自定义组件的使用,来自项目的总结

E企盈直播平台营销卖货系统

小程序自定义组件的使用一直以来忙项目都没有什么时间来写博客,今天晚上刷了会儿csdn,知乎等平台,发现有很多人再问小程序自定义组件怎么写,如何编写一个自己的自定义组件?当然也有一些同行们对于这些问题都有解答。今天就自己的项目经验给大家从构建自定义组件,调用自定义组件,传值给组件,组件传值出来,给大家讲解一下如何构造一个自定义视频组件大家可能都刷过火山小视频,本次讲解的就是做的一款类似于火山小视频的视频播放效果的一款小程序软件,效果如下图所示 这个项目因为要用到视频播放这个功能,于是就用了小程序的video媒体播放。废话不多说,直接进入正题吧,首先微信小程序自定义组件出来这么长时间了,于是我在写这个项目的时候就行运用一下自定义组件,看了一下官方文档,官方文档有一些介绍但是都不怎么全,于是我就实验了一把,在这个项目中自定义了一个视频播放组件要自定义一个组件,首先要新建一个文件夹,如图所示,我建了一个名为Component的文件夹在文件夹里点击右键新建了一个Component名为‘AuglyVideo’的自定义组件,组件的组成跟正常的页面文件接口一样。这是AuglyVideo.wxml文件 <view class=’videoItem’ wx:for=”{{videoList}}”>  <video objectFit=’fill’ show-center-play-btn='{{showPlay}}’ id=’myVideo{{item.id}}’ data-index=”{{index}}” src='{{item.videoUrl}}’ wx:if=”{{playIndex == index}}”>  </video>  <view class=’myposter’ bindtap=”videoPlay” id=”{{item.id}}” data-index=”{{index}}” style=”display: {{playIndex==index ? ‘none’ : ‘block’}};” data-id='{{item.id}}’ data-title='{{item.title}}’ data-cover='{{item.cover}}’ data-duration='{{item.duration}}’    data-allnum=”{{item.palyCnt+item.playInitCnt}}”>    <image src='{{item.cover}}’>    </image>    <form bindsubmit=”submitInfo” report-submit=’true’>      <button class=’videoTitle’ hover-class=’none’ form-type=’submit’>        {{item.title}}      </button>    </form>    <form bindsubmit=”submitInfo” report-submit=’true’>      <button class=’iconfont icon-bofang’ hover-class=’none’ id=”{{item.id}}” data-index=”{{index}}” form-type=’submit’></button>    </form>    <view class=’time’>{{item.duration}}</view>  </view>  <view class=’videoRes’>    <view class=’playnum’>{{item.palyCnt+item.playInitCnt}}次播放</view>    <button class=’iconfont icon-zhuanfa’ hover-class=’none’ open-type=’share’ data-id='{{item.id}}’ data-title='{{item.title}}’ data-cover='{{item.cover}}’ data-duration='{{item.duration}}’ data-allnum=”{{item.palyCnt+item.playInitCnt}}”></button>  </view></view><form bindsubmit=”submitInfo” report-submit=’true’ wx:if=”{{aps.isShow==’t’}}”>  <navigator class=’tominApp’ hover-class=’none’ form-type=’submit’ style=”background-image:url(‘{{aps.image}}’);” open-type=”navigate” target=”miniProgram” app-id='{{aps.val}}’>  </navigator></form>这是wxss文件/* Component/AuglyVideo.wxss */@font-face {  font-family: ‘iconfont’; /* project id 724078 */  src: url(‘//at.alicdn.com/t/font_724078_43qt7yvrrsk.eot’);  src: url(‘//at.alicdn.com/t/font_724078_43qt7yvrrsk.eot?#iefix’) format(’embedded-opentype’),         url(‘//at.alicdn.com/t/font_724078_43qt7yvrrsk.woff’) format(‘woff’),         url(‘//at.alicdn.com/t/font_724078_43qt7yvrrsk.ttf’) format(‘truetype’),         url(‘//at.alicdn.com/t/font_724078_43qt7yvrrsk.svg#iconfont’) format(‘svg’);}.iconfont {  font-family: “iconfont” !important;  font-size: 16px;  font-style: normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.icon-bofang:before {  content: “e606”;}.icon-zhuanfa:before {  content: “e627”;}.videoItem {  width: 100%;  height: auto;  border-radius: 0rpx 0rpx 10rpx 10rpx;  overflow: hidden;  margin-top: 20rpx;}.videoItem video {  width: 100%;  height: 398rpx;  border-radius: 10rpx 10rpx 0rpx 0rpx;  display: flex;  align-items: center;  justify-content: center;  overflow: hidden;}.videoItem .myposter {  width: 100%;  height: 398rpx;  /* border-radius: 10rpx 10rpx 0rpx 0rpx; */  position: relative;  box-sizing: border-box;  background-color: rgba(0, 0, 0, 0.5);  background-size: 100% 100%;}.videoItem image {  width: 100%;  height: 100%;  position: absolute;  top: 0;  z-index: -1;  /* border: 10rpx 10rpx 0rpx 0rpx; */}.videoTitle {  position: absolute;  left: 0rpx;  width: 100%;  height: 100rpx;  font-size: 34rpx;  font-weight: bold;  top: 0rpx;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  padding: 0rpx 20rpx;  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));  color: RGBA(254, 254, 254, 0.9);}.icon-bofang {  color: rgba(255, 255, 255, 1);  font-size: 80rpx;  line-height: 80rpx;  z-index: 5;  position: absolute;  display: block;  left: 50%;  margin-left: -40rpx;  top: 50%;  margin-top: -40rpx;}.tominApp {  position: fixed;  width: 103rpx;  height: 103rpx;  background-color: rgba(255, 255, 255, 1);  border-radius: 50%;  display: flex;  box-sizing: border-box;  padding: 18rpx;  align-items: center;  flex-wrap: wrap;  justify-content: center;  right: 33rpx;  bottom: 240rpx;  white-space: wrap;  color: rgba(0, 0, 0, 1);  font-size: 30rpx;  line-height: 35rpx;  background-size: 100% 100%;}.time {  position: absolute;  width: 112rpx;  height: 45rpx;  background-color: rgba(0, 0, 0, 0.5);  right: 11rpx;  bottom: 10rpx;  font-size: 28rpx;  color: rgba(255, 255, 255, 1);  display: flex;  align-items: center;  justify-content: center;  border-radius: 22rpx;}.videoItem .videoRes {  width: 100%;  height: 81rpx;  background-color: RGBA(46, 39, 67, 1);  box-sizing: border-box;  padding: 0rpx 20rpx;  display: flex;  align-items: center;  justify-content: space-between;}.playnum {  font-size: 28rpx;  color: RGBA(215, 215, 215, 1);}.icon-zhuanfa {  color: rgba(255, 255, 255, 1);  font-size: 40rpx;}这是js文件// Component/AuglyVideo.jsconst config = require(‘../utils/config.js’)let app = getApp();Component({  /**   * 组件的属性列表   */  properties: {    videoList: {      type: Array,      value: []    },    aps: {      type: Object,      value: {        isShow: null      }    },    playIndex: {      type: null,      value: null    },    page: {      type: String,      value: ‘index’    }  },  /**   * 组件的初始数据   */  data: {    playIndex:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序自定义组件的使用,来自项目的总结
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏