前端请柬框架_mpvue+⼩程序云开发，纯前端实现婚礼邀请函
（相册⼩程序）
请勿使⽤本⽂章及源码作为商业⽤途！
前⾔
当初做这个⼩程序是为了婚礼前的需要，结婚之后，希望这个⼩程序能够留存下来，特地花了⼀些空闲时间将⼩程序转化成为“相册类⼩程序”
体验码
准备⼯作
注意：使⽤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": [
selectediconpath什么意思{
"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⽂件 (本⼈主要是为了增加项⽬更新后的提醒)，所以在这个⽂件加了些相关内容，内容如下：
export default {
onLaunch () {
// 检测⼩程序是否有新版本更新
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
// 请求完新版本信息的回调
if (res.hasUpdate) {
wx.showModal({
title: '更新提⽰',
content: '新版本已经准备好，是否重启应⽤？',
success: function (res) {
if (firm) {
// 新的版本已经下载好，调⽤ applyUpdate 应⽤新版本并重启
updateManager.applyUpdate()
}
}
})
})
// ⼩程序有新版本，会主动触发下载操作(⽆需开发者触发)
/
/ 当新版本下载失败，会进⾏回调
wx.showModal({
title: '提⽰',
content: '检查到有新版本，下载失败，请检查⽹络设置',
showCancel: false
})
})
} else { // 版本过低则⽆法使⽤该⽅法
wx.showModal({
title: '提⽰',
confirmColor: '#5BB53C',
content: '当前版本过低，⽆法使⽤该功能，请升级到最新版本后重试。' })
}
}
}
page
height 100%
image
display block
main.js⽂件：
import Vue from 'vue'
import App from './App'
App.mpType = 'app'
wx.cloud.init({
env: '云开发环境ID'
})
const app = new Vue(App)
app.$mount()
functions⽬录：主要放⼀些云函数，这⾥不清楚云函数的⽂章后⾯会提及images⽬录：主要放⼀些静态资源图⽚
页⾯介绍
⾸页——邀请函
⾸页着重和⼤家讲解下背景⾳乐的实现⽅法
const audioCtx = wx.createInnerAudioContext()
接着，通过实例的相关⽅法来实现⾳乐的播放与暂停功能
具体代码如下：
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
},
methods: {
audioPlay () {
const that = this
if (that.isPlay) {
audioCtx.pause()
that.isPlay = false
tools.showToast('您已暂停⾳乐播放~')
} else {
audioCtx.play()
that.isPlay = true
tools.showToast('背景⾳乐已开启~')
}
},
getList () {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。