微信小程序页面制作——婚礼邀请函(含代码)

news2025/1/10 10:20:08

在这里插入图片描述

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。
🍎个人主页:Java Fans的博客
🍊个人信条:不迁怒,不贰过。小知识,大智慧。
💞当前专栏:微信小程序开发实战
✨特色专栏:国学周更-心性养成之路
🥭本文内容:微信小程序页面制作——婚礼邀请函(含代码)

在这里插入图片描述

文章目录

    • 一、案例分析
    • 二、知识储备
      • 1. 导航栏配置
      • 2. 标签栏配置
      • 3. vw、vh单位
      • 4. video组件
      • 5. 表单组件
    • 三、案例实现
      • 1. 准备工作
      • 2. 项目初始化
      • 3. 实现“邀请函”页面的结构
      • 4. 实现“邀请函”页面的样式
      • 5. 实现“照片”页面的结构
      • 6. 实现“照片”页面的样式
      • 7. 实现“美好时光”页面的结构
      • 8. 实现“美好时光”页面的样式
      • 9. 实现“宾客信息”页面的结构
      • 10. 实现“宾客信息”页面的样式
    • 资源下载

一、案例分析

  “婚礼邀请函”微信小程序由4个页面组成,分别是“邀请函”页面、“照片”页面、“美好时光”页面和“宾客信息”页面。

在这里插入图片描述

  每个页面顶部的导航栏和底部的标签栏是公共部分,在每个页面中都会出现;页面中间的部分是页面内容,每个页面的内容都不同。

“邀请函”页面各部分位置说明:

  “邀请函”页面用于展示顶部图片、标题、合照、新郎和新娘的姓名,以及婚礼信息。

在这里插入图片描述

“照片”页面各部分位置说明:

  “照片”页面用于展示新郎和新娘的婚纱照,该页面采用纵向轮播的方式进行展示。每一张轮播的图片都占满整个页面的图片区域,纵向滑动屏幕可以实现图片的纵向切换,并且右侧会显示指示点。在用户无操作时,图片会自动无缝轮播。

在这里插入图片描述

“美好时光”页面各部分位置说明:

  “美好时光”页面用于展示一对新人拍摄的一些视频,该页面显示了一个视频列表,列表中的每一项都包含标题、拍摄日期和视频。视频可以显示出进度条、视频时长,并支持全屏显示。

在这里插入图片描述

“宾客信息”页面各部分位置说明:

  “宾客信息”页面提供了一个表单,用于填写宾客的信息,包括姓名、手机号、性别和需要的点心。

在这里插入图片描述

二、知识储备

1. 导航栏配置

  在微信小程序中,有时为了页面美观,需要更改导航栏的样式。此时可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。

  导航栏的相关配置项如下表:

在这里插入图片描述

  在页面配置文件中对导航栏进行配置:以pages/index/index.json页面配置文件为例,通过navigationBarTitleText配置项设置导航栏标题为“微信小程序”。

{
  "navigationBarTitleText": "微信小程序"
}

  在全局配置文件中对导航栏进行配置:在全局配置文件app.json中,通过window配置项可以对全局默认窗口进行配置,配置后会对所有页面都会生效,且优先级低于页面级配置。例如,将导航栏的相关配置项写在app.json文件的window配置项中作为全局配置使用。

"navigationBarTitleText":  "微信小程序"

  默认导航栏标题文字与修改后的导航栏标题文字的对比如下图:

在这里插入图片描述

2. 标签栏配置

  通过标签栏可以很方便地在多个页面之间进行切换。在微信小程序的全局配置文件app.json中添加tabBar配置项即可实现标签栏配置。

  tabBar配置项的属性如下表:

在这里插入图片描述

  标签栏数量

  注意:微信小程序中的标签栏分为顶部标签栏和底部标签栏,标签数量一般在2~5个之间。

  演示tabBar配置项的属性使用

