【微信小程序开发（从零到一）【婚礼邀请函】制作】——邀请函界面的制作（2）

news2025/1/24 14:43:02

在这里插入图片描述

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

微信小程序开发【婚礼邀请函】——运行视频

文章目录

    • ⭐🅰⭐
    • ⭐前言⭐
    • 🎶邀请函界面
      • （1）背景音乐播放
      • （2）页面结构和样式
        • 结束语🥇

⭐前言⭐

  打开婚礼邀请函小程序后，首页进入到邀请函页面，在页面的右上角有一个背景音乐播放器按钮，用于控制音乐播放器状态，点击按钮播放音乐，再次点击停止音乐。在邀请函页面，显示新娘和新郎的头像，姓名，以及婚礼时间和地点，让宾客可以马上了解相关信息。

在这里插入图片描述

🎶邀请函界面

（1）背景音乐播放

  在pages/index/index.wxml文件中编写播放器结构，具体代码如下：

<!--index.wxml-->
<view class="player player-{{isPlayingMusic ? 'play':'pause'}}" bindtap="play">
<image src="/images/images/music_icon.png"/>
<image src="/images/images/music_play.png"/>
</view>

  上述代码中，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(0deeg);}
  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.js文件中通过样式来控制播放器的播放器的播放和暂停效果。其中播放状态的class为.player-play，暂停状态.class为.playpause，具体代码如下：

}
/* 播放器的播放和暂停效果 */
.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 musicStart{
from{transform: rotate(0deg);}
to{transform: rotate(20deg);}
}
@keyframes musicStop{
from{transform: rotate(20deg);}
to{transform: rotate(0deg);}
}

  完成播放器样式代码后，下面就开始实现音乐播放功能。在微信小程序中，还有一种专门的播放背景音频的wx.getBackgroundAudioManager()接口，其中特点在于小程序切入后台时，如果音频处于播放状态，可以继续播放。为实现这个效果，需要现在app.js中添加一下配置，添加后在开发版中直接生效，正版还需通过审核。

“requireBackgroundModes”:{
"audio"
}

  然后在pages/index/index.js文件中编写背景音频播放的代码，具体代码如下：

   isPlayingMusic:false,
    bgm:null,
    music_url:"https://nf-sycdn.kuwo.cn/523a03e11876357f6d600598a2609ee2/6640cb27/resource/n2/32/26/1627466358.mp3?from=vip",
    music_coverImgUrl:"image/banner.jpg",
    onReady:function(){
        // 创建getBackgroundAudioManager 实例对象(接口播放音频)
        this.bgm=wx.getBackgroundAudioManager()
        // 音频标题
        this.bgm.title = "marry me"
        // 专辑封面
        this.bgm.epname = "wedding"
        // 歌手名
        this.bgm.singer = "singer"
        // 专辑封面
        this.bgm.coverImgUrl = this.music_coverImgUrl
        this.bgmoncanplay(()=>{
            this.bgm.pause()
        })
        // 指定音频的数据源
        this.bgm.src = this.music_url
    }
  },

  上述代码中，先创建BackgroundAudioManager实例对象，之后分别分别指定音乐的标题、专辑名称、艺术家、专辑封面。还设置了自动播放于暂停操作。
  继续在pages/index/index.js文件中编写播放器的点击事件，具体的代码如下：

   // 播放器的单击事件
  play:function(e){
    // 执行暂停或播放操作,如果值为true则暂停，值为 false则播放
    if(this.data.isPlayingMusic){
      this.bgm.pause()
    }else{
      this.bgm.play()
    }
    this.setData({
        //将data中的isPlayingMusic赋值给它
      isPlayingMusic: !this.data.isPlayingMusic
    })
  },

  上述代码实现了根据.isPlayingMusic的值来执行暂停和播放操作，如果值为true则暂停，如果值为false则播放。
保存上述代码后，测试播放器播放和暂停功能是否已经实现。

（2）页面结构和样式

  在pages/index/index.wxml文件中的播放器下面进行编写代码，实现背景图片和内容区域的基本结构，具体内容如下：

<!-- 背景图 -->
<image class="bg" src="/images/images/bg_1.png"></image>
<!-- 内容区域 -->
<view class="content">
<!-- 顶部的gif图片 -->
<image class="content-gif" src="/images/images/save_the_date.gif"></image>

<!-- 标题 -->
<view class="content-titile">邀请函</view>
<!-- 合照 -->
<view class="content-avatar">
<image src="/images/images/avatar.png"></image>
</view>
<!-- 名字 -->
<view class="content-info">
<view class="content-name"bindtap="callGroom">
<image src="/images/images/tel.png"></image>
<view>乔治</view>
<view>新郎</view>
</view>
<view class="content-wedding">
<image src="/images/images/wedding.png"></image>
</view>
<view class="content-name" bindtap="callBride">
<image src="/images/images/tel.png"></image>
<view>佩奇</view>
<view>新娘</view>
</view>
</view>
<view class="content-address"> 
<view>我们诚挚的邀请您来参加我们的婚礼</view>
<view>时间：2024年5月8日</view>
<view>地点：湖南常德</view>
</view>
</view>

  在上述代码中，使用image组件来引入本地文件，不能在.wxss文件中通过background引入本地图片。由于小程序的体积有限，在实际开发中，推荐用URL的方式引入一些比较占空间的图片等资源。
