精华内容
下载资源
问答
  • 本项目是一个婚礼邀请函小程序,通过小程序向亲朋好友发送婚礼到场邀请,相对于传 统方式的请柬,给人们带来不一样的便捷体验,也更容易受到广大年轻群体的喜爱。通过电 子版的邀请函,邀请来宾见证一对新人的幸福...
  • 婚礼邀请函小程序 (附源码)

    万次阅读 2019-10-21 11:30:02
    这是一个完整的已经线上运行的婚礼邀请函,内容可定制,点击可查看源码,可随意 star。也可以扫描下方的小程序码直接体验。 image 速览 准备工作 mpvue框架mpvue官方文档 小程序·云开发...

    简介

    这是一个完整的已经线上运行的婚礼邀请函,内容可定制,点击可查看源码,可随意 star。也可以扫描下方的小程序码直接体验。

    image 速览

                     

     

             

     

           

     

    准备工作

    1. mpvue框架 mpvue官方文档
    2. 小程序·云开发 小程序·云开发文档

    注意:使用mpvue前,首先你得先熟悉vue框架的基本使用 

     

    github地址

    githu:https://github.com/zhangliwen1101/wedding

    个人博客:https://blog.csdn.net/lwzhang1101

     

    定制可私聊:

    • QQ: 383755537
    • WX: bjawenfd

     

    Build Setup

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build
    
    # build for production and view the bundle analyzer report
    npm run build --report
    

    最后再贴一下二维码,扫描直接体验

    智能垃圾分类,源码,扫码直接体验

    扫码关注,免去各种VIP,直接观看各种影视资源

    展开全文
  • 婚礼邀请函小程序 使用腾讯视频插件1.项目展示2.腾讯视频插件3.上代码首页照片墙页面美好时光页面婚礼地点页面结语 1.项目展示 2.腾讯视频插件 小程序中提供了腾讯视频插件来播放视频,其特点是,用户可以将视频...

    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

    展开全文
  • 婚礼邀请函微信小程序

    千次阅读 2020-12-07 15:03:12
    本项目是一个婚礼邀请函小程序,通过小程序向亲朋好友发送婚礼到场邀请,相对于传 统方式的请柬,给人们带来不一样的便捷体验,也更容易受到广大年轻群体的喜爱。通过电 子版的邀请函,邀请来宾见证一对新人的幸福...

    7.2.1任务分析
    一、任务功能分析
    本项目是一个婚礼邀请函小程序,通过小程序向亲朋好友发送婚礼到场邀请,相对于传
    统方式的请柬,给人们带来不一样的便捷体验,也更容易受到广大年轻群体的喜爱。通过电
    子版的邀请函,邀请来宾见证一对新人的幸福时刻。
    本项目共由 5个页面组成,分别是邀请函、照片、美好时光、婚礼地点、宾客信息,如
    下图 7.1~7.5所示。

    图 7.1 邀请函页面 图 7.2 照片页面 图 7.3 美好时光页面
    在这里插入图片描述
    图片文件点我主页下载https://download.csdn.net/download/weixin_43474701/13484856
    图7.4 婚礼地点页面 图7.5 宾客信息页面
    下面对这 5个页面的功能进行简要介绍。
    邀请函页面:新郎和新娘的电话、婚礼地点、婚礼时间。
    照片页面:新郎和新娘的幸福照。 美好时光页面:采用视频的方式记录一对新人的相爱历程。
    地图页面:通过导航查看婚礼地点的路线图。
    宾客信息页面:参加婚礼的宾客填写个人信息,送一些祝福语等。
    一、任务实现分析
    1.页面结构
    从图7.1~图 7.5中可以看出,页面底部都有标签栏,通过单击不同的标签按钮切换到对
    应的页面。
    在“邀请函”页面中,右上角有个音乐播放按钮,中间是新郎和新娘的合照,合照下面
    是新郎和新娘的姓名,单击旁边的电话图标可以呼叫。底部是婚礼时间和地点信息。
    在“照片”页面中,通过纵向的轮播图展示了新人的婚纱照片。
    在“美好时光”页面中,提供了视频在线播放功能。
    在“婚礼地点”页面中,提供了在线地图,单击导航图标可以定位婚礼酒店位置。
    在“宾客信息“页面中,提供了一个表单,用于填写宾客信息。
    2.目录结构
    本项目的目录结构说明如下表 7.2所示。
    表 7.2 目录结构说明
    路径 说明
    app.js 应用程序的逻辑文件
    app.json 应用程序的配置文件
    app.wxss 定义公共样式
    pages/index/ “邀请函”页面保存目录
    pages/picture/ “照片”页面保存目录
    pages/video/ “美好时光”页面保存目录
    pages/map/ “婚礼地点”页面保存目录
    pages/guest/ “宾客信息“页面保存目录
    images 图片文件
    3.项目初始化
    在微信开发者工具中创建一个空白项目。创建成功后,新建 app.json文件,在该文件中
    定义本项目中的页面和导航栏样式,具体代码如下:
    {
    “pages”: [
    “pages/index/index”,
    “pages/guest/guest”,
    “pages/map/map”,
    “pages/video/video”,
    “pages/picture/picture”
    ],
    “window”: {
    “backgroundTextStyle”: “light”,
    “navigationBarBackgroundColor”: “#ff4c91”,
    “navigationBarTextStyle”: “white”,
    “enablePullDownRefresh”: false
    },
    “tabBar”: { “color”: “#ccc”,
    “selectedColor”: “#ff4c91”,
    “borderStyle”: “white”,
    “backgroundColor”: “#fff”,
    “list”: [
    {
    “pagePath”: “pages/index/index”,
    “iconPath”: “images/invite.png”,
    “selectedIconPath”: “images/invite.png”,
    “text”: “邀请函”
    },
    {
    “pagePath”: “pages/picture/picture”,
    “iconPath”: “images/marry.png”,
    “selectedIconPath”: “images/marry.png”,
    “text”: “照片”
    },
    {
    “pagePath”: “pages/video/video”,
    “iconPath”: “images/video.png”,
    “selectedIconPath”: “images/video.png”,
    “text”: “美好时光”
    },
    {
    “pagePath”: “pages/map/map”,
    “iconPath”: “images/map.png”,
    “selectedIconPath”: “images/map.png”,
    “text”: “婚礼地点”
    },
    {
    “pagePath”: “pages/guest/guest”,
    “iconPath”: “images/guest.png”,
    “selectedIconPath”: “images/guest.png”,
    “text”: “宾客信息”
    }
    ]
    },
    在上述代码中,tabBar 对象用于配置页面底部的标签栏,list 是一个数组,数组的每一
    个元素是一个标签按钮对象,通过该对象的属性可以配置标签栏中的每个标签按钮。
    在每一个标签页打开时,导航栏的标题也需要随之发生变化。下面在每个页面的 json
    文件中配置页面标题,以 pages/index/index.json文件为例,具体代码如下:
    {
    “navigationBarTitleText”: “邀请函”
    } 完成配置文件的编写后,在 app.wxss文件中定义公共样式,具体代码如下:
    /app.wxss/
    page {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    }

    7.2.2邀请函页面
    打开婚礼邀请函小程序后,首先进入到邀请函页面,在页面的右上角有一个背景音乐播
    放按钮,用于控制音乐播放状态,单击按钮播放音乐,再次单击按钮暂停音乐。在邀请函页
    面中,显示了新娘和新郎的头像、姓名,以及婚礼时间和地点,让宾客可以马上了解婚礼相
    关信息。
    一、背景音乐播放
    在 pages/index/index.wxml 文件中编写播放器的结构,具体代码如下:




    在上述代码中,isPlayMusic 变量表示当前是否正在播放音乐,用于通过判断播放状态来
    改变 class的值。music_icon.png 是黑胶唱片图标,music_play.png 是唱臂图标。
    在 pages/index/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;
    }
    在上述代码中,提高堆叠顺序从而防止播放器图标被.content 容器覆盖在下面,还有唱
    片图标设置了旋转动画。
    在 pages/index/index.js文件中的 data中定义 isPlayingMusic,具体代码如下:
    data: {
    isPlayingMusic: false
    },
    接下来在 pages/index/index.wxss 文件中通过样式来控制播放器的播放和暂停效果。其
    中播放状态的 class为.player-play,暂停状态的 class为.play-pause,具体代码如下:
    /
    播放状态 class为.player-play /
    .player-play > image:first-child {
    animation-play-state: running;
    }
    .player-play > image:last-child {
    animation: musicStart 0.2s linear forwards;
    }
    /
    暂停状态 class为.player-pause */
    .player-pause > image:first-child {
    animation-play-state: paused;
    }
    .player-pause > image:last-child {
    animation: musicStop 0.2s linear forwards;
    }
    @keyframes musicStart {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(20deg);
    }
    }
    @keyframes musicStop {
    from {
    transform: rotate(20deg);
    }
    to {
    transform: rotate(0deg);
    } }
    完成播放器的样式代码后,下面就开始实现音乐播放功能。在第 6 章的项目中用过了
    wx.createInnerAudioContext()接口播放音频,在小程序中,还有一种专门用于播放背景音频
    的 wx.getBackgroundAudioManager()接口,其特点在于小程序切入后台时,如果音频处于播
    放状态,可以断续播放。为了实现这个效果,需要先在 app.json 中添加如下配置,添加后在
    开发版中会直接生效,正式版还需通过审核。
    “requiredBackgroundModes”: [
    “audio”
    ],
    然后在 pages/index/index.js文件中编写背景音频播放的代码,具体代码如下:
    bgm: null,
    music_url: ‘http://localhost:3000/1.mp3’,
    music_coverImgUrl: ‘http://localhost:3000/cover.jpg’,
    onReady: function() {
    // 创建getBackgroundAudioManager 实例对象
    this.bgm = wx.getBackgroundAudioManager()
    // 音频标题
    this.bgm.title = ‘merry 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
    },
    在上述代码中,先创建 BackgroundAudioManager 实例对象,之后分别指定音乐的标题、
    专辑名称、艺术家和专辑封面。还设置了自动开始播放与暂停操作。
    继续在 pages/index/index.js文件中编写播放器的单击事件,具体代码如下:
    // 播放器的单击事件
    play: function() {
    if (this.data.isPlayingMusic) {
    this.bgm.pause()
    } else {
    this.bgm.play()
    }
    this.setData({
    isPlayingMusic: !this.data.isPlayingMusic
    })
    }, 上述代码实现了根据isPlayingMusic的值来执行暂停或播放操作,如果值为true则暂停,
    值为 false则播放。
    保存上述代码后,测试播放器的播放和暂停功能是否实现。
    二、页面结构和样式
    在 pages/index/index.wxml 文件中的播放器的下面继续编写代码,实现背景图片和内容
    区域的基本结构,具体代码如下:

    邀请函 我们诚邀您来参加我们的婚礼 时间:2019年1月28日 地点:北京市海淀区XX路XX酒店 在上述代码中,使用 image组件来引入本地图片,不能在 wxss中通过 background 引入 本地图片。由于小程序的体积有限,在实际开发中,推荐用 URL 的方式引入一些比较占用 空间的图片等资源。 接下来在 pages/index/index.wxss 文件中编写样式。其中,背景图需要扑满整个页面, 页面内各元素的高度应不超过页面的高度。为此,推荐使用 viewport单位,即通过 vw和 vh 表示宽度和高度,确保.content 内部的元素高度加起来不超过 100,具体代码如下: /* 背景图 */ .bg { width: 100vw; height: 100vh; } /* 内容区域 */ .content { width: 100vw; height: 100vh; position: fixed; display: flex; flex-direction: column; align-items: center; } /* 顶部gif图 */ .content-gif { width: 19vh; height: 18.6vh; margin-bottom: 1.5vh; } /* 标题 */ .content-title { font-size: 5vh; color: #ff4c91; text-align: center; margin-bottom: 2.5vh; } /* 头像 */ .content-avatar image { width: 24vh; height: 24vh; border: 3px solid #ff4c91; border-radius: 50%; } 三、一键拨打电话 在 pages/index/index.wxml 文件中的 class 为 content-info 的标签中编写代码,将新郎和 新娘的名字显示在页面中,并且在名字的右上方提供一个电话的图标,具体代码如下: 王辉辉 新郎 张琳琳 新娘 在 pages/index/index.wxss 文件中编写样式,具体代码如下: /* 新郎新娘信息 */ .content-info { width: 45vw; text-align: center; margin-top: 4vh; display: flex; align-items: center; } .content-name { color: #ff4c91; font-size: 2.7vh; line-height: 4.5vh; font-weight: bold; position: relative; } .content-name > image { width: 2.6vh; height: 2.6vh; border: 1px solid #ff4c91; border-radius: 50%; position: absolute; top: -1vh; right: -3.6vh; } .content-wedding { flex: 1; } .content-wedding > image { width: 5.5vh; height: 5.5vh; margin-left: 20rpx; } 完成页面和样式后,在 pages/index/index.js 文件中编写页面中用到的 callGroom 和 callBride 事件处理函数,实现一键拨打电话功能,具体代码如下: // 一键拨打电话 // 新郎电话 callGroom: function() { wx.makePhoneCall({ phoneNumber: '13700000000' }) }, // 新娘电话 callBride: function() { wx.makePhoneCall({ phoneNumber: '15600000000' }) } 上述代码通过调用 wx.makePhoneCall()接口实现呼叫功能,当呼叫按钮按下后,会看到 拨打电话的提示信息。

    7.2.3照片页面
    本页面采用纵向轮播的方式展示图片,可以通过单击指示面板的圆点切换到相对应的图
    片。要求每一张轮播的图片都占满显示区域,滑动屏幕可以实现图片的纵向切换;在右侧纵
    向显示指示点面板,单击圆点可切换显示状态;在用户无操作时,可以实现自动无缝轮播。
    在 pages/picture/picture.js 文件中准备图片的路径,具体代码如下:
    Page({
    data: {
    imgUrls: [
    ‘/images/timg1.jpg’,
    ‘/images/timg2.jpg’,
    ‘/images/timg3.jpg’,
    ‘/images/timg4.jpg’
    ]
    }
    })
    接着在 pages/ picture / picture.wxml 文件中设置 swiper组件的属性,具体代码如下:





    然后在 pages/ picture / picture.wxss文件中编写样式,具体代码如下:
    swiper {
    height: 100vh;
    }
    image {
    width: 100vw;
    height: 100vh;
    }

    7.2.4美好时光页面
    该页面采用视频的方式来记录一对新人的难忘时光。在小程序中播放视频有两种实现方
    式,一种是使用 video组件,另一种是使用腾讯视频插件,本例采用前者。
    一、编写页面结构和样式
    在 pages/ video / video.js文件中编写视频列表数据,具体代码如下:
    data: {
    movieList: [{
    create_time: ‘2020-7-5 10:51:54’, title: ‘海边随拍’,
    src: ‘http://……/1.mp4’
    }, {
    create_time: ‘2020-7-5 10:52:54’,
    title: ‘勿忘心安’,
    src: ‘http://……/2.mp4’
    }, {
    create_time: ‘2020-7-5 10:53:54’,
    title: ‘点滴记忆’,
    src: ‘http://……/3.mp4’
    }]
    }
    在 pages/ video / video.wxml文件中编写页面结构,具体代码如下:

    标题:{{item.title}}
    时间:{{item.create_time}}


    在 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;
    }
    二、利用 WXS增强页面功能
    在实际开发中,经常会遇到这样的情况:页面中的 data 数据是从服务器端获取的,服
    务器返回的数据可能不适合直接显示到页面中,需要对数据进行转换后才能显示。假设在本
    项目中,视频列表数据是从服务器获取的,服务器返回的 create_time 是一个时间戳,下面
    在 pages/ video / video.js文件中模拟这一情况,将 creat_time 改为时间戳,具体代码如下: Page({
    data: {
    movieList: [{
    create_time: 1532519754589,
    title: ‘海边随拍’,
    src: ‘http://……/1.mp4’
    }, {
    create_time: 1532519777690,
    title: ‘勿忘心安’,
    src: ‘http://……/2.mp4’
    }, {
    create_time: 1532519734589,
    title: ‘点滴记忆’,
    src: ‘http://……/3.mp4’
    }]
    }
    })
    针对这种情况,可以在 WXML文件中通过WXS(WeiXin Script)嵌入代码。WXS是小程
    序的一套脚本语言,语法和 JavaScript 类似,但又存在少量的差异,具体可以查看小程序官
    方手册中对于 WXS的说明,这里不再对其详细介绍。
    下面演示 WXS的使用,在 pages/ video / video.wxml文件中新增代码,通过WXS定义一
    个函数,用于将时间戳转换为易于阅读的时间,具体代码如下:

    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
    }

    在上述代码中, 标签用于在WXML中嵌入WXS代码,属性module表示模块名称;
    module.exports 用于将代码导出,可以为其赋值一个对象或函数,这里赋值的是一个函数,
    导出后,就可以在{{}}中调用formatData()函数;如果赋值的是一个对象,则使用“formatData.
    属性名”来使用。
    接下来修改时间显示的代码,将 create_time 经过处理后再输出,如下所示:
    时间:{{formatData(item.create_time)}}
    保存上述代码后,测试程序,观察时间格式是否可以被正确转换。

    7.2.5婚礼地点页面
    该页面会显示婚礼地点的地图,单击导航图标可以定位酒店位置,查看路线。本项目针对婚礼地点页面的实现细节进行分析:拾取到婚礼举办酒店的经纬度坐标,利用 map 组件
    显示地图,并在婚礼地点放置 markers 覆盖物标记,单击蓝色图标的标记点,通过
    wx.openLoacation()调用微信内置地图查看位置。
    一、微信内置地图和定位
    小程序提供了打开微信内置地图的 API 和定位用户位置的 API,需要用户授权才能使用,
    也就是会自动提示用户“是否同意获取您的位置”,同意后即可获取。下面演示这两个 API
    的使用。首先在 pages/ map /map.wxml 文件中准备一个按钮,具体代码如下:
    查看我的位置
    然后在 pages/ map /map.js 文件中编写代码,通过 wx.getLocation()方法获取用户当前的
    位置,获取后再通过 wx.openLocation()方法显示该位置的地图,具体代码如下:
    buttonTap:function () {
    wx.getLoaction({
    type:’gcj02’ ,
    success:function (res) {
    wx.openLocation ({
    latitude:res.latitude,
    longitude:res.longitude
    })
    }
    })
    }
    在上述代码中,type 属性用于设置返回的坐标信息,默认值为 wgs84,表示返回 GPS
    坐标,设为 gcj02表示返回用于 wx.openLocation()方法的坐标。
    二、编写婚礼地点页面
    在 pages/ map /map.wxml 文件中编写页面结构,具体代码如下:

    在 pages/ map /map.wxss文件中编写页面样式,具体代码如下:
    map {
    width: 100vw;
    height: 100vh;
    }
    在 pages/ map /map.js文件中编写 data和 markertap()函数,具体代码如下:
    data: {
    latitude: 40.06021,
    longitude: 116.3433,
    markers: [{
    iconPath: ‘/images/navi.png’,
    id: 0,
    latitude: 40.06021,
    longitude: 116.3433,
    width: 50,
    height: 50
    }] },
    markertap: function() {
    wx.openLocation({
    latitude: this.data.latitude,
    longitude: this.data.longitude,
    name: ‘XX大酒店’,
    address: ‘北京市 海淀区 XX路’
    })
    }

    保存上述代码后,运行程序,页面效果与任务分析中的图 7.4一致。

    7.2.6宾客信息页面
    该页面提供了一个表单,用于填写来宾的信息,包括姓名、手机号、参加婚礼人数、新
    人祝福语。本项目针对宾客信息页面的功能需求进行分析:为页面添加背景图,当姓名、手
    机号所在文本框失去焦点时,触发失去焦点事件 bindblur,对文本内容进行正则表达式校验,
    格式错误会给出友好的提示信息,单击 num(参加婚礼的人数)时,从底部弹出一个选择器,
    可以选择人数,单击 submit 提交按钮,获取form表单数据,提交成功后会给出“成功”提
    示,利用小程序中的模板消息机制,发送回复通知。
    一、编写页面结构和样式
    在 pages/ guest /guest.wxml 文件中编写页面结构,具体代码如下:

    参加婚礼人数:{{picker.arr[picker.index]}} 提交 在上述代码中,placeholder 属性用于在输入框中显示提示文字,placeholder-class 属性 用于指定提示文字的class样式。 在 pages/ guest /guest.js 文件中编写 data 数据和pickerChange()函数,具体代码如下: data: { picker: { arr: ['0', '1', '2', '3', '4', '5', '6'], index: 1 } }, pickerChange: function(e) { this.setData({ 'picker.index': e.detail.value }) }, 在 pages/ guest /guest.wxss 文件中编写页面样式,具体代码如下: .bg { width: 100vw; height: 100vh; } .content { width: 80vw; position: fixed; left: 10vw; bottom: 6vh; } .content > view { font-size: 2.8vh; border: 1rpx solid #ff4c91; border-radius: 10rpx; padding: 1.5vh 40rpx; margin-bottom: 1.5vh; color: #ff4c91; } .content button { font-size: 3vh; height: 7.5vh; line-height: 7.5vh; background: #ff4c91; color: #fff; } .content picker { padding: 0.7vh 0; } .content .phcolor { color: #ff4c91; } 保存上述代码后,运行程序,页面效果与“项目展示”中的图 7.5相同。 二、表单验证 当用户在 input 组件中输入文字后,如果执行其他操作,就会触发 input 组件的 blur 失 去焦点事件,因此,可以通过绑定 blur事件实现表单验证。在 pages/ guest /guest.wxml 文件 中为姓名和手机号码绑定 blur事件,具体代码如下: 在 pages/ guest /guest.js 文件中编写事件处理函数,实现表单验证,具体代码如下: // 验证姓名 nameChange: function(e) { this.checkName(e.detail.value) }, // 验证手机号 phoneChange: function(e) { this.checkPhone(e.detail.value) }, // checkName()方法 checkName: function(data) { var reg = /^[\u4E00-\u9FA5A-Za-z]+$/; return this.check(data, reg, '姓名输入错误!') }, // checkPhone()方法 checkPhone: function(data) { var reg = /^(((13)|(15)|(17)|(18))\d{9})$/; return this.check(data, reg, '手机号码输入有误!') }, // check()方法 check: function(data, reg, errMsg) { if (!reg.test(data)) { wx.showToast({ title: errMsg, icon: 'none', duration: 1500 }) } return true }, 在上述代码中,通过 wx.showToast()方法显示提示信息,在该方法的参数中,title 表示提示文本,icon 表示提示图标,duration 表示显示多少毫秒后自动消失。图标的默认值为 success(成功),还可以设为 loading(加载中)或 none(无图标),此处是错误提示,因此不显 示图标。 下面在 pages/ guest /guest.js 文件中编写表单提交时执行的事件处理函数formSubmit(), 调用 checkName()和 checkPhone()函数再次对表单进行验证,只有验证通过才能提交表单。 提交表单后,显示提交成功的提示信息,具体代码如下: formSubmit: function(e) { var name = e.detail.value.name var phone = e.detail.value.phone if (this.checkName(name) && this.checkPhone(phone)) { // 在此处可编写代码将e.detail.value 提交到服务器 wx.showToast({ title: '提交成功', icon: 'success', duration: 1500 }) } }, 在上述代码中,可以添加代码将 e.detail.value 中的表单数据提交给服务器,由于本项目 没有专门编写服务器程序,因此省略了此步骤。 三、发送婚礼请贴回复通知 在用户提交表单后,如果 服务器收到了表单,就会向用户发送婚礼请帖回复通知,利 用模板消息来实现。发送模板消息功能涉及 3个角色的参与,分别是小程序、服务器和微信 接口,具体交互流程如下: 1) 用户在小程序中填写表单,提交给服务器。在提交的时候需要附加上 formId(表单 id)和 code(通过wx.login()获取到的登录凭证)。 2) 服务器收到表单后,使用自己的 appid、secret 和用户的 code 请求微信接口,获取 用户的 openid。 3) 服务器向用户发送模板消息,需要先使用自己的 appid、secret 请求微信接口,获 取access_id(访问令牌),然后再使用 access_id和用户的 openid、formId,以及模板 消息的 id和消息内容请求微信接口,发送模板消息。 4) 微信接口将模板消息推送给用户,用户就会在微信的“服务通知”中看到消息。 接下来通过代码实现模板消息的发送。由于模板消息限制1次提交表单只能发1个消息, 为了区分每个表单,需要为表单生成formId,在 pages/ guest /guest.wxml 文件中编写代码, 为“提交”按钮设置report-submit 属性,用于生成 formId,具体代码如下: 提交 在 pages/ guest /guest.js 文件中的 formSubmit()函数中输出 formId,具体代码如下: formSubmit: function(e) { console.log(e.detail.formId) ……(原有代码) } 需要注意的是,在微信开发者工具中formId的输出结果为 the formId is a mock one,表 示 formId 是模拟的,只有在微信环境下运行小程序时,才可以获取到真正的 formId。读者 可以在微信中打开小程序后,单击右上角的“…”按钮,在底部弹出的菜单中单击“打开调试”,从而查看控制台输出结果。 接下来编写服务器端代码,由于搭建真实服务器环境比较麻烦,这里使用小程序来模拟 服务器中的操作,在 pages/ guest /guest.js 文件中的Page()函数的后面编写 server对象,用 于模拟服务器,与微信接口进行交互,具体代码如下: // 模拟服务器端代码 Page({ …… }) var server = { appid: '', // 在此处填写自己的appid secret: '', // 在此处填写自己的secret // 用于保存用户的openid和formId user: { openid: '', formId: '' }, // 用于接收表单,调用this.getOpenid()根据code换取openid post: function(data, success) { console.log('收到客户端提交的数据:', data) this.user.formId = data.formId this.getOpenid(data.code, res => { console.log('用户openid:' + res.data.openid) this.user.openid = res.data.openid success() }) }, // 用于根据code获取openid getOpenid: function(code, success) {}, // 用于发送模板消息 getOpenid: function(code, success) { wx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data: { appid: this.appid, secret: this.secret, grant_type: 'authorization_code', js_code: code }, success: success }) }, // 用于发送模板消息 sendTemplateMessage: function(success) { var user = this.user var data = { touser: user.openid, template_id: '……', // 在此处填写模板id page: 'index', form_id: user.formId, data: { keyword1: { value: '王辉辉、张琳琳' }, keyword2: { value: '谢谢你的祝福' }, keyword3: { value: '请记得按时参加婚宴哦' }, keyword4: { value: '北京市海淀区XX路XX酒店' } } } this.getAccessToken(res => { var token = res.data.access_token console.log('服务器access_token:' + token) var url = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + token wx.request({ url: url, method: 'post', data: data, success: success }) }) }, // 用于获取access_token getAccessToken: function(success) { var url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + this.appid + '&secret=' + this.secret wx.request({ url: url, success: success }) } } 在上述代码中,appid和 secret 需要读者自行填写,可以在“小程序管理后台”中获取, appid 对应Appid,secret 对应 AppSecret。 接下来在pages/ guest /guest.js文件中的formSubmit()函数的表单验证成功的if判断中, 编写代码请求服务器,具体代码如下: if (this.checkName(name) && this.checkPhone(phone)) { // 在此处可编写代码将e.detail.value 提交到服务器 wx.login({ success: res => { server.post({ formId: e.detail.formId, code: res.code }, () => { // 将表单提交给服务器,传入formId和code wx.showToast({ title: '提交成功', icon: 'success', duration: 1500 }) // 提交成功后,由服务器发送模板消息 server.sendTemplateMessage(res => { console.log('模板消息发送结果:', res.data) }) }) }, }) }

    在上述代码中,wx.login()用于获取用户登录凭证(code),在 success 回调函数中通过
    res.code 获取(res 是该回调函数的参数)。服务器使用 code 请求微信接口可以获取用户的
    openid(用户唯一标识)。微信接口在发送模板消息时需要通过给定的 openid 才能确定该消息
    发送给哪一个用户。本例中表单提交成功后,通知服务器向用户发送模板消息,但在实际开
    发中,模板消息是由服务器主动发送的,并不需要小程序专门通知,此处是为了模拟服务器
    主动发送模板消息而执行的操作。
    然后在server对象中编写 post()方法和 getOpenId()方法,具体代码如下:
    // 用于接收表单,调用this.getOpenid()根据code换取openid
    post: function(data, success) {
    console.log(‘收到客户端提交的数据:’, data)
    this.user.formId = data.formId
    this.getOpenid(data.code, res => {
    console.log(‘用户openid:’ + res.data.openid)
    this.user.openid = res.data.openid
    success() })
    },
    // 用于根据code获取openid
    getOpenid: function(code, success) {
    wx.request({
    url: ‘https://api.weixin.qq.com/sns/jscode2session’,
    data: {
    appid: this.appid,
    secret: this.secret,
    grant_type: ‘authorization_code’,
    js_code: code
    },
    success: success
    })
    },
    在上述代码中,接口的地址用于根据登录凭据 code 获取用户信息,该用户信息包含后
    面的开发中所需的 openid。继续在 server 对象中编写 sendTemplateMessage()函数和
    getAccessToken()函数,分别用于发送模板消息和获取access_token,具体代码如下:
    // 用于发送模板消息
    sendTemplateMessage: function(success) {
    var user = this.user
    var data = {
    touser: user.openid,
    template_id: ‘……’, // 在此处填写模板id
    page: ‘index’,
    form_id: user.formId,
    data: {
    keyword1: {
    value: ‘王辉辉、张琳琳’
    },
    keyword2: {
    value: ‘谢谢你的祝福’
    },
    keyword3: {
    value: ‘请记得按时参加婚宴哦’
    },
    keyword4: {
    value: ‘北京市海淀区XX路XX酒店’
    }
    }
    }
    this.getAccessToken(res => {
    var token = res.data.access_token
    console.log(‘服务器access_token:’ + token) var url =
    ‘https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=’ +
    token
    wx.request({
    url: url,
    method: ‘post’,
    data: data,
    success: success
    })
    })
    },
    // 用于获取access_token
    getAccessToken: function(success) {
    var url =
    ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=’ +
    this.appid + ‘&secret=’ + this.secret
    wx.request({
    url: url,
    success: success
    })
    }
    保存上述代码后,在手机中运行小程序测试。在宾客信息页面提交表单后,会收到微信
    的提示信息“婚礼请帖回复通知”,至此,模板消息功能开发完成。如果读者在实际操作时
    没有收到信息,可以单击右上方的“…”按钮打开调试,查看 vConsole 控制台中输出的信
    息,检查是否存在错误。

    展开全文
  • 微信小程序自己配置调试,使用条件具有微信公众号,订阅号服务号小程序都可以,应该可以使用,公司调试使用的
  • 婚礼邀请函小程序由5个页面组成,分别是邀请函页面、照片页面、美好时光页面、婚礼地点页面、宾客信息页面。
  • 邀请mp 邀请函婚礼邀请小程序
  • 扫码体验 - 婚礼邀请函 效果图 主页面展示 项目说明 服务器:阿里云服务 域名:pengmaster.com 数据库:在服务器上装的mysql mpvue前端版本: 后台地址(服务端相关问题去这里看): 后台统计地址: 项目中引用的...
  • 微信小程序模拟制作婚礼邀请函.rar
  • 开源婚礼邀请函小程序实现功能讲解

    请勿使用本文章及源码作为商业用途!

    前言

    感谢OnceLove提供的思路,借助他的小程序的界面UI风格,自己重新用mpvue实现了属于自己的婚礼邀请函,前前后后花了3天时间。在这之前本人是没想过要自己实现这样一个项目,原因是后台那块是个麻烦事,所以当媳妇让我自己实现这个邀请函的时候,起初我是拒绝的。后面由于快要过年了,公司项目没有重大更新,趁着这段空闲时间,自己研究了下小程序自带的云开发,无需后台支持,前后端都可以自己来实现,下面我将一一介绍本项目的实现过程!

    本小程序为婚礼正式使用的小程序,婚期将至,感兴趣的可以扫码体验本项目,沾沾喜气,欢迎大家体验,有什么问题可以在本文给我留言

    由于云开发CDN资源流量限额,这里的体验二维码就不展示出来了,抱歉

    准备工作

    1. mpvue框架 mpvue官方文档
    2. 小程序·云开发 小程序·云开发文档

    注意:使用mpvue前,首先你得先熟悉vue框架的基本使用 

    项目结构介绍

    common目录: 放一些公共资源,如js,css,json

    components目录:组件相关的.vue文件都放在这里

    pages目录:所有页面都放在这个目录

    utils目录:使用mpvue时自动生成,可忽略

    app.json文件:

    {
      "pages": [
        "pages/index/main",
        "pages/photo/main",
        "pages/map/main",
        "pages/greet/main",
        "pages/message/main"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
      "tabBar": {
        "color": "#ccc",
        "selectedColor": "#ff4c91",
        "borderStyle": "white",
        "backgroundColor": "#ffffff",
        "list": [
          {
              "pagePath": "pages/index/main",
              "iconPath": "static/images/1-1.png",
              "selectedIconPath": "static/images/1-2.png",
              "text": "邀请函"
          },
          {
              "pagePath": "pages/photo/main",
              "iconPath": "static/images/2-1.png",
              "selectedIconPath": "static/images/2-2.png",
              "text": "甜蜜相册"
          },
          {
              "pagePath": "pages/map/main",
              "iconPath": "static/images/3-1.png",
              "selectedIconPath": "static/images/3-2.png",
              "text": "酒店导航"
          },
          {
              "pagePath": "pages/greet/main",
              "iconPath": "static/images/4-1.png",
              "selectedIconPath": "static/images/4-2.png",
              "text": "好友祝福"
          },
          {
              "pagePath": "pages/message/main",
              "iconPath": "static/images/5-1.png",
              "selectedIconPath": "static/images/5-2.png",
              "text": "留言评论"
          }
        ]
      },
      "requiredBackgroundModes": ["audio"]
    }
    

    App.vue文件:本人主要是为了增加项目更新后的提醒,所以在这个文件加了些相关内容,内容如下,

    <script>
    export default {
      onLaunch () {
        // 检测小程序是否有新版本更新
        if (wx.canIUse('getUpdateManager')) {
          const updateManager = wx.getUpdateManager()
          updateManager.onCheckForUpdate(function (res) {
            // 请求完新版本信息的回调
            if (res.hasUpdate) {
              updateManager.onUpdateReady(function () {
                wx.showModal({
                  title: '更新提示',
                  content: '新版本已经准备好,是否重启应用?',
                  success: function (res) {
                    if (res.confirm) {
                      // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                      updateManager.applyUpdate()
                    }
                  }
                })
              })
              // 小程序有新版本,会主动触发下载操作(无需开发者触发)
              wx.getUpdateManager().onUpdateFailed(function () {
                // 当新版本下载失败,会进行回调
                wx.showModal({
                  title: '提示',
                  content: '检查到有新版本,下载失败,请检查网络设置',
                  showCancel: false
                })
              })
            }
          })
        } else { // 版本过低则无法使用该方法
          wx.showModal({
            title: '提示',
            confirmColor: '#5BB53C',
            content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
          })
        }
      }
    }
    </script>
    
    <style lang="stylus">
    page
        height 100%
    image
        display block
    </style>
    

    main.js文件:

    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    App.mpType = 'app'
    
    wx.cloud.init({
      env: '云开发环境ID'
    })
    
    const app = new Vue(App)
    app.$mount()
    

    functions目录:主要放一些云函数,这里不清楚云函数的文章后面会提及

    images目录:主要放一些静态资源图片

    页面介绍

    • 首页——邀请函

    首页着重和大家讲解下背景音乐的实现方法

    const audioCtx = wx.createInnerAudioContext()

    首先,wx.createInnerAudioContext 接口获取实例

    接着,通过实例的相关方法来实现音乐的播放与暂停功能

    关于小程序音频相关文档

    具体代码如下:

    <script>
    import IndexSwiper from 'components/indexSwiper'
    import tools from 'common/js/h_tools'
    const audioCtx = wx.createInnerAudioContext()
    export default {
      name: 'Index',
      components: {
        IndexSwiper
      },
      data () {
        return {
          isPlay: true,
          list: []
        }
      },
      onShow () {
        const that = this
        that.isPlay = true
        that.getMusicUrl()
      },
    
      methods: {
        audioPlay () {
          const that = this
          if (that.isPlay) {
            audioCtx.pause()
            that.isPlay = false
            tools.showToast('您已暂停音乐播放~')
          } else {
            audioCtx.play()
            that.isPlay = true
            tools.showToast('背景音乐已开启~')
          }
        },
    
        getList () {
          const that = this
          const db = wx.cloud.database()
          const banner = db.collection('banner')
          banner.get().then(res => {
            that.list = res.data[0].bannerList
          })
        },
    
        getMusicUrl () {
          const that = this
          const db = wx.cloud.database()
          const music = db.collection('music')
          music.get().then(res => {
            let musicUrl = res.data[0].musicUrl
            audioCtx.src = musicUrl
            audioCtx.loop = true
            audioCtx.play()
            that.getList()
          })
        }
      },
    
      onShareAppMessage: function (res) {
        return {
          path: '/pages/index/main'
        }
      }
    }
    </script>

    以上代码中使用到了云开发相关功能,文章后面会介绍,请大家稍安勿躁

    • 相册页——就一个轮播图,这里就不过多介绍
    • 地图页——这里着重讲一下地图标签map

    map标签 关于map组件的使用文档

    这里讲一下标记点markers

    data () {
        return {
          // qqSdk: '',
          markers: [{
            iconPath: '../../static/images/nav.png',
            id: 0,
            latitude: 30.08059,
            longitude: 115.93027,
            width: 50,
            height: 50
          }]
        }
      }
    <template>
        <div class="map">
            <image mode="aspectFit" class="head-img" src="../../static/images/t1.png"/>
            <map class="content" id="map" longitude="115.93027" latitude="30.08059" :markers="markers" scale="18" @tap="toNav">
            </map>
            <div class="call">
                <div class="left" @tap="linkHe">
                    <image src="../../static/images/he.png"/>
                    <span>呼叫新郎</span>
                </div>
                <div class="right" @tap="linkShe">
                    <image src="../../static/images/she.png"/>
                    <span>呼叫新娘</span>
                </div>
            </div>
            <image class="footer" src="../../static/images/grren-flower-line.png"/>
        </div>
    </template>
    • 祝福页——也是云开发相关内容,后面会介绍
    • 留言页——也是云开发相关内容,后面会介绍

    云开发介绍

    小程序云开发文档

    • project.config.json文件:
    "cloudfunctionRoot": "static/functions/"

    进行云开发首先我们需要找到上面这个文件,在上面这个json文件中加上上面这句

    cloudfunctionRoot 用于指定存放云函数的目录

    • app.json文件:
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },
    "cloud": true

    增加字段 "cloud": true实现云开发能力的兼容性

    • 开通云开发

    在开发者工具工具栏左侧,点击 “云开发” 按钮即可开通云开发

    • 云开发控制台

    • 数据库

     云开发提供了一个 JSON 数据库

    • 存储

    云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过 API 使用云存储功能。

    • 云函数

    云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。

    下面开始讲解使用云开发的过程:

    1. 云能力初始化,在小程序端开始使用云能力前,需先调用 wx.cloud.init 方法完成云能力初始化
    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    App.mpType = 'app'
    
    wx.cloud.init({
      env: '云开发环境ID'
    })
    
    const app = new Vue(App)
    app.$mount()
    

    2. 数据库的使用:

    在开始使用数据库 API 进行增删改查操作之前,需要先获取数据库的引用。以下调用获取默认环境的数据库的引用:

    const db = wx.cloud.database()

     要操作一个集合,需先获取它的引用:

    const todos = db.collection('todos')

    接下来是操作数据库的相关示例:

    例:首页获取背景音乐资源

    getMusicUrl () {
          const that = this
          const db = wx.cloud.database()
          const music = db.collection('music')
          music.get().then(res => {
            let musicUrl = res.data[0].musicUrl
            audioCtx.src = musicUrl
            audioCtx.loop = true
            audioCtx.play()
            that.getList()
          })
    }

     例:首页获取轮播图数组

    getList () {
          const that = this
          const db = wx.cloud.database()
          const banner = db.collection('banner')
          banner.get().then(res => {
            that.list = res.data[0].bannerList
          })
    }

    例:祝福页,用户送上祝福存储用户

    <script>
    import tools from 'common/js/h_tools'
    export default {
      name: 'Greet',
      data () {
        return {
          userList: [],
          openId: '',
          userInfo: ''
        }
      },
      onShow () {
        const that = this
        that.getUserList()
      },
      methods: {
        scroll (e) {
          console.log(e)
        },
    
        sendGreet (e) {
          const that = this
          if (e.target.errMsg === 'getUserInfo:ok') {
            wx.getUserInfo({
              success: function (res) {
                that.userInfo = res.userInfo
                that.getOpenId()
              }
            })
          }
        },
    
        addUser () {
          const that = this
          const db = wx.cloud.database()
          const user = db.collection('user')
          user.add({
            data: {
              user: that.userInfo
            }
          }).then(res => {
            that.getUserList()
          })
        },
    
        getOpenId () {
          const that = this
          wx.cloud.callFunction({
            name: 'user',
            data: {}
          }).then(res => {
            that.openId = res.result.openid
            that.getIsExist()
          })
        },
    
        getIsExist () {
          const that = this
          const db = wx.cloud.database()
          const user = db.collection('user')
          user.where({
            _openid: that.openId
          }).get().then(res => {
            if (res.data.length === 0) {
              that.addUser()
            } else {
              tools.showToast('您已经送过祝福了~')
            }
          })
        },
    
        getUserList () {
          const that = this
          wx.cloud.callFunction({
            name: 'userList',
            data: {}
          }).then(res => {
            that.userList = res.result.data.reverse()
          })
        }
      }
    }
    </script>
    • 进入祝福页,首先我们需要获取送祝福的好友列表
    getUserList () {
          const that = this
          wx.cloud.callFunction({
            name: 'userList',
            data: {}
          }).then(res => {
            that.userList = res.result.data.reverse()
          })
    }

    这里用到了云函数,之所以用云函数是因为小程序端在获取集合数据时服务器一次默认并且最多返回 20 条记录,云函数端这个数字则是 100。

    下面给大家看看云函数的使用方法:

    上面我们讲过在project.config.json文件中配置云函数存放位置

    下面是云函数messageList的index.js文件:

    const cloud = require('wx-server-sdk')
    cloud.init()
    const db = cloud.database()
    const MAX_LIMIT = 100
    exports.main = async (event, context) => {
      // 先取出集合记录总数
      const countResult = await db.collection('message').count()
      const total = countResult.total
      // 计算需分几次取
      const batchTimes = Math.ceil(total / 100)
      // 承载所有读操作的 promise 的数组
      const tasks = []
      for (let i = 0; i < batchTimes; i++) {
        const promise = db.collection('message').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
        tasks.push(promise)
      }
      // 等待所有
      return (await Promise.all(tasks)).reduce((acc, cur) => ({
        data: acc.data.concat(cur.data),
        errMsg: acc.errMsg
      }))
    }
    

    使用云函数前,在开发者工具上,找到messageList目录,右键如图:

     点击上传并部署:云端安装依赖(不上传node_modules)

    得到如图的提示:

     安装完点击完成就能使用当前云函数了,使用方法即:

    getUserList () {
          const that = this
          wx.cloud.callFunction({
            name: 'userList',
            data: {}
          }).then(res => {
            that.userList = res.result.data.reverse()
          })
    }

    数组之所以要倒序是因为希望新祝福的的用户在最前面显示 

    • 接着是用户送上祝福的时候存储用户

    这里我们用到了云函数获取用户信息,

    当小程序端调用云函数时,云函数的传入参数中会被注入小程序端用户的 openid,开发者无需校验 openid 的正确性,因为微信已经完成了这部分鉴权,开发者可以直接使用该 openid

    下面是云函数user的index.js文件:

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init()
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      const wxContext = cloud.getWXContext()
    
      return {
        event,
        openid: wxContext.OPENID,
        appid: wxContext.APPID,
        unionid: wxContext.UNIONID
      }
    }
    

    主要是为了获取当前操作用户的openid,获取当前用户的openid方法:

    getOpenId () {
          const that = this
          wx.cloud.callFunction({
            name: 'user',
            data: {}
          }).then(res => {
            that.openId = res.result.openid
            that.getIsExist()
          })
    }

    接着判断当前用户是否已经存在于数据库中,即getIsExist()方法:

    getIsExist () {
          const that = this
          const db = wx.cloud.database()
          const user = db.collection('user')
          user.where({
            _openid: that.openId
          }).get().then(res => {
            if (res.data.length === 0) {
              that.addUser()
            } else {
              tools.showToast('您已经送过祝福了~')
            }
          })
    }

    如果得到的数组长度为零则添加改用户到数据库,否则则提醒当前用户已经送过祝福

    接下来介绍存储用户信息的方法,即addUser():

    addUser () {
          const that = this
          const db = wx.cloud.database()
          const user = db.collection('user')
          user.add({
            data: {
              user: that.userInfo
            }
          }).then(res => {
            that.getUserList()
          })
    }

    存入到数据库的信息是这样的:

    总结 

    大概的功能就是这么多,希望可以帮助到大家,觉得写得不错的记得给作者点个赞,你们的支持是我不断更新的最大动力!

    源码地址

    小程序源码在此

    体验二维码

    后续优化

    优化后地址

    展开全文
  • 微信小程序婚礼邀请小程序。适用与新手练习使用,包含了邀请函,照片墙,视频墙,婚礼地点,个人信息登记等。对于喜欢小程序开发的有一定的帮助和参考意义。
  • 微信端+服务端代码,下载即可跑起来,目前已有458人使用。详情见文件readme
  • 婚礼邀请小程序.rar

    2021-05-12 15:27:10
    微信小程序-婚礼邀请小程序
  • 壹度婚礼邀请函小程序:【婚礼展示】+【酒店定位】+【点赞祝福】+【评论留言】+【出席申请】+【请贴海报】+【付费申请】+【模板市场(开发中)】 小程序演示: 功能展示: 转载于:...
  • 婚礼邀请函小程序由5个页面组成,分别是邀请函页面、照片页面、美好时光页面、婚礼地点页面、宾客信息页面。效果图如下: 下面针对5个页面的功能作简要介绍: 邀请函页面:新郎和新娘的电话、婚礼地点、婚礼时间。...
  • 婚礼邀请函功能开发 效果图 二 "邀请函"页面说明 右上角有一个背景音乐播放按钮,用于控制音乐播放状态,单击按钮播放音乐,再次点击按钮暂停音乐 页面中,显示新娘和新郎的头像、姓名、以及婚礼时间和地点 三 ...
  • 微信小程序 - 婚礼邀请函

    万次阅读 2018-07-30 15:33:55
    marry 微信小程序端 +服务端 扫码体验 免费制作流程点我查看 主页面展示 项目说明 服务端架构:SpringMvc 服务器:阿里云服务 域名:pengmaster.com 数据库:在服务器上装的mysql 地址:47.104.198....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 733
精华内容 293
关键字:

婚礼邀请函小程序