"tabBar": {
  "color": "#ccc",
  "selectedColor": "#ff4c91",
  "borderStyle": "black",
  "backgroundColor": "#fff",
  "list": [
  ]
},

  list数组中的每个元素都是一个代表标签按钮的对象,通过配置该对象的属性可以对标签栏中的每个标签按钮进行配置。list数组中最少需要配置2个标签按钮,最多只能配置5个标签按钮。

  标签按钮的相关属性如下表:

在这里插入图片描述

"list": [{
  "pagePath": "pages/index/index",
  "iconPath": "images/home.png",
  "selectedIconPath": "images/home-active.png",
  "text": "首页"
}, {
  "pagePath": "pages/list/list",
  "iconPath": "images/contact.png",
  "selectedIconPath": "images/contact-active.png",
  "text": "联系我们"
}]

  需要注意的是,pages/index/index和pages/list/list这两个页面都必须在pages数组中配置并提前创建好对应的文件。

  标签栏的效果如下图:

在这里插入图片描述

3. vw、vh单位

  在使用CSS编写移动端的页面样式时,由于不同手机的屏幕宽高不同,屏幕适配会比较麻烦。针对这类型问题,通过视口单位可以有效解决。

  视口表示可视区域的大小,视口单位主要包括vw(Viewport Width)和vh(Viewport Height),在CSS中很常用。

  在微信小程序中也可以使用vw和vh单位。使用视口单位时,系统会将视口的宽度和高度分为100份,1vw占用视口宽度的百分之一,1vh占用视口高度的百分之一。vw、vh是相对长度单位,永远以视口作为参考。例如,屏幕宽度为375px,那么1vw = 375px / 100 = 3.75px。

4. video组件

  微信小程序提供了video组件用来播放视频,video组件的默认宽度为300px,高度为225px,可通过WXSS代码设置宽高。

  video组件的常用属性如下表:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
  演示将视频在页面上循环播放

  video组件的src属性用于设置要播放视频的资源地址

<video src="http://localhost:3000/01.mp4" loop="true"></video>

  video组件的loop属性的属性值设置为true,表示循环播放视频

5. 表单组件

  微信小程序中的表单组件与HTML中的表单类似。微信小程序在HTML基础上做了封装,并且增加了一些组件。表单组件通常用于用户信息的填写,以便于把用户填写的信息提交给服务器。

  常用的表单组件如下表:

在这里插入图片描述

  • form组件

  form组件表示表单容器,没有任何样式,需要配合其他表单组件一起使用,用于提交用户输入的信息和选择的选项。

  form组件内部可以包含若干个供用户输入或选择的表单组件,允许提交的表单组件为switch、input、 checkbox、slider、radio和picker组件。表单中携带数据的组件(如输入框)必须带有name属性值,否则无法识别提交的内容。

  form组件的常用属性如下表:

在这里插入图片描述

  • button组件

  button组件表示按钮,功能比HTML中的button按钮丰富。

  button组件的常用属性如下表:

在这里插入图片描述
在这里插入图片描述

  演示button组件的使用

  利用button组件的type属性改变按钮的样式,type属性的可选值有3个,分别是primary(绿色)、default(白色)、warn(红色)。

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

  3种按钮如下图:

在这里插入图片描述
  第1个为普通按钮的样式类型,
  第2个为主色调按钮的样式类型,
  第3个为警告按钮样式类型。

  • input组件

  input组件与HTML中的标签作用类似,都用于接收用户的输入。在微信小程序中,input组件增加了很多属性,使input组件使用起来更加简单、方便。

  input组件的常用属性如下表:

在这里插入图片描述
在这里插入图片描述
  input组件的type属性的可选值如下表:

在这里插入图片描述

  演示input组件的使用

  设置type属性值为text,表示在微信客户端中运行的微信小程序出现文本输入键盘

