mpvue+小程序云开发，纯前端实现婚礼邀请函

时间  2019-11-06
标签 mpvue 程序 开发 前端 实现 婚礼 邀请函 繁體版
原文   原文链接
著做权归做者全部。商业转载请联系 roberthuang 得到受权，非商业转载请注明出处[务必保留全文，勿作删减]。
请勿使用开源代码做为商业用途！

目录css

前言html

准备工做vue

项目结构介绍node

页面介绍git

云开发介绍github

总结 数据库

前言

感谢OnceLove提供的思路，借助他的小程序的界面UI风格，本身从新用mpvue实现了属于本身的婚礼邀请函，前先后后花了3天时间。在这以前本人是没想过要本身实现这样一个项目，缘由是后台那块是个麻烦事，因此当媳妇让我本身实现这个邀请函的时候，起初我是拒绝的。后面因为快要过年了，公司项目没有重大更新，趁着这段空闲时间，本身研究了下小程序自带的云开发，无需后台支持，先后端均可以本身来实现，下面我将一一介绍本项目的实现过程！json

本小程序为婚礼正式使用的小程序（因为某些小伙伴的不文明行为，因此只能换一个小程序让你们体验），婚期将至，感兴趣的能够扫码体验本项目，沾沾喜气，欢迎你们体验，有什么问题能够在本文给我留言小程序

欢迎体验：


源码地址：https://gitee.com/roberthuang123/wedding后端

​

准备工做

  1. mpvue框架 mpvue官方文档
  2. 小程序·云开发 小程序·云开发文档

注意：使用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文件：本人主要是为了增长项目更新后的提醒，因此在这个文件加了些相关内容，内容以下，

<script>
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',
        content: '当前微信版本太低，没法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  }
}
</script>

<style lang="stylus">
page
    height 100%
image
    display block
</style>
复制代码

main.js文件：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'

wx.cloud.init({
  env: '云开发环境ID'
})

const app = new Vue(App)
app.$mount()
复制代码

functions目录：主要放一些云函数，这里不清楚云函数的文章后面会说起

images目录：主要放一些静态资源图片

页面介绍

  • 首页——邀请函

首页着重和你们讲解下背景音乐的实现方法

const audioCtx = wx.createInnerAudioContext()

首先，wx.createInnerAudioContext 接口获取实例

接着，经过实例的相关方法来实现音乐的播放与暂停功能

关于小程序音频相关文档

具体代码以下：

<script>
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
    that.getMusicUrl()
  },

  methods: {
    audioPlay () {
      const that = this
      if (that.isPlay) {
        audioCtx.pause()
        that.isPlay = false
        tools.showToast('您已暂停音乐播放~')
      } else {
        audioCtx.play()
        that.isPlay = true
        tools.showToast('背景音乐已开启~')
      }
    },

    getList () {
      const that = this
      const db = wx.cloud.database()
      const banner = db.collection('banner')
      banner.get().then(res => {
        that.list = res.data[0].bannerList
      })
    },

    getMusicUrl () {
      const that = this
      const db = wx.cloud.database()
      const music = db.collection('music')
      music.get().then(res => {
        let musicUrl = res.data[0].musicUrl
        audioCtx.src = musicUrl
        audioCtx.loop = true
        audioCtx.play()
        that.getList()
      })
    }
  },

  onShareAppMessage: function (res) {
    return {
      path: '/pages/index/main'
    }
  }
}
</script>复制代码

以上代码中使用到了云开发相关功能，文章后面会介绍，请你们稍安勿躁

  • 相册页——就一个轮播图，这里就不过多介绍
  • 地图页——这里着重讲一下地图标签map

map标签 关于map组件的使用文档

这里讲一下标记点markers

data () {
    return {
      // qqSdk: '',
      markers: [{
        iconPath: '../../static/images/nav.png',
        id: 0,
        latitude: 30.08059,
        longitude: 115.93027,
        width: 50,
        height: 50
      }]
    }
  }复制代码
<template>
    <div class="map">
        <image mode="aspectFit" class="head-img" src="../../static/images/t1.png"/>
        <map class="content" id="map" longitude="115.93027" latitude="30.08059" :markers="markers" scale="18" @tap="toNav">
        </map>
        <div class="call">
            <div class="left" @tap="linkHe">
                <image src="../../static/images/he.png"/>
                <span>呼叫新郎</span>
            </div>
            <div class="right" @tap="linkShe">
                <image src="../../static/images/she.png"/>
                <span>呼叫新娘</span>
            </div>
        </div>
        <image class="footer" src="../../static/images/grren-flower-line.png"/>
    </div>
