婚礼邀请函小程序 使用腾讯视频插件

Posted 2022-10-26 Chuck 小欧

婚礼邀请函小程序 使用腾讯视频插件

• • 1.项目展示
  • 2.腾讯视频插件
  • 3.上代码
  • • 首页
    • 照片墙页面
    • 美好时光页面
    • 婚礼地点页面
  • 结语

1.项目展示

2.腾讯视频插件

小程序中提供了腾讯视频插件来播放视频，其特点是，用户可以将视频上传到腾讯视频网站，不需要自己搭建视频服务器。要使用该插件，首先需要打开“小程序管理后台”，在“设置”-“第三方服务中”添加插件

获取插件的AppID

然后在app.json中配置本项目使用的插件

"plugins": 
        "tencentvideo": 
            "version": "1.3.21",
            "provider": "wxa75efa648b60994b"
        
    ,

然后就可以在需要的页面使用了，例如
在vedio.json中

 "usingComponents": 
    "txv-video":"plugin://tencentvideo/video"
  

找到要插入的腾讯视频地址
例如：https://v.qq.com/x/cover/mzc00200vcrun1q/e3235oumhsr.html
vedio.wxml文件中，vid表示视频的id，及上方地址中的加粗部分，playerid属性用于在js文件中根据id创建上下文对象

<txv-video vid="e3235oumhsr" playerid="txv1"></txv-video>

js文件

onReady:function()
    const TxvContext = requirePlugin("tencentVideo");
    let txvContext = TxvContext.getTxvContext('txv1');
    txvContext.play(); //播放
    txvContext.pause();
  

然后就可以啦，运行程序

当然也可以直接使用video组件，还可以发送弹幕，设置倍速播放等，从本地上传视频等。

3.上代码

首页

<!--index.wxml-->
<view class="player player-isPlayingMusic?'play':'pause'" bindtap="play">
  <image src="/images/music_icon.png"></image>
  <image src="/images/music_play.png"></image>
</view>
<!--背景图片-->
<image class="bg" src="/images/bg_1.jpg"></image>
<!--内容区域-->
<view class="content">
  <!--顶部GIF图片-->
  <image class="content-gif" src="/images/0.jpg"></image>
  <!--标题-->
  <view class="content-title">邀请函</view>
  <!--新郎与新娘的合照-->
  <view class="content-avatar">
    <image src="/images/avatar.jpg"></image>
  </view>
  <!--新郎与新娘的名字-->
  <view class="content-info">
    <view class="content-name" bindtap="callGroom">
      <image src="/images/tel.png"></image>
      <view>王辉辉</view>
      <view>新郎</view>
    </view>

    <view class="content-name" bindtap="callBride">
      <image src="/images/tel.png"></image>
      <view>张琳琳</view>
      <view>新娘</view>
    </view>
  </view>
  <!--婚礼信息-->
  <view class="content-address">
    <view>我们诚邀您来参加我们的婚礼</view>
    <view>时间：2027年1月29日</view>
    <view>地点：北京市豪华酒店</view>
  </view>
</view>

//index.js
//获取应用实例
const app = getApp()

Page(
  data: 
    isPlayingMusic: false
  ,
  bgm:null,
  music_url:'https://webfs.yun.kugou.com/202103250932/7ac624b881467794da0fc0541da44028/part/0/960131/KGTX/CLTX001/8c044816632d7b54feb7fb0ab7f6224d.mp3',
  music_coverImgUrl:'/images/2 (1).png',
  onReady:function()
    this.bgm=wx.getBackgroundAudioManager()
    this.bgm.title='marry me'
    this.bgm.epname='wedding'
    this.bgm.singer='singer'
    this.bgm.coverImgUrl=this.music_coverImgUrl
    this.bgm.onCanplay(()=>
      this.bgm.pause()
    )
    this.bgm.src=this.music_url
  ,
  play:function(e)
    if(this.data.isPlayingMusic)
      this.bgm.pause()
    else
      this.bgm.play()
    
    this.setData(
      isPlayingMusic:!this.data.isPlayingMusic
    )
  ,
  callGroom:function()
    wx.makePhoneCall(
      phoneNumber: '13627434678',
    )
  ,
  callBride:function()
    wx.makePhoneCall(
      phoneNumber: '13627909678',
    )
  
)

/**index.wxss**/
.player 
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  z-index: 1;


.player>image:first-child 
  width: 80rpx;
  height: 80rpx;
  animation: musicRotate 3s linear infinite;


@keyframes musicROtate 
  from 
    transform: rotate(0deg);
  

  to 
    transform: rotate(360deg);
  


.player>image:last-child 
  width: 28rpx;
  height: 80rpx;
  margin-left: -5px;


.player-play>image:first-child 
  animation-play-state: running;


.player-play>image:last-child 
  animation: musicStart 0.2s linear forwards;


.player-play>image:first-child 
  animation-play-state: paused;