<input type="text "/>
<input type="number" />

  设置type属性值为number,表示在微信客户端中运行的微信小程序出现数字输入键盘

在这里插入图片描述

  • checkbox和checkbox-group组件

  checkbox组件表示多选项目,在进行多项选择时会用到。checkbox组件一般与checkbox-group组件搭配使用,checkbox-group组件表示多项选择器,内部由多个checkbox组件组成。建议将不同组的checkbox组件嵌套在不同的checkbox-group组件中,从而方便管理和区分。

  checkbox组件的常用属性如下表:

在这里插入图片描述

  演示checkbox和checkbox-group组件的使用

<checkbox-group>
  <checkbox>蛋糕</checkbox>
  <checkbox>甜甜圈</checkbox>
  <checkbox>巧克力</checkbox>
</checkbox-group>

在这里插入图片描述

  • radio和radio-group组件

  radio组件为单选项目,是表单中常用的组件,用于在从多个选项中选出一个,选项之间是互斥关系。radio组件一般与radio-group组件搭配使用,radio-group组件表示单项选择器,内部由多个radio组件组成。建议将不同组的radio组件分别嵌套在不同的radio-group组件中,从而方便管理和区分。

  radio组件的常用属性如下表:

在这里插入图片描述

  • 演示radio和radio-group组件的使用

  通过radio和radio-group组件实现性别的单项选择。

<radio-group>
  <radio></radio>
  <radio></radio>
</radio-group>

在这里插入图片描述

三、案例实现

1. 准备工作

  • 创建项目:在微信开发者工具中创建一个新的微信小程序项目,项目名称为“婚礼邀请函”,模板选择“不使用模板”。

  • 创建页面:在app.json中配置4个页面,分别是pages/index/index、pages/guest/guest、pages/video/video和pages/picture/picture。

  • 复制素材:复制images文件夹到本项目中。

  • 目录结构:

在这里插入图片描述

  • 安装Node.js
  • 启动服务器

2. 项目初始化

项目初始化主要包含以下3个方面。

在这里插入图片描述
标签栏配置的实现步骤

在app.json文件中添加tabBar配置项完成标签栏的配置,具体步骤如下:
1、编写标签栏样式的相关配置;
2、在list数组中完成对标签按钮的配置,为每个标签按钮配置页面路径、未选中时的图标路径、选中时的图标路径,以及按钮文字。

各个导航栏标题的配置

为“邀请函”页面、“照片”页面、“美好时光”页面和“宾客信息”页面设置导航栏标题,分别设置为“邀请函”“照片”“美好时光”和“宾客信息”。在每一个页面打开的过程中,导航栏的标题也会随之变化。

全局样式文件中导航栏样式的配置

在app.json文件中编写导航栏样式的配置。