接下来在pages/index/indexwxss文件中编写样式。其中，背景图片需要铺满整个页面，页面内各元素的高度不应超过页面的高度。为此，推荐使用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;
}
.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: 3rpx solid #ff4c91;
  border-radius: 50%;
}

/* 新郎新郎电话区 */
.content-info{
  width:45vh;
  text-align: center;
  margin-top: 4vh;
  display: flex;
  align-items: center;
}
.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;
}
.content-name>image{
  width: 2.6vh;
  height: 2.6vh;
  border: 1px solid #ff4c91;
  border-radius: 50%;
  position: absolute;
  top:-1vh;
  right:-3.6vh;
}
.content-address{
  margin-top: 5vh;
  color: #ec5f89;
  font-size: 2.5vh;
  font-weight: bold;
  text-align: center;
  line-height: 4.5vh;
}
.content-address view:first-child{
  font-size: 3vh;
  padding-bottom: 2vh;
}

  完成页面和样式后，在pages/index/index.js文件中编写用到的callGroom和callBride事件处理函数，实现一键拨号功能，具体代码如下：

Page({
  data: {
 
 
  //实现拨打电话功能
  callGroom:function(){
    wx.makePhoneCall({
      phoneNumber: '15138726924',
    })
  },
  callBride:function(){
    wx.makePhoneCall({
      phoneNumber: '18236347304',
    })
  },

})

  上述代码通过调用wx.makePhoneCall()接口实现呼叫功能，当呼叫按钮按下后，后看到拨打电话的提示信息。

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1681214.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

开发属于自己的Spring Boot Starter-18

开发属于自己的Spring Boot Starter-18

为什么要开发专用的Spring Boot Starter Spring在通常使用时&#xff0c;一般是通过pom.xml文件中引入相关的jar包&#xff0c;然后再通过application.yml文件配置初始化bean的配置&#xff0c;但随着项目越来越复杂或是项目组中的应用数量越来越多&#xff0c;可能会带来几个…
阅读更多...
为什么买的蓝牙串口模块不能实现蓝牙键盘给手机文本框或记事本打字或控制手机？

为什么买的蓝牙串口模块不能实现蓝牙键盘给手机文本框或记事本打字或控制手机？

系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 文章目录 前言1、原因2、蓝牙键盘制作流程 前言 送给大学毕业后找不到奋斗方向的你&#xff08;每周不定时更新&#xff09; 【…
阅读更多...
线程池的一些问题

线程池的一些问题

核心线程数1.最大线程5.队列5.存活时间10s 1.场景一 如果核心线程数.被一直占用得不到释放.新进来1个任务.会怎么样?答: 会在队列中中死等. 只要进来的任务.不超过队列的长度,就会一直挡在队列中死等 package com.lin;import java.util.concurrent.Executors; import java.u…
阅读更多...
4.线性代数

4.线性代数

深度学习作为一门前沿的、应用广泛的学科&#xff0c;对于数学基础的要求非常高。 线性代数 线性代数在深度学习中扮演着至关重要的角色。它不仅是描述和理解数据的基础工具&#xff0c;也是构建和训练神经网络的核心组件。例如&#xff0c;在深度学习中&#xff0c;我们经常…
阅读更多...
ArcGI基本技巧-科研常用OLS, GWR, GTWR模型实现

ArcGI基本技巧-科研常用OLS, GWR, GTWR模型实现

ArcGI基本技巧-科研常用OLS, GWR, GTWR模型实现 OLS,GWR,GTWR回归模型均可以揭示解释变量对被解释变量的影响且可以进行预测。Ordinary Least Squares (OLS)是最小二乘法&#xff0c;Geographically Weighted Regression (GWR)是地理加权回归&#xff0c;Geographically and T…
阅读更多...
Redis-Redis事务

Redis-Redis事务

Redis事务 Redis事务简介 Redis事务是一组命令的集合&#xff0c;一个事务中的所有命令都将被序列化&#xff0c;按照一次性、顺序性、排他 性的执行队列系列的命令。Redis单条命令保证原子性&#xff0c;但是事务不保证原子性&#xff0c;且没有回滚。事务中任意命令执行失败…
阅读更多...
大模型对数据库运维的赋能：智能运维的新时代

大模型对数据库运维的赋能：智能运维的新时代

引言随着人工智能技术的飞速发展&#xff0c;大模型作为AI领域的前沿技术&#xff0c;已经开始在数据库运维(DBA)领域展现出其独特的价值。大模型的引入&#xff0c;不仅提升了数据库运维的效率&#xff0c;还极大地改善了运维的质量和智能化水平。本文将深入分析大模型在数据库…
阅读更多...
train_gpt2_fp32.cu - main

train_gpt2_fp32.cu - main

llm.c/test_gpt2_fp32.cu at master karpathy/llm.c (github.com) 源码 // ---------------------------------------------------------------------------- // main training loop int main(int argc, char *argv[]) {// read in the (optional) command line argumentsco…
阅读更多...
【数据结构】排序(直接插入排序,希尔排序)

【数据结构】排序(直接插入排序,希尔排序)

目录 一、排序的概念 二、常见的排序算法 三、插入排序 1.直接插入排序 1.直接插入排序实现 2.直接插入排序特性及复杂度 2.希尔排序 1.排序思路 2.希尔排序实现 3.希尔排序的特性及复杂度 一、排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#x…
阅读更多...
HTML静态网页成品作业(HTML+CSS)——我的家乡江永网页设计制作(1个页面)

HTML静态网页成品作业(HTML+CSS)——我的家乡江永网页设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…
阅读更多...
适用于 Mac 的 10 种最佳数据恢复工具优点、缺点

适用于 Mac 的 10 种最佳数据恢复工具优点、缺点

数据丢失很常见&#xff0c;并且可能由于许多不同的原因而发生。这种情况在我和我们团队的其他成员身上发生过很多次&#xff0c;即使我们格外小心我们的个人存储设备。 幸运的是&#xff0c;数据恢复软件在大多数情况下都可以工作。但是&#xff0c;由于数据丢失场景彼此之间…
阅读更多...
在UBuntu上安装QT环境

在UBuntu上安装QT环境

一、UBuntu环境 二、官网下载QT https://download.qt.io/archive/qt/ 安装所需选择版本下载&#xff0c;可以现在windows下载在复制进去 三、安装QT 1、复制到ubuntu 2、打开终端&#xff0c;改变刚下载文件的权限 权限代号 r&#xff1a;读取权限&#xff0c;数字代号为 “…
阅读更多...
【Pytorch】9.torch.nn.MaxPool2d

【Pytorch】9.torch.nn.MaxPool2d

什么是MaxPool2d 是对二维矩阵进行池化层下采样的方法 MaxPool2d的用法 相较于卷积层&#xff0c;多出来的参数为ceil_mode 这个参数代表&#xff0c;如果所剩的部分不够卷积核的大小&#xff0c;要不要进行池化操作 具体代码为 import torch import torchvision from torch …
阅读更多...
深度学习之卷积神经网络理论基础

深度学习之卷积神经网络理论基础

深度学习之卷积神经网络理论基础 卷积层的操作&#xff08;Convolutional layer&#xff09; 在提出卷积层的概念之前首先引入图像识别的特点 图像识别的特点 特征具有局部性&#xff1a;老虎重要特征“王字”仅出现在头部区域特征可能出现在任何位置下采样图像&#xff0c…
阅读更多...
laravel 解决composer install报错

laravel 解决composer install报错

laravel 解决报错: Please provide a valid cache path 这是因为laravel的缓存路径没有找到 laravel缓存文件路径是在 config/cache.php中设置&#xff0c;默认存在storage文件夹中 file > [driver > file,path > storage_path(framework/cache/data),], 解决&#x…
阅读更多...
快解析Tplink端口映射如何设置

快解析Tplink端口映射如何设置

Tplink作为国内知名路由器品牌&#xff0c;有着广泛的用户群体。使用快解析端口映射是实现内网服务器被外网访问必须要做的设置&#xff0c;很多对网络不懂得小白不知道该到哪里去做&#xff0c;下面我就讲解一下tplink路由器如何做端口映射。 1&#xff1a;访问路由器 &#…
阅读更多...
HTML静态网页成品作业(HTML+CSS+JS)——在线购物商城网页设计制作(4个页面)

HTML静态网页成品作业(HTML+CSS+JS)——在线购物商城网页设计制作(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现图片轮播切换&#xff0c;共有4个页面。 二、…
阅读更多...
Elasticsearch的并发控制策略

Elasticsearch的并发控制策略

文章目录 利用external对版本号进行外部控制利用if_seq_no和if_primary_term作为唯一标识来避免版本冲突 ES中的文档是不可变更的。如果你更新一个文档,会将就文档标记为删除,同时增加一个全新的文档。同时文是的version字段加1内部版本控制 If_seq_no If_primary_term 使用外…
阅读更多...
SpringCloudAlibaba5.2sentinel配置流控

SpringCloudAlibaba5.2sentinel配置流控

概述 简介 监控应用流量的QPS或并发线程数&#xff0c;当达到指定的阈值时对流量进行控制 规则 1.资源名&#xff1a;请求路径 2.针对来源&#xff1a;配置该规则微服务&#xff0c;一般填写调用方的微服务名称&#xff0c;多个用","分割 3.阈值类型&#xff1a;二…
阅读更多...
Linux中的计划任务（crontab）详解

Linux中的计划任务（crontab）详解

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Linux &#xff1a;从菜鸟到飞鸟的逆袭》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、前言 1、Linux的起源与发展 2、什么是计划任务&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023