</template>复制代码
  • 祝福页——也是云开发相关内容，后面会介绍
  • 留言页——也是云开发相关内容，后面会介绍

云开发介绍

小程序云开发文档

  • project.config.json文件：
"cloudfunctionRoot": "static/functions/"复制代码

进行云开发首先咱们须要找到上面这个文件，在上面这个json文件中加上上面这句

cloudfunctionRoot 用于指定存放云函数的目录

  • app.json文件：
"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
},
"cloud": true复制代码

增长字段 "cloud": true实现云开发能力的兼容性

  • 开通云开发

在开发者工具工具栏左侧，点击 “云开发” 按钮便可开通云开发

  • 云开发控制台

​

  • 数据库

云开发提供了一个 JSON 数据库

  • 存储

云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者能够在小程序端和云函数端经过 API 使用云存储功能。

  • 云函数

云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署便可运行后端代码。

下面开始讲解使用云开发的过程：

  1. 云能力初始化，在小程序端开始使用云能力前，需先调用 wx.cloud.init 方法完成云能力初始化
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'

wx.cloud.init({
  env: '云开发环境ID'
})

const app = new Vue(App)
app.$mount()
复制代码

2. 数据库的使用：

在开始使用数据库 API 进行增删改查操做以前，须要先获取数据库的引用。如下调用获取默认环境的数据库的引用：

const db = wx.cloud.database()复制代码

要操做一个集合，需先获取它的引用：

const todos = db.collection('todos')复制代码

接下来是操做数据库的相关示例：

例：首页获取背景音乐资源

getMusicUrl () {
      const that = this
      const db = wx.cloud.database()
      const music = db.collection('music')
      music.get().then(res => {
        let musicUrl = res.data[0].musicUrl
        audioCtx.src = musicUrl
        audioCtx.loop = true
        audioCtx.play()
        that.getList()
      })
}复制代码

例：首页获取轮播图数组

getList () {
      const that = this
      const db = wx.cloud.database()
      const banner = db.collection('banner')
      banner.get().then(res => {
        that.list = res.data[0].bannerList
      })
}复制代码

例：祝福页，用户送上祝福存储用户

<script>
import tools from 'common/js/h_tools'
export default {
  name: 'Greet',
  data () {
    return {
      userList: [],
      openId: '',
      userInfo: ''
    }
  },
  onShow () {
    const that = this
    that.getUserList()
  },
  methods: {
    scroll (e) {
      console.log(e)
    },

    sendGreet (e) {
      const that = this
      if (e.target.errMsg === 'getUserInfo:ok') {
        wx.getUserInfo({
          success: function (res) {
            that.userInfo = res.userInfo
            that.getOpenId()
          }
        })
      }
    },

    addUser () {
      const that = this
      const db = wx.cloud.database()
      const user = db.collection('user')
      user.add({
        data: {
          user: that.userInfo
        }
      }).then(res => {
        that.getUserList()
      })
    },

    getOpenId () {
      const that = this
      wx.cloud.callFunction({
        name: 'user',
        data: {}
      }).then(res => {
        that.openId = res.result.openid
        that.getIsExist()
      })
    },

    getIsExist () {
      const that = this
      const db = wx.cloud.database()
      const user = db.collection('user')
      user.where({
        _openid: that.openId
      }).get().then(res => {
        if (res.data.length === 0) {
          that.addUser()
        } else {
          tools.showToast('您已经送过祝福了~')
        }
      })
    },

    getUserList () {
      const that = this
      wx.cloud.callFunction({
        name: 'userList',
        data: {}
      }).then(res => {
        that.userList = res.result.data.reverse()
      })
    }
  }
}
</script>复制代码
  • 进入祝福页，首先咱们须要获取送祝福的好友列表
getUserList () {
      const that = this
      wx.cloud.callFunction({
        name: 'userList',
        data: {}
      }).then(res => {
        that.userList = res.result.data.reverse()
      })
}复制代码