{
  "pages": [
    "pages/index/index",
    "pages/guest/guest",
    "pages/video/video",
    "pages/picture/picture"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff4c91",
    "navigationBarTextStyle": "white"
  },  
  "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/guest/guest",
      "iconPath": "images/guest.png",
      "selectedIconPath": "images/guest.png",
      "text": "宾客信息"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

公共样式的编写

在app.wxss文件中定义公共样式。

/**app.wxss**/
/* 定义公共样式 */
page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

3. 实现“邀请函”页面的结构

实现步骤:

  • 实现“邀请函”页面的背景图片;
  • 编写内容区域的整体结构;
  • 编写新郎和新娘的姓名区域的结构;
  • 编写婚礼信息区域的结构。
<!--index.wxml-->
<!-- “邀请函”页面的背景图片 -->
<image class="bg" src="/images/bg_1.png"></image>
<!-- 内容区域的整体结构 -->
<view class="content">
  <!-- 顶部图片 -->
  <image class="content-gif" src="/images/save_the_date.gif"></image>
  <!-- 标题 -->
  <view class="content-title">邀请函</view>
  <!-- 合照 -->
  <view class="content-avatar">
    <image src="/images/avatar.png"></image>
  </view>
  <!-- 新郎和新娘的名字 -->
  <view class="content-info">
    <view class="content-name">
      <image src="/images/tel.png"></image>
      <view>王辉辉</view>
      <view>新郎</view>
    </view>
    <view class="content-wedding">
      <image src="/images/wedding.png"></image>
    </view>
    <view class="content-name">
      <image src="/images/tel.png"></image>
      <view>张琳琳</view>
      <view>新娘</view>
    </view>
  </view>
  <!-- 婚礼信息 -->
  <view class="content-address">
    <view>我们诚邀您来参加我们的婚礼</view>
    <view>时间:2022128</view>
    <view>地点:北京市海淀区XXXX酒店</view>
  </view>
</view>

4. 实现“邀请函”页面的样式

实现步骤:

  • 编写背景图片的样式;
  • 编写内容区域中外层容器的样式;
  • 编写顶部图片区域的样式;
  • 编写标题区域的样式;
  • 编写合照区域的样式;
  • 编写新郎和新娘的姓名区域的样式;
  • 编写新郎和新娘姓名区域中姓名的样式;
  • 编写新郎和新娘姓名区域中电话图片的样式;
  • 编写新郎和新娘姓名区域中“喜”字图片的样式;
  • 编写婚礼信息区域的样式。
/**index.wxss**/
/* 背景图片的样式 */
.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: 3px solid #ff4c91;
  border-radius: 50%;
}
/* 新郎和新娘的名字区域的样式 */
.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;
}
/* 婚礼信息区域的样式 */
.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;
}

5. 实现“照片”页面的结构

该页面采用纵向轮播的方式展示图片,并且在用户无操作时,可以实现自动无缝衔接滑动。

<!--pages/picture/picture.wxml-->
<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular>
  <swiper-item>
    <image src="/images/timg1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg3.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg4.jpg"></image>
  </swiper-item>
</swiper>

6. 实现“照片”页面的样式

在pages/picture/picture.wxss文件中编写“照片”页面样式,使页面更加美观。

/* pages/picture/picture.wxss */
swiper {
  height: 100vh;
}
image {
  width: 100vw;
  height: 100vh;
}

7. 实现“美好时光”页面的结构

在pages/video/video.wxml文件中编写“美好时光”页面的结构。

<!--pages/video/video.wxml-->
<view class="video">
  <view class="video-title">标题:海边随拍</view>
  <view class="video-time">拍摄日期:00:15:00</view>
  <video src="http://localhost:3000/01.mp4" objectFit="fill"></video>
</view>
<view class="video">
  <view class="video-title">标题:勿忘初心</view>
  <view class="video-time">拍摄日期:00:15:00</view>
  <video src="http://localhost:3000/02.mp4" objectFit="fill"></video>
</view>
<view class="video">
  <view class="video-title">标题:十年之约</view>
  <view class="video-time">拍摄日期:00:15:00</view>
  <video src="http://localhost:3000/03.mp4" objectFit="fill"></video>
</view>

8. 实现“美好时光”页面的样式

实现步骤:

  • 编写“美好时光”页面中的3个外层view组件的样式;
  • 编写标题和拍摄日期区域的样式;
  • 编写视频区域的样式。
/* pages/video/video.wxss */
/* “美好时光”页面中的3个外层view组件的样式 */
.video {
  box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);
  margin: 10rpx 25rpx;
  margin-bottom: 30rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background: #fff;
}
/* 标题和拍摄日期区域的样式 */
.video-title {
  font-size: 35rpx;
  color: #333;
}
.video-time {
  font-size: 26rpx;
  color: #979797;
}
/* 视频区域的样式 */
.video video {
  width: 100%;
  margin-top: 20rpx;
}

9. 实现“宾客信息”页面的结构

