前段时间给自己开发了一个婚礼请柬微信小程序，后端直接采用微信小程序的云开发能力。
小程序码：
因为服务已经过期了，图片都看不了了，所以就放心挂出来了😁
1. 初始化项目，测试云函数
在微信小程序开发工具中，创建项目，选择微信云开发，模板选择邀请函，填写注册的appId。
打开项目，弹出提示上传云函数。
可以看到项目代码包含cloundfunctions和miniprogram两部分。在cloudfunctions中，右键文件夹上传云函数。如果还是报错，可能是云函数的数据表在云服务上不存在，点击云开发按钮，进去查看数据库。
查看模板代码，可以看到云函数的js文件代码很简单，语法类似mongodb。然后小程序端在app.js中初始化数据库连接，传入云端的环境id，这个id可以在云开发概览查看。然后app.js中call方法封装了cloud.callFunction方法，可以请求云函数。
const cloud = require('wx-server-sdk') // 云开发服务端SDK引入
cloud.init({ // 初始化云开发环境
env: cloud.DYNAMIC_CURRENT_ENV // 当前环境的常量
})
const db = cloud.database() // 取出数据库操作对象
exports.main = async (event, context) => {
// 预置创建集合，如果存在则自动失败跳过，自己上架时可以去掉
try{
await db.createCollection('message')
await db.createCollection('config')
}catch(e){}
const wxContext = cloud.getWXContext() // 获取微信上下文
if (event.type === 'getlist') { // 如果行为是get
const data = (await db.collection('message').get()).data // 取出data
return {data}
}
if (event.type === 'xxx') {
...
}
...
return {data:false}
}
const envList = [
{"envId":"cloud1-8g01fkyce74b39c8","alias":"cloud1"}
]
const isMac = true
module.exports = {
envList,
isMac
}
App({
globalData: {
},
async onLaunch (e) {
this.initcloud()
},
/**
* 初始化云开发环境（支持环境共享和正常两种模式）
*/
async initcloud () {
const shareinfo = wx.getExtConfigSync() // 检查 ext 配置文件
const normalinfo = require('./envList.js').envList || [] // 读取 envlist 文件
if (shareinfo.envid != null) { // 如果 ext 配置文件存在，环境共享模式
this.c1 = new wx.cloud.Cloud({ // 声明 cloud 实例
resourceAppid: shareinfo.appid,
resourceEnv: shareinfo.envid
})
// 装载云函数操作对象返回方法
this.cloud = async function () {
if (this.flag !== true) { // 如果第一次使用返回方法，还没初始化
await this.c1.init() // 初始化一下
this.flag = true // 设置为已经初始化
}
return this.c1 // 返回 cloud 对象
}
this.afterInit()
} else { // 如果 ext 配置文件存在，正常云开发模式
if (normalinfo.length !== 0 && normalinfo[0].envId != null) { // 如果文件中 envlist 存在
wx.cloud.init({ // 初始化云开发环境
traceUser: true,
env: normalinfo[0].envId
})
// 装载云函数操作对象返回方法
this.cloud = () => {
return wx.cloud // 直接返回 wx.cloud
}
this.afterInit()
} else { // 如果文件中 envlist 存在，提示要配置环境
this.cloud = () => {
throw new Error('当前小程序没有配置云开发环境，请在 envList.js 中配置你的云开发环境')
}
this.afterInit()
}
}
},
/**
* 封装的云函数调用方法
* @param {*} obj 传入对象
*/
async call (obj) {
console.log('【发起云函数调用】', obj)
try {
const cloud = await this.cloud()
const res = await cloud.callFunction({ // 调用云函数
name: 'quickstartFunctions', // 应用唯一的服务函数
data: {
type: obj.name, // 传入name为type
data: obj.data // 传入data为data
}
})
console.log('【云函数调用成功】', res)
return res.result.data
} catch (e) { // 网络问题出现
console.error('【云函数调用失败】', e.toString())
wx.hideLoading()
wx.showModal({
content: '请上传cloudfunctions文件夹中的云函数，然后再次体验', // 此提示可以在正式时改为 "网络服务异常，请确认网络重新尝试！"
showCancel: false
})
}
},
afterInit () {
this.getConfig()
},
async getConfig () {
if (this.config) {
return this.config
} else {
const res = await this.call({ // 发起云函数，提交信息
name: 'getConfig',
})
this.config = res || {}
return this.config
}
},
})
2. 设计页面
这个小程序的目的是婚礼邀请，所以首要的是类似婚礼纪那样的邀请函页面，婚礼的时间地点，放几张照片，最后地址导航。
这里我分了4个tab导航。默认是请柬，第二栏专门放上了全部精修照片，第三栏给大家留言，第四栏单独把地址导航放出来。
- 请柬： 上下滚动翻页切换，请柬-照片展示-时间地点-致谢
- 照片墙：婚纱照拍了四个系列，做成四个分组入口，点击进入当前分组的瀑布流展示，点击单张唤起预览。
- 留言板：展示留言列表，下面发表留言。
- 地址：上方腾讯地图组件，下方时间地点，点击地图或按钮唤起导航。
当然最主要的问题是素材，导航栏图标我去阿里巴巴的iconfont网站下了几个。整体的一些图片素材，直接去婚礼纪扒素材了，打开一个别人发的婚礼纪请柬，在电脑端打开直接F12😄。
3. 开发
开发这块就不多说了。主要有几点。
- 图片利用小程序的云存储能力，上传到云端，前端访问时用cloudId访问，
- 个人小程序提审，服务类型选择：生活服务 > 婚庆服务，工具 > 备忘录，工具 > 预约/报名
- 做了一个音乐播放器，放了几首歌，结果提审的时候无法过审。解决方案是加了一个配置表，上传一个config文件，做个开关。提审过后再打开开关。
- 因为精修过得照片都很大，压缩过后也大，用着用着突然有天就图片都不加载了，上云开发后台一看是流量用完了。首先去充点钱，开启按量付费。然后去存储配置把缓存配置改成30天了。
- 另外新小程序免费额度一个月，把握好时间，我做的有点早，然后快到婚礼又续费了一个月。
