请勿使用本文章及源码作为商业用途！

前言

当初做这个小程序是为了婚礼前的需要，结婚之后，希望这个小程序能够留存下来，特地花了一些空闲时间将小程序转化成为“相册类小程序”

体验码

准备工作

  1. mpvue框架 

    注意：使用mpvue前，首先你得先熟悉vue框架的基本使用 

项目结构介绍

注意：接下来展示的代码，有几个对比，分别是本人优化前和优化后的代码对比，感兴趣的可以着重看一下优化后的成熟写法。

​

复制代码
{   "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文件 （本人主要是为了增加项目更新后的提醒），所以在这个文件加了些相关内容，内容如下：