前端请柬框架_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": [

{

"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()

updateManager.onCheckForUpdate(function (res) {

// 请求完新版本信息的回调

if (res.hasUpdate) {

updateManager.onUpdateReady(function () {

wx.showModal({

title: '更新提示',

content: '新版本已经准备好，是否重启应用？',

success: function (res) {

if (res.confirm) {

// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启

updateManager.applyUpdate()

}

}

})

})

// 小程序有新版本，会主动触发下载操作(无需开发者触发)

wx.getUpdateManager().onUpdateFailed(function () {

// 当新版本下载失败，会进行回调

wx.showModal({

title: '提示',

content: '检查到有新版本，下载失败，请检查网络设置',

showCancel: false

})

})

}

})

} else { // 版本过低则无法使用该方法

wx.showModal({

title: '提示',

confirmColor: '#5BB53C',<