实现步骤:

  • 实现“宾客信息”页面的背景图片;
  • 编写内容区域的整体页面结构;
  • 编写姓名区域的结构;
  • 编写手机号码区域的结构;
  • 编写性别区域的结构;
  • 编写需要的点心区域的结构。
<!--pages/guest/guest.wxml-->
<!-- 页面的背景图片 -->
<image class="bg" src="/images/bj_2.png"></image>
<form>
  <view class="content">
    <!-- 姓名 -->
    <view class="input">
      <input name="name" placeholder-class="phcolor" placeholder="输入您的姓名" />
    </view>
    <!-- 手机号码 -->
    <view class="input">
      <input name="phone" placeholder-class="phcolor" placeholder="输入您的手机号码" />
    </view>
    <!-- 性别 -->
    <view class="radio">
      <text>请选择您的性别:</text>
      <radio-group>
        <radio></radio>
        <radio></radio>
      </radio-group>
    </view>
    <!-- 需要的点心 -->
    <view class="check">
      <text>请选择您需要的点心:</text>
      <checkbox-group>
        <checkbox>蛋糕</checkbox>
        <checkbox>甜甜圈</checkbox>
        <checkbox>巧克力</checkbox>
      </checkbox-group>
    </view>
    <button>提交</button>
  </view>
</form>

10. 实现“宾客信息”页面的样式

实现步骤:

  • 编写背景图片的样式;
  • 编写内容区域中外层容器的样式;
  • 编写姓名和手机号码区域的样式;
  • 编写性别区域的样式;
  • 编写需要的点心区域的样式;
  • 编写“提交” 按钮的样式。
/* pages/guest/guest.wxss */
/* 背景图片的样式 */
.bg {
  width: 100vw;
  height: 100vh;
}
/* 内容区域外层容器的样式 */
.content {
  width: 80vw;
  position: fixed;
  left: 10vw;
  bottom: 8vh;
}
/* 编写输入框的样式 */
.content .input {
  font-size: large;
  border: 1rpx solid #ff4c91;
  border-radius: 10rpx;
  padding: 1.5vh 40rpx;
  margin-bottom: 1.5vh;
  color: #ff4c91;
}
/* 手机号码区域的样式 */
.content .radio {
  font-size: large;
  margin-bottom: 1.5vh;
  color: #ff4c91;
  display: flex;
}
/* 需要的点心区域的样式 */
.content .check {
  font-size: large;
  margin-bottom: 1.5vh;
  color: #ff4c91;
}
.check checkbox-group {
  margin-top: 1.5vh;
  color: #ff4c91;
}
.check checkbox-group checkbox {
  margin-left: 20rpx;
}
.check checkbox-group checkbox:nth-child(1) {
  margin-left: 0;
}
/* 提交按钮的样式 */
.content button {
  font-size: large;
  background: #ff4c91;
  color: #fff;
}
.content .phcolor {
  color: #ff4c91;
}

资源下载

案例下载链接:婚礼邀请函


  码文不易,本篇文章就介绍到这里,如果想要学习更多Java系列知识点击关注博主,博主带你零基础学习Java知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:《国学周更—心性养成之路》,学习技术的同时,我们也注重了心性的养成。

在这里插入图片描述

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

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

相关文章

windows下ardusub仿真

接上篇&#xff1a;windows编译ardupilot源码教程 执行以下命令。 #在ardusub根目录下执行下面命令 cd ./Tools/autotest./waf configure --debugpython sim_vehicle.py -v ArduCopter -f quad --console --map -D -L RATBeach 编译时间较长&#xff0c;之后会打开三个窗口。 …

SpringBoot 整合酷狗获取下载音乐(需要自己账户)

程序员必备宝典https://tmxkj.top/#/ 在此声明,本内容仅供个人学习、研究或娱乐之用,严禁任何形式的商业用途。若您发现本内容被用于商业目的,请立即与我们联系,我们将删除原代码。 我们尊重并保护所有原创作品的知识产权。 为了营造一个健康、积极的网络环境,我们鼓励用户…

