酷应用

程序员撒狗粮！3 天开发自己的婚礼小程序！

百家作者：程序人生 2019-03-07 04:25:01

作者 | 黄彬

责编 | 伍杏玲

本文经授权转载自云开发x（ID：tcb2tcb）

【程序人生编者按】今天是3月7号女生节，不知道程序员小哥哥给女朋友买包包、买口红没？没的话，提醒下明天还有女王节哦！
不过作为程序员，咱咋能这么“俗”呢？要送当然是送代码啦！这不，有个程序员小哥哥撒（被）狗（迫）粮（地）只花了三天时间，就写出自己的婚礼邀请函小程序送给老婆！

本小程序为婚礼正式使用的小程序，婚期将至，作为程序员，我用Mpvue+云开发，纯前端实现了属于自己的婚礼邀请函，前前后后花了3天时间。效果不错，媳妇也很满意！

项目结构介绍

common目录：放一些公共资源，如js、css、json
components目录：组件相关的.vue文件都放在这里
pages目录：所有页面都放在这个目录
utils目录：使用mpvue时自动生成，可忽略
app.json文件：
App.vue文件：本人主要是为了增加项目更新后的提醒，在这个文件加了些相关内容。
functions目录：主要放一些云函数，这里不清楚云函数的文章后面会提及
images目录：主要放一些静态资源图片

首页

首页着重和大家讲解下背景音乐的实现方法：

const audioCtx = wx.createInnerAudioContext()

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

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

关于小程序音频相关文档：

https://developers.weixin.qq.com/miniprogram/dev/api/InnerAudioContext.html

具体代码如下：

< 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标签，这里讲一下标记点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>

云开发

云开发的官方介绍如下：云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

目前提供三大基础能力支持：

云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码。
数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库。
存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理。

进行云开发时，我们先找到project.config.json文件，加上"cloudfunctionRoot": "static/functions/"，用于指定存放云函数的目录。

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

进入祝福页，首先我们需要获取送祝福的好友列表

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

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

云函数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目录，点击上传并部署完成就能使用当前云函数了。

用户送上祝福的时候存储用户

我们用到了云函数获取用户信息，当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 OpenID，开发者无需校验OpenID的正确性，因为微信已经完成了这部分鉴权，开发者可以直接使用该 OpenID。

下面是云函数用户的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()
      })
}

接下来介绍存储用户信息的方法，即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()
      })
}

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

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

这是留言的评论，如图：

总结和成品

云开发是免费的；
数据库集合名首先必须要建立；
数据库集合为空时，这里本人没有处理细节，会报错，先通过使用自己的小程序写入一条数据，错误就可以解决了；
云函数新建后一定要创建并安装依赖；
如果担心有些评论不太友好希望有删除功能，可以给自己开放权限，在每条评论加一个删除按钮，仅自己使用的时候通过唯一的OpenID控制删除按钮为可见，其他人不可见，从而来管理留言列表；
数据库建立集合后记得将权限放开;
除了一些静态资源放在项目中，其他资源建议一律存储在云开发-存储管理中，这样的话，方便更换资源而不用再次提交等待小程序审核，更换后的资源可以立即生效；
我知道大家都喜欢拿来就能直接看到同样效果的东西，本项目因为涉及到后台数据，不可能完全把本人的环境放出来给大家使用，建议真的要实现相关功能或类似项目的小伙伴对照我的思路重新做一个属于自己的作品才最有意义。

以下是效果图：

作者简介：黄彬，2015年6月毕业于湖北工业大学，专业化学工程与工艺，一直从事前端工作，主要做小程序相关的开发，精通Vue框架，熟悉WebPack工程化开发。
源码地址：
https://gitee.com/roberthuang123/wedding

零基础学习小程序？

开发小程序遇到问题不知道问谁？

找不到小程序的组织？

欢迎加入我们的小程序开发者群！

偷偷告诉你，本文作者也在哦！

热文 推荐

☞ 终于可以和 QQ 彻底说再见了！

☞除了写代码，程序员还能做哪些副业呢？| 程序员有话说

☞ 他忽悠了马云 10 个亿，10 年后还给马云 4500 亿

☞ 调查全球 98,000 名程序员发现，PHP 遭厌弃，前端岗已饱和！

☞ @00 后 IT 大佬们，有个编程问题请教下

☞两会第一天, 大佬们关于区块链的探讨, 你要了解的都在这了

☞抵制知网、爱思唯尔，学界苦出版商久矣？

☞虎牙直播在微服务改造方面的实践和总结

☞没有一个人，能躲过程序员的诱惑！

print_r('点个好看吧！');
var_dump('点个好看吧！');
NSLog(@"点个好看吧！");
System.out.println("点个好看吧！");
console.log("点个好看吧！");
print("点个好看吧！");
printf("点个好看吧！n");
cout < < "点个好看吧！" < < endl;
Console.WriteLine("点个好看吧！");
fmt.Println("点个好看吧！");
Response.Write("点个好看吧！");
alert("点个好看吧！")
echo "点个好看吧！"