feat(WechatSmallProject): 新增 微信小程序 课程(包含实验1-4)

This commit is contained in:
2026-05-05 14:38:52 +08:00
parent 69db4c1c07
commit f1679c1767
177 changed files with 1977 additions and 10 deletions

View File

@@ -0,0 +1,66 @@
// pages/demo2/demo2.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

View File

@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "邀请函",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}

View File

@@ -0,0 +1,28 @@
<view class="demo2-container">
<image src="/images/demo2/bg_1.png" class="bg" />
<image src="/images/demo2/save_the_date.gif" class="content-gif" />
<view class="content-title">邀请函</view>
<view class="content-avatar">
<image src="/images/demo2/avatar.png" />
</view>
<view class="content-info">
<view class="content-name">
<image src="/images/demo2/tel.png" />
<view>王辉辉</view>
<view>新郎</view>
</view>
<view class="content-wedding">
<image src="/images/demo2/wedding.png" />
</view>
<view class="content-name">
<image src="/images/demo2/tel.png" />
<view>张琳琳</view>
<view>新娘</view>
</view>
</view>
<view class="content-address">
<view>我们诚邀请您来参加我们的婚礼</view>
<view>时间2022年1月28日</view>
<view>地点:北京市海淀区 XX路 XX酒店</view>
</view>
</view>

View File

@@ -0,0 +1,92 @@
page {
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.demo2-container {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.content-gif {
width: 19vh;
height: 18.6vh;
}
.content-title {
font-size: 5vh;
color: #ff4c91;
text-align: center;
margin-bottom: 2.5vh;
}
.content-avatar image {
width: 24vh;
height: 24vh;
border: 2px 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;
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;
}

View File

@@ -0,0 +1,66 @@
// pages/demo2/guest/guest.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

View File

@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "宾客信息",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}

View File

@@ -0,0 +1,28 @@
<!--pages/demo2/guest/guest.wxml-->
<image src="/images/demo2/bj_2.png" class="bg" />
<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 value="man">男</radio>
<radio value="woman">女</radio>
</radio-group>
</view>
<view class="check">
<text>请选择您需要的点心:</text>
<checkbox-group>
<checkbox value="">蛋糕</checkbox>
<checkbox value="">甜甜圈</checkbox>
<checkbox value="">巧克力</checkbox>
</checkbox-group>
</view>
<button>提交</button>
</view>
</form>

View File

@@ -0,0 +1,56 @@
.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;
}

View File

@@ -0,0 +1,66 @@
// pages/demo2/picture/picture.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

View File

@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "图片",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}

View File

@@ -0,0 +1,15 @@
<!--pages/demo2/picture/picture.wxml-->
<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots="aotuplay" interval="3500" duration="1000" circular vertical>
<swiper-item>
<image src="/images/demo2/timg1.jpg" />
</swiper-item>
<swiper-item>
<image src="/images/demo2/timg2.jpg" />
</swiper-item>
<swiper-item>
<image src="/images/demo2/timg3.jpg" />
</swiper-item>
<swiper-item>
<image src="/images/demo2/timg4.jpg" />
</swiper-item>
</swiper>

View File

@@ -0,0 +1,9 @@
/* pages/demo2/picture/picture.wxss */
swiper {
height: 100vh;
}
image {
width: 100vw;
height: 100vh;
}

View File

@@ -0,0 +1,66 @@
// pages/demo2/video/video.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

View File

@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "美好时光",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}

View File

@@ -0,0 +1,16 @@
<!--pages/demo2/video/video.wxml-->
<view class="video">
<view class="video-title">标题:海边随拍</view>
<view class="videro-time">拍摄日期2022-01-01</view>
<video src="http://localhost:3000/01.mp4" object-fit="fill"></video>
</view>
<view class="video">
<view class="video-title">标题:勿忘初心</view>
<view class="videro-time">拍摄日期2022-01-10</view>
<video src="http://localhost:3000/02.mp4" object-fit="fill"></video>
</view>
<view class="video">
<view class="video-title">标题:十年之约</view>
<view class="videro-time">拍摄日期2022-01-20</view>
<video src="http://localhost:3000/03.mp4" object-fit="fill"></video>
</view>

View File

@@ -0,0 +1,19 @@
/* pages/demo2/video/video.wxss */
.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: #fffF;
}
.video-title {
font-size: 35rpx;
color: #333;
}
.video video {
width: 100%;
margin-top: 20rpx;
}