故障诊断迁移学习项目DDC(保姆教程)

本项目从零开始搭建深度领域混淆&#xff08;Deep Domain Confusion&#xff0c;DDC&#xff09;算法。项目包括加载CWRU轴承原始信号&#xff0c;信号处理、数据集制作&#xff0c;模型搭建&#xff0c;DDC域混淆算法设计、特征可视化&#xff0c;混淆矩阵等流程来帮助读者学习…

Qt_了解Qt Creator

目录 1、使用Qt Creator新建项目 1.1 新建项目 1.2 选择项目模板 1.3 选择项目路径 1.4 选择构建系统 1.5 填写类信息 1.6 选择语言翻译文件 1.7 选择编译器 1.8 选择版本控件系统 1.9 最终效果 2、代码解析 2.1 main.cpp 2.2 widget.h 2.3 widget.cpp …

[SDK] -模态对话框 和 非模态对话框

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天给大家讲解对话框的相关知识点&#xff0c;就此SDK学习告一段落&#xff0c;之后会更新相关项目内容 创建对话框 项目->添加 ->资源->Dialog->修改对话框ID->拖拉尺寸设置对话框大小 通过菜单绑定…

多通道电源测试设备怎么测试多路电源?

为了提升多路电源模块的测试效率和精度&#xff0c;NSAT-8000多通道ATE自动化测试设备持续迭代创新&#xff0c;旨在精准检测电源每个通道的性能指标&#xff0c;判断电源质量是否合格。 一、测试系统结构 二、测试设备 常用的测试电源的仪器主要有示波器、数字万用表、电子负载…

Android app广告变现广告预算来源有哪些?

APP开发者想要通过广告变现实现收益的最大化&#xff0c;首先要了解广告预算来源有哪些&#xff1f; 1、Push 推送广告 通过推送消息到用户设备通知栏上展示广告。 2、第三方 SDK 广告 很多应用都会集成第三方广告平台&#xff0c;比如 AdMob、Facebook Audience Network、…

ESP32-S3百度文心一言大模型AI语音聊天助手(支持自定义唤醒词训练)【手把手非常详细】【万字教程】

简介 此项目主要使用ESP32-S3实现一个AI语音聊天助手&#xff0c;可以通过该项目熟悉ESP32-S3 arduino的开发&#xff0c;百度语音识别&#xff0c;语音合成API调用&#xff0c;百度文心一言大模型API的调用方法&#xff0c;音频的录制及播放&#xff0c;SD卡的读写&#xff0c…

SAP自建表log功能开启

1、SE11下进入“技术设置”&#xff0c;勾选“日志更改” 2、RZ10修改系统参数 rec/clientALL, 或rec/client000&#xff08;客户端号&#xff0c;多个客户端使用“&#xff0c;”分割。激活参数文件 没有这个参数的话新增一个 修改了SAP系统参数文件DEFAULT.PFL需要重启SAP…

【ESP-IDF FreeRTOS】软件定时器

除了ESP-IDF中的软硬件定时器&#xff0c;我们还可以使用FreeRTOS中的软件定时器&#xff0c;它是基于Tick的定时器。不过我一般不用&#xff0c;因为有ESP-IDF的定时器了嘛&#xff0c;但还是介绍一下。 首先包含头文件。 #include "freertos/timers.h" 接着我们…

N2011A叉车限速器如何实现超速报警且强制限速的

叉车安装限速器是对厂区叉车控制行驶速度常见的一种方式&#xff0c;但限速器真的能限速吗&#xff1f; 九盾N2011A叉车限速器是采取无线传感器的方式&#xff0c;相比传统的限速器&#xff0c;需要前桥打孔攻牙&#xff0c;稍有不慎就打断&#xff0c;安装麻烦耗工时&#xf…

2024年提升转化率的10个最佳弹窗软件解决方案

