提交demo

Component/AuglyVideo.js

@@ -0,0 +1,128 @@
+// Component/AuglyVideo.js
+const 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: null,
+    showPlay: false,
+    showShare:true
+  },
+  created:function(){
+    console.log(this.data.aps)
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    //播放视频相关方法
+    videoPlay:function(e){
+      // if (this.data.page=='share'){
+        var videoList = this.data.videoList
+        var index = e.currentTarget.dataset.index
+        var id = e.currentTarget.id
+        config.ajax('POST', {
+          id: id
+        }, config.videoPlay, (res) => {
+          if (res.data.statusMsg == "success") {
+            videoList[index].videoUrl = res.data.data
+            if (!this.data.playIndex) { // 没有播放时播放视频
+              this.setData({
+                videoList: videoList,
+                playIndex: index,
+                playmid: id
+              })
+              var videoContext = wx.createVideoContext('myVideo' + id, this)
+              videoContext.play()
+            } else {                    // 有播放时先将prev暂停到0s，再播放当前点击的current
+              var videoContextPrev = wx.createVideoContext('myVideo' + this.data.playmid, this)
+              videoContextPrev.seek(0)
+              videoContextPrev.pause()
+              this.setData({
+                videoList: videoList,
+                playIndex: index,
+                playmid: id
+              })
+              var videoContextCurrent = wx.createVideoContext('myVideo' + this.data.playmid, this)
+              videoContextCurrent.play()
+            }
+            var myEventDetail = {
+              playIndex: this.data.playIndex,
+              playmid: this.data.playmid,
+              videoContextCurrent: videoContextCurrent,
+              videoContext: videoContext
+            } // detail对象，提供给事件监听函数
+            var myEventOption = {
+
+            } // 触发事件的选项
+            this.triggerEvent('videoPlay', myEventDetail, myEventOption)
+          }
+        }, (res) => {
+
+        })
+      // }else{
+      //   var alldata = {
+      //     id: e.currentTarget.dataset.id,
+      //     title: e.currentTarget.dataset.title,
+      //     cover: e.currentTarget.dataset.cover,
+      //     duration: e.currentTarget.dataset.duration,
+      //     allnum: e.currentTarget.dataset.allnum
+      //   }
+      //   wx.redirectTo({
+      //     url: '/pages/share/share?alldata=' + JSON.stringify(alldata),
+      //     success: function(res) {
+
+      //     },
+      //     fail: function(res) {},
+      //     complete: function(res) {},
+      //   })
+      // } 
+    },
+    submitInfo(e) {
+      if (app.globalData.isSubscibe){
+        var params = {
+          openId: app.globalData.openid,
+          formId: e.detail.formId,
+          status:'t'
+        }
+      }else{
+        var params = {
+          openId: app.globalData.openid,
+          formId: e.detail.formId
+        }
+      }
+      config.ajax('POST', params,config.wxformId,(res)=>{
+        console.log(res)
+        app.globalData.isSubscibe=true
+      },(res)=>{
+
+      })
+    }
+  }
+})

Component/AuglyVideo.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

Component/AuglyVideo.wxml

@@ -0,0 +1,32 @@
+<!--Component/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>

Component/AuglyVideo.wxss

@@ -0,0 +1,150 @@
+/* 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;
+}

app.js

@@ -0,0 +1,74 @@
+const config=require('/utils/config.js');
+App({
+
+  /**
+   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
+   */
+  onLaunch: function () {
+
+  },
+
+  /**
+   * 当小程序启动，或从后台进入前台显示，会触发 onShow
+   */
+  onShow: function (options) {
+    this.checkInternet()
+    var that=this
+    wx.login({
+      success:(res)=>{
+        config.ajax('POST',{
+          wxcode: res.code
+        }, config.wxLogin,(res)=>{
+          that.globalData.openid = res.data.data.openId
+          config.ajax('POST', {
+            openId: res.data.data.openId
+          }, config.isSubscibe, (res) => {
+            that.globalData.isSubscibe = res.data.data
+          }, (res) => {
+
+          })
+        },(res)=>{
+
+        })
+      },
+      fail: function(res) {},
+      complete: function(res) {},
+    })
+  },
+  checkInternet() {
+    try {
+      wx.getNetworkType({
+        success: function (res) {
+          if (res.networkType != 'wifi') {
+            wx.showToast({
+              title: '您当前的网络的状态为' + res.networkType + '网络!请注意您的流量费用',
+              icon: 'none',
+              mask: true,
+            })
+          }
+        }
+      })
+    }
+    catch (err) {
+
+    }
+  },
+
+  /**
+   * 当小程序从前台进入后台，会触发 onHide
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
+   */
+  onError: function (msg) {
+
+  },
+  globalData: {
+   openid:null,
+   isSubscibe:false
+  },
+})