这里用到了云函数，之因此用云函数是由于小程序端在获取集合数据时服务器一次默认而且最多返回 20 条记录，云函数端这个数字则是 100。

下面给你们看看云函数的使用方法：

上面咱们讲过在project.config.json文件中配置云函数存放位置

下面是云函数messageList的index.js文件：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const MAX_LIMIT = 100
exports.main = async (event, context) => {
  // 先取出集合记录总数
  const countResult = await db.collection('message').count()
  const total = countResult.total
  // 计算需分几回取
  const batchTimes = Math.ceil(total / 100)
  // 承载全部读操做的 promise 的数组
  const tasks = []
  for (let i = 0; i < batchTimes; i++) {
    const promise = db.collection('message').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
    tasks.push(promise)
  }
  // 等待全部
  return (await Promise.all(tasks)).reduce((acc, cur) => ({
    data: acc.data.concat(cur.data),
    errMsg: acc.errMsg
  }))
}
复制代码

​

使用云函数前，在开发者工具上，找到messageList目录，右键如图：

​

点击上传并部署：云端安装依赖（不上传node_modules）

获得如图的提示：

​

安装完点击完成就能使用当前云函数了，使用方法即：

getUserList () {
      const that = this
      wx.cloud.callFunction({
        name: 'userList',
        data: {}
      }).then(res => {
        that.userList = res.result.data.reverse()
      })
}复制代码

数组之因此要倒序是由于但愿新祝福的的用户在最前面显示

  • 接着是用户送上祝福的时候存储用户

这里咱们用到了云函数获取用户信息，

当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性，由于微信已经完成了这部分鉴权，开发者能够直接使用该 openid

下面是云函数user的index.js文件：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID
  }
}
复制代码

主要是为了获取当前操做用户的openid,获取当前用户的openid方法：

getOpenId () {
      const that = this
      wx.cloud.callFunction({
        name: 'user',
        data: {}
      }).then(res => {
        that.openId = res.result.openid
        that.getIsExist()
      })
}复制代码

接着判断当前用户是否已经存在于数据库中，即getIsExist()方法：

getIsExist () {
      const that = this
      const db = wx.cloud.database()
      const user = db.collection('user')
      user.where({
        _openid: that.openId
      }).get().then(res => {
        if (res.data.length === 0) {
          that.addUser()
        } else {
          tools.showToast('您已经送过祝福了~')
        }
      })
}复制代码

若是获得的数组长度为零则添加改用户到数据库，不然则提醒当前用户已经送过祝福

接下来介绍存储用户信息的方法，即addUser():

addUser () {
      const that = this
      const db = wx.cloud.database()
      const user = db.collection('user')
      user.add({
        data: {
          user: that.userInfo
        }
      }).then(res => {
        that.getUserList()
      })
}复制代码

存入到数据库的信息是这样的：

有人要看数据库字段，其实很简单，这是首页轮播图的字段，见下图：

​

这是留言的评论，如图：


总结

在这里给你们讲解几点细节：
  1. 云开发是免费的；
  2. 数据库集合名首先必需要创建；
  3. 数据库集合为空时，这里本人没有处理细节，会报错，先经过使用本身的小程序写入一条数据，错误就能够解决了；
  4. 云函数新建后必定要建立并安装依赖；
  5. 若是担忧有些评论不太友好但愿有删除功能，能够给本身开放权限，在每条评论加一个删除按钮，仅本身使用的时候经过惟一的openid控制删除按钮为可见，其余人不可见，从而来管理留言列表；
  6. 数据库创建集合后记得将权限放开，以下图：


最后总结：
  1. 除了一些静态资源放在项目中，其余资源建议一概存储在云开发-存储管理中，这样的话，方便更换资源而不用再次提交等待小程序审核，更换后的资源能够当即生效；
  2. 我知道你们都喜欢拿来就能直接看到一样效果的东西，本项目由于涉及到后台数据，不可能彻底把本人的环境放出来给你们使用，建议真的要实现相关功能或相似项目的小伙伴对照个人思路从新作一个属于本身的做品才最有意义。
  3. 大概的功能就是这么多，但愿能够帮助到你们，以为写得不错的记得给做者点个赞，大家的支持是我不断更新的最大动力！

最近更新

最近更新了一些内容，不打算开源，须要订制小程序的能够加微信：huangbin910419
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程