.player-play>image:last-child 
  animation: musicStop 0.2s linear forwards;


@keyframes musicStop 
  from 
    transform: rotate(20deg);
  

  to 
    transform: rotate(0deg);
  


.bg 
  width: 100vw;
  height: 100vh;


.content 
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: 19vh;
  flex-direction: column;
  align-items: center;


.content-gif 
  width: 19vh;
  height: 18.6vh;
  margin-bottom: 1.5vh;


.content-title 
  font-size: 5vh;
  color: #ff4c91;
  text-align: center;
  margin-bottom: 1.5vh;


/**将文字居中**/
.content-address 
  text-align: center;


.content-avatar image 
  width: 40vh;
  height: 40vh;
  border: 3px solid #ff4c91;
  border-radius: 50%;


/**将图片居中**/
.content-avatar 
  display: flex;
  justify-content: center;
  /**水平居中**/
  align-items: center;
  /**垂直居中**/


.content-info 
  width: 100%;
  margin-top: 4vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;


.content-wedding 
  flex: 1;


.content-wedding>image 
  width: 5.5vh;
  height: 5.5vh;
  margin-left: 20rpx;


.content-name 
  color: #ff4c91;
  font-size: 2.7vh;
  line-height: 4.5vh;
  font-weight: bold;
  position: relative;
  text-align: center;


.content-name>image 
  width: 2.6vh;
  height: 2.6vh;
  border: 1px solid #ff4c91;
  border-radius: 50%;
  position: absolute;
  top: -1vh;
  right: -3.6vh;
  text-align: center;

照片墙页面

<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular>
  <swiper-item wx:for="imgUrls" wx:key="*this">
    <image src="item" mode="aspectFill" />
  </swiper-item>
</swiper>

Page(
  data: 
    imgUrls: [
      '/images/timg1.jpg',
      '/images/timg2.png',
      '/images/timg3.jpg',
      '/images/timg4.jpg'
    ]
  
)

swiper 
    height: 100vh;
 
image 
    width: 100vw;
    height: 100vh;

  

美好时光页面

<!--pages/video/video.wxml-->
<view class="video-list" wx:for="movieList" wx:key="user">
  <view class="video-title">标题：item.title</view>
  <view class="video-time">时间：formatData(item.create_time)</view>
  <video src="item.src" objectFit="fill"></video> 
</view>
<wxs module="formatData">
  module.exports = function(timestamp) 
    var date = getDate(timestamp)
    var y = date.getFullYear()
    var m = date.getMonth() + 1
    var d = date.getDate()
    var h = date.getHours()
    var i = date.getMinutes()
    var s = date.getSeconds()
    return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
  
</wxs>

<txv-video vid="e3235oumhsr" playerid="txv1"></txv-video>

Page(
  data: 
    movieList: [
      create_time: 1532519754589,
      title: '海边随拍',
      src: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
    , 
      create_time: 1532519777690,
      title: '勿忘心安',
      src: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
    , 
      create_time: 1532519734589,
      title: '点滴记忆',
      src: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
    ]
  ,

  onReady:function()
    const TxvContext = requirePlugin("tencentVideo");
    let txvContext = TxvContext.getTxvContext('txv1');
    txvContext.play(); //播放
    txvContext.pause();
  
)

/* pages/video/video.wxss */
.video-list 
  box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);
  margin: 10rpx 25rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  background: #fff;


.video-title 
  font-size: 35rpx;
  color: #333;


.video-time 
  font-size: 13px;
  color: #979797;


.video-list video 
  width: 100%;
  margin-top: 20rpx;

  "navigationBarTitleText": "美好时光",
  "usingComponents": 
    "txv-video": "plugin://tencentVideo/video"
  

婚礼地点页面

<!--pages/map/map.wxml-->
<map latitude="latitude" longitude="longitude" scale="18" markers="markers" bindmarkertap="markertap"></map>
<!-- <button bindtap="buttonTap">查看我的位置</button> -->

// pages/map/map.js
Page(

  /**
   * 页面的初始数据
   */
  data: 
    // 经纬度
    latitude: 40.06021,
    longitude: 116.3433,
    markers: [
      iconPath: '/images/navi.png',
      id: 0,
      latitude: 40.06021,
      longitude: 116.3433,
      width: 50,
      height: 50
    ]
  ,
  buttonTap: function () 
    wx.getLocation(
      type: 'gcj02',
      success: function (res) 
        wx.openLocation(
          latitude: res.latitude,
          longitude: res.longitude,
        )
      
    )
  ,
  markertap: function () 
    wx.openLocation(
      latitude: this.data.latitude,
      longitude: this.data.longitude,
      name: 'xx大酒店',
      address: '北京市 海淀区 xx路'
    )
  
)

/* pages/map/map.wxss */
map
    width: 100vw;
    height: 100vh;

结语

有什么问题可以加我Q哦：1253540040