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教程