本文主要是介绍超真诚婚礼邀请函小程序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
结婚了，自己写个婚礼邀请函小程序，含泪省下￥49.9；程序员的浪漫！
1、定位直达
2、背景音乐
3、倒计时
4、CSDN图床
页面代码如下：
<cu-custom bgColor="bg-yellow-light" isBack="{{false}}"><view slot="backText">返回</view><view slot="content"></view>
</cu-custom><image src="{{checked?'../../image/music_off.png':'../../image/music_on.png'}}" class="music {{!checked && 'circle'}}" catchtap="checkMusic"></image><view class="bg-yellow-light padding-sm"><view class="flex justify-between text-black"><view><text class="text-xxl-60 font-myFont">婚礼邀请函</text></view><view class="text-right"><text class="text-bold text-darkred">许</text><text class="cuIcon-likefill text-bold text-darkred">李</text><!-- <text class="text-bold">Invitation</text> --></view></view><view class="margin-top-xl"></view><view><view class="position_absolute bg-img radius" style="background-image: url('{{pageConfig.img_TOP_top}}');height: 520rpx;width: 420rpx;margin-left: 240rpx;margin-top: 80rpx;"></view><!-- 底部 --><view class="position_absolute bg-img radius" style="background-image: url('{{pageConfig.img_TOP_bottom}}');height: 420rpx;width: 320rpx;margin-left: 280rpx; "></view><!-- 双向奔赴 --><view class="position_absolute bg-img" style="background-image: url('{{pageConfig.img_TOP_left}}');height: 100rpx;width: 504rpx; margin-top: 280rpx; "></view><view class="flex-sub align-center text-center position_absolute" style="margin-top: 450rpx;"><text class="font-myFont text-sl text-bold">welcome to our wedding</text></view></view><!-- <view class="view_top cu-avatar round xxl bg-red-dark" style="margin-top: 680rpx;margin-left: 30rpx;"><text class="text-yellow text-xsl" style="font-family: STSong;">囍</text></view> --><view class="flex justify-between padding" style="margin-top: 800rpx; "><view class="flex flex-direction" style="margin-top: 100rpx; "><text class="text-red text-bold">嗨</text><text class="text-black" style="font-family: STSong;">{{pageConfig.top_txt}}</text></view><view class="flex flex-direction"><view class="bg-red-dark cu-avatar lg radius margin-xs flex-direction"><text class="text-white text-xl">{{left_time_list[0]}}</text><text class="text-white text-xs">天</text></view><view class="bg-red-dark cu-avatar lg radius margin-xs flex-direction"><text class="text-white text-xl">{{left_time_list[1]}}</text><text class="text-white text-xs">时</text></view><view class="bg-red-dark cu-avatar lg radius margin-xs flex-direction"><text class="text-white text-xl">{{left_time_list[2]}}</text><text class="text-white text-xs">分</text></view><view class="bg-red-dark cu-avatar lg radius margin-xs flex-direction"><text class="text-white text-xl">{{left_time_list[3]}}</text><text class="text-white text-xs">秒</text></view></view></view><view class="flex align-center"><view class="bg-red-dark" style="height: 4rpx;width: 280rpx; margin-top: 50rpx;margin-bottom: 50rpx;"></view><view class="margin-left text-darkred text-bold">关于我们</view></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-lg">六年前的喜欢你\n六年后的我愿意</text></view><image class="radius" src='{{pageConfig.img_20172023}}' mode='widthFix' style='width:100%;'></image><view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2017</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_2017}}' mode='widthFix' style='width:100%;'></image><view style='margin-top: 40rpx;'><text>{{pageConfig.txt_left_2017}}</text></view></view><view class="flex-sub" style="margin-left: 10rpx;"><view class="text-right"><text>{{pageConfig.txt_right_2017}}</text></view><image class="radius" src='{{pageConfig.img_right_2017}}' mode='widthFix' style='width:100%; margin-top: 70rpx;'></image></view></view></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2018</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_2018}}' mode='widthFix' style='width:100%;'></image></view><view class="flex-twice" style="margin-left: 10rpx;"><image class="radius" src='{{pageConfig.img_right_2018}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex flex-direction" style="margin-top: 10rpx; "><text>{{pageConfig.txt_2018}}</text></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2019</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_2019}}' mode='widthFix' style='width:100%;'></image></view><view class="flex-sub" style="margin-left: 10rpx;"><image class="radius" src='{{pageConfig.img_right_2019}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex flex-direction" style="margin-top: 10rpx; "><text>{{pageConfig.txt_2019}}</text></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2020</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_2020}}' mode='widthFix' style='width:100%;'></image><view style='margin-top: 40rpx;'><text>{{pageConfig.txt_left_2020}}</text></view></view><view class="flex-sub" style="margin-left: 10rpx;"><view class="text-right"><text>{{pageConfig.txt_right_2020}}</text></view><image class="radius" src='{{pageConfig.img_right_2020}}' mode='widthFix' style='width:100%; margin-top: 70rpx;'></image></view></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2021</text></view><view class="flex"><image class="radius" src='{{pageConfig.img_2021}}' mode='widthFix' style='width:100%;'></image></view><view class="flex flex-direction" style="margin-top: 10rpx; "><text>{{pageConfig.txt_2021}}</text></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2022</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_top_2022}}' mode='widthFix' style='width: 100%;'></image><image class="radius" src='{{pageConfig.img_left_bottom_2022}}' mode='widthFix' style='width:100%;'></image></view><view class="flex-twice" style="margin-left: 10rpx;"><image class="radius" src='{{pageConfig.img_right_2022}}' mode='widthFix' style='width:100%;'></image><view class="bg-red-dark" style="height: 8rpx;margin-left: 150rpx; "></view><view class="text-right"><text class="text-red-dark"></text></view></view></view><view class="flex flex-direction" style="margin-top: 10rpx; "><text>{{pageConfig.txt_2022}}</text></view><view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2023</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_top_2023}}' mode='widthFix' style='width:100%; '></image><image class="radius" src='{{pageConfig.img_left_bottom_2023}}' mode='widthFix' style='width:100%; '></image><view style='margin-top: 40rpx;'><text>{{pageConfig.txt_left_2023}}</text></view></view><view class="flex-sub" style="margin-left: 10rpx;margin-top: 80rpx;"><view class="text-right"><text>{{pageConfig.txt_right_2023}}</text></view><image class="radius" src='{{pageConfig.img_right_top_2023}}' mode='widthFix' style='width:100%;margin-top: 60rpx;'></image><image class="radius" src='{{pageConfig.img_right_bottom_2023}}' mode='widthFix' style='width:100%;'></image></view></view></view><view class="flex align-center"><view class="bg-red-dark" style="height: 4rpx;width: 280rpx; margin-top: 100rpx;margin-bottom: 100rpx;"></view><view class="margin-left text-darkred text-bold">关于婚礼</view></view><view class="flex justify-between padding"><view class="flex flex-direction"><text class="text-black">{{pageConfig.wedding_title}}</text></view></view><view class="flex" style="margin-top: 60rpx;"><view class="flex-sub" style="margin-top: 10rpx;"><image class="radius" src='{{pageConfig.wedding_1_img_left_top}}' mode='widthFix' style='width:90%;margin-left: 30rpx;'></image><image class="radius" src='{{pageConfig.wedding_1_img_left_bottom}}' mode='widthFix' style='width:90%;margin-left: 30rpx;'></image><view class="bg-red-dark" style="height: 8rpx;width: 100%;margin-right: 30rpx; "></view><view><text class="text-red-dark"></text></view></view><view class="flex-sub" style="margin-left: 10rpx;"><image class="radius" src='{{pageConfig.wedding_1_img_right}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex justify-between padding" style="margin-top: 20rpx;"><view class="flex flex-direction"><text class="text-black">{{pageConfig.wedding_1_txt}}</text></view></view><view class="flex" style="margin-top: 60rpx;"><view class="flex-sub" style="margin-top: 10rpx;"><image class="radius" src='{{pageConfig.wedding_2_img_left}}' mode='widthFix' style='width:100%;'></image></view><view class="flex-sub" style="margin-left: 10rpx;margin-top: 100rpx;"><image class="radius" src='{{pageConfig.wedding_2_img_right}}' mode='widthFix' style='width:100%;'></image><view class="flex flex-direction text-right" style="margin-top: 60rpx;"><text>{{pageConfig.wedding_2_txt_right}}</text></view></view><view class="bg-red-dark radius cu-avatar sm" style="position: absolute; right: 0;margin-right: 30rpx;margin-top: 30rpx;"></view></view><view class="flex justify-between padding" style="margin-top: 60rpx;"><view class="flex flex-direction"><text class="text-black">{{pageConfig.wedding_2_txt_left}}</text></view></view><view class="flex" style="margin-top: 80rpx;margin-bottom: 20rpx;"><view class="flex-sub"><view class="flex"><view class='flex basis-xxs ' style="align-items: flex-end;"><image src='{{pageConfig.wedding_3_img_FALLIN}}' mode='widthFix' style='width:100%;'></image></view><view class='basis-xxl' style="margin-left: 10rpx;"><!-- 沙滩1 --><image class="radius" src='{{pageConfig.wedding_3_img_left_top}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex"><image class="radius" src='{{pageConfig.wedding_3_img_left_bottom}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex-sub" style="margin-left: 10rpx;margin-top: 60rpx;"><image class="radius" src='{{pageConfig.wedding_3_img_right}}' mode='widthFix' style='width:100%;'></image><view style="position: relative;"><view class="bg-red-dark radius cu-avatar sm" style="position: absolute; right: 0;margin-right: 30rpx;margin-top: 30rpx;"></view></view></view></view><view class="flex justify-between padding" style="margin-top: 20rpx;"><view class="flex flex-direction"><text class="text-black">{{pageConfig.wedding_3_txt}}</text></view></view><view style="margin-top: 60rpx;"><image class="radius" src='{{pageConfig.wedding_4_img_TOP}}' mode='widthFix' style='width:100%;'></image></view><view class="flex"><view class="flex-sub radius"><image class="radius" src='{{pageConfig.wedding_4_img_left}}' mode='widthFix' style='width:100%;'></image><view style='margin-top: 120rpx;'><text>{{pageConfig.wedding_4_txt_left}}</text></view></view><view class="flex-sub radius" style="margin-left: 10rpx; "><view class="text-right"><text>{{pageConfig.wedding_4_txt_right}}</text></view><image class="radius" src='{{pageConfig.wedding_4_img_right}}' mode='widthFix' style='width:100%; margin-top: 100rpx;'></image></view></view><view class="margin padding-sm bg-orange.light" style=" margin-top: 100rpx;"><view class="bg-yellow-light padding"><view class="flex-sub flex flex-direction align-center text-center" style="padding: 5rpx;"><view class="cu-avatar round xxl bg-red-dark"><text class="text-yellow text-xsl">囍</text></view><text class="text-xxl font-myFont">-----婚礼邀请-----</text></view><view class="flex-sub flex flex-direction align-center text-center" style="padding: 60rpx;"><text class="text-darkred text-xxl font-myFont" style="padding: 20rpx;">婚礼时间</text><text>2023年12月24日(星期日)</text><text class="text-sm">农历：癸卯年 冬月十二</text></view><view class="flex flex-direction flex-sub align-center text-center" style="padding: 10rpx;"><text class="text-darkred text-xxl font-myFont" style="padding: 20rpx;">婚礼地点</text><text class="text-xs">福建省泉州市安溪县湖头镇许前村登铭居</text><text class="text-black text-bold text-xxxs">(点击位置导航直达)</text></view><view class="flex image shadow justify-center"><image class="radius" src="{{pageConfig.wedding_img_location}}" mode="widthFix" bindtap="navigate"></image></view><view class="flex-sub flex flex-direction align-center text-center" style="padding: 60rpx;"><text class="text-darkred text-xxl font-myFont" style="padding: 20rpx;">婚礼流程</text><text>10:00 AM</text><text>婚礼迎宾</text><text class="padding text-xxl">|</text><text>11:30 AM</text><text>婚礼仪式</text><text class="padding text-xxl">|</text><text>12:00 PM</text><text>婚礼午宴</text></view></view></view><view class="flex flex-direction flex-sub align-center text-center text-content" style="padding: 10rpx;"><text class="text-xs">{{pageConfig.wedding_txt_last1}}</text></view><image class="radius" src='{{pageConfig.wedding_img_last}}' mode='widthFix' style='width:100%;'></image><view class="flex flex-direction flex-sub align-center text-center text-content" style="padding: 10rpx;"><text class="text-xs ">{{pageConfig.wedding_txt_last1}}</text><text class="cuIcon-likefill text-bold text-darkred"></text><text class="text-bold">--- The End ---</text></view><view class="flex justify-between padding" style="margin-top: 640rpx;"></view></view>这篇关于超真诚婚礼邀请函小程序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