无论你是喜欢还是讨厌它们&#xff0c;弹窗通知并不一定都是坏的。当然&#xff0c;大多数网站访问者并不愿意被横幅打扰&#xff08;更糟糕的是那种自动播放音频的视频&#xff09;。不过&#xff0c;你有没有想过只在他们快要离开你的网站时才显示弹窗&#xff1f;使用退出意…

FP7127 / FP7128:LED舞台灯降压方案 RGB调光 智能调光模块

前言&#xff1a; 舞台灯作为一种应用于文化娱乐场所的灯具&#xff0c;用来营造环境、渲染氛围&#xff0c;在舞台上突出中心人物、塑造演员形象&#xff0c;在文化场馆&#xff0c;如博物馆等的场所&#xff0c;突出展品细节。根据灯光用途和适用类型&#xff0c;舞台灯可以…

【F的领地】项目拆解:百家号批量搬运掘金 | 搬运类项目核心思路分享

【F的领地】项目拆解&#xff1a;百家号批量搬运掘金 项目介绍 百家号批量搬运掘金是之前老百家号项目的一种新玩法&#xff0c;操作简单。 只需会操作电脑和手机即可&#xff0c;无脑搬运就行&#xff0c;玩法是批量搬运视频&#xff0c;用软件去重后在百家号发布。 然后是…

Miracast/WifiDisplay开发相关的深入调研分析-android投屏实战开发

Miracast/WifiDisplay概念介绍 Miracast Miracast是由Wi-Fi联盟于2012年所制定&#xff0c;以Wi-Fi直连&#xff08;Wi-Fi Direct&#xff09;为基础的无线显示标准。支持此标准的消费性电子产品&#xff08;又称3C设备&#xff09;可透过无线方式分享视频画面&#xff0c;例如…

Linux和C语言(Day09)

一、学习内容 指针 指针的概念 什么是内存 内存是计算必不可少的硬件设备&#xff0c;一般说到内存常会说TA多大——M、G、T 内存单位&#xff1a;bit【位&#xff0c;最小单位】 Byte【字节&#xff0c;基本单位】 KB MB GB TB CPU如何从内存取数据 通过内存地址去取 将内存…

全球主流单片机制造商

欧美地区 1、FreescaleNXP&#xff08;飞思卡尔恩智浦&#xff09;&#xff1a;荷兰&#xff0c;主要提供16位、32位MCU。应用范围&#xff1a;汽车电子、LED和普通照明、医疗保健、多媒体融合、家电和电动工具、楼宇自动化技术电机控制、电源和功率转换器、能源和智能电网、自…

数据资产入表(二)|数据要素资产化与数据资产入表路线框架,一文说清“入表”实现步骤

前言 小兵的数据资产入表系列文章第一篇为大家介绍了国内外关于“数据要素市场化”的探索现状以及推进“数据资产入表”的相关政策。想必大家读完第一篇后&#xff0c;已经认识到数据要素市场化是大势所趋&#xff0c;但是数据的特殊性使得其市场化之路比其他生产要素要更加复杂…

Vue3+Django5+REST Framework开发电脑管理系统

前端&#xff1a;Vue3TypeScript 后端&#xff1a;Django5REST Framework 功能介绍 用户管理角色管理菜单管理配件管理仓库管理类型管理电脑管理入库管理出库管理库存管理收发明细管理 界面预览 源码地址&#xff1a;managesystem: 电脑管理系统

亚信安全出席第五届国际反病毒大会 探究AI现代网络勒索治理

近日&#xff0c;第二届网络空间安全&#xff08;天津&#xff09;论坛正式开幕。本届论坛由天津市政府主办&#xff0c;国家计算机病毒应急处理中心、天津市公安局、天津市滨海新区政府承办&#xff0c;国家网络与信息安全信息通报中心协办&#xff0c;围绕“共建网络安全 共治…