企业官网建设流程全解析

简介：这份私人影院微信小程序源码基于腾讯小程序云开发技术构建，面向小程序开发者、影院运营方及有预约类小程序需求的产品团队，可快速落地影院动态、影讯展示、房间预约和后台管理等场景。压缩包共481个文件，约2.9MB，以js、wxss、wxml、json前端逻辑与页面结构文件为主，搭配png等素材，结构清晰便于直接导入微信开发者工具学习调试。后台预约管理支持订单审核确认与取消，并可将预约数据导出为Excel表格，方便运营人员统计热门影片、高峰时段等分析报表；云开发免去了自建服务器的繁琐配置，适合想掌握Serverless小程序实战的开发者参考。目前已有642人浏览学习，源码兼具功能完整性与教学价值，可在此基础上扩展支付接口、会员体系或座位图模块。

1. 私人影院小程序与云开发：为什么把预约做成云函数

做私人影院微信小程序，最容易被忽视的是预约管理那条链路，而不是影讯列表。用户选完房间、提交时段后，老板要能在后台看到预约、改状态，还要把预约记录导出成 Excel 交给财务。这个需求如果按传统前后端分离做，要买服务器、配域名、写接口、做权限，还没上线就把时间耗在环境上。而采用腾讯小程序云开发，数据库、云函数、存储都运行在微信生态内，前端直接调用云函数即可，后台管理页和用户端共用同一套数据。按这类源码最常见的组织方式，从云开发初始化、集合设计讲到预约状态流转，最后给出预约 Excel 的导出方案，是目前落地最快的一条路。

2. 云开发环境初始化与数据库集合设计：影讯、房间、预约分开建模

2.1 在微信开发者工具里开通云开发环境

拿到一份私人影院小程序源码后，第一步不是改页面，而是先在微信开发者工具里开通云开发环境。打开项目后点击工具栏“云开发”按钮，按提示新建环境，环境 ID 要记录下来，后续所有云函数里的cloud.init都会用到它。同一个环境可以同时被用户端和后台管理端使用，所以不需要创建两套环境，省掉不少跨环境联调工作。

在app.js的onLaunch里做初始化：

// app.js App({ onLaunch() { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力'); } else { wx.cloud.init({ // env 请换成你自己的环境 ID env: 'private-cinema-1a2b3c', traceUser: true }); } } });

这里env是云开发环境 ID，traceUser会记录每个访问用户的操作，方便后台做预约管理时定位登录用户。我会把环境 ID 单独放到config.js里，避免后续切换正式环境时改多个文件。云端环境在首次开通时会分配默认配额，个人小程序足够跑通影讯和预约功能。

2.2 集合字段设计：rooms 和 bookings 是关键

私人影院的核心业务是房间预约，因此数据库集合至少要拆成 4 张：films 存最新影讯，news 存影院动态，rooms 存房间信息，bookings 存预约记录，如果要做后台权限区分，再加一张 admins 集合。下面列出最关键的两张表字段设计。

rooms 集合字段：

bookings 集合字段：

这里把date和time_slot都存成字符串，是为了后续导出 Excel 时不用做额外格式化；判断房间是否被占用时直接查这两个字段即可。注意不要把时间存成时间戳后又在不同时区解析，容易让预约日期差一天。因为预约查询经常按照room_id + date + time_slot组合条件进行，我会在云开发控制台为 bookings 集合添加复合索引，字段顺序为 room_id（升序）、date（升序）、time_slot（升序），否则数据量大了之后查询会报错或变慢。

2.3 数据权限设置：让前端只能读，写操作走云函数

云开发数据库默认权限是“仅创建者可读写”，这对预约系统不够用。如果用户端直接写 bookings，等于任何人都能改别人的预约。常见做法是把所有写操作封装成云函数，数据库权限设为“所有用户不可读写”，云函数通过管理端权限访问数据库。

在云开发控制台的“权限设置”里，可以按集合配置：

{ "read": false, "write": false }

这样设置后，前端wx.cloud.database()只能通过云函数间接读写数据，避免在小程序端暴露集合字段和越权风险。后台管理页面也走云函数，但云函数内部会先校验调用者是否在 admins 集合里。需要注意的是，云函数运行在服务端，不受客户端权限规则限制，所以权限控制必须由云函数自己完成，而不是依赖数据库默认权限。

3. 影院动态与最新影讯模块：云函数查询和前端渲染配合

3.1 最新影讯云函数：按日期倒序取最近上架电影

私人影院首页通常分成两块：上面是影院动态轮播，下面是“最新影讯”列表。电影的更新频率不高，但一旦上新，用户需要第一时间看到。用一个云函数films_latest统一读取最新影讯，前端只负责渲染即可。

// cloudfunctions/films_latest/index.js const cloud = require('wx-server-sdk'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const db = cloud.database(); exports.main = async (event) => { const page = event.page || 1; const limit = Math.min(event.limit || 10, 20); const res = await db.collection('films') .orderBy('release_date', 'desc') .skip((page - 1) * limit) .limit(limit) .get(); return { list: res.data }; };

这里的orderBy('release_date', 'desc')按上映日期倒序，让最新上的电影排在最前面。skip和limit组成分页，limit 最大限制 20，避免一次拉太多数据。云函数默认在服务端运行，所以没有小程序端单次最多取 20 条的限制，但为了接口稳定还是主动限制分页大小。films 集合常见字段包括：

3.2 影院动态轮播：把 news 集合做成图片+标题

影院动态一般是一条图片加标题的公告，我习惯用news集合存轮播项，字段包括 title、image、content、link、sort。轮播顺序用sort字段控制，数字越小越靠前。

前端可以这样读取动态：

// pages/index/index.js async function loadNews() { const res = await wx.cloud.callFunction({ name: 'news_list', data: { active: true } }); this.setData({ newsList: res.result.list }); }

对应云函数中需要过滤active为 true 的记录，并按sort升序排列。很多源码会把动态和影讯放到同一个云函数里，我建议拆开，这样当影院需要临时置顶某条活动时，不需要改影讯接口。轮播图的 fileID 可以直接放在<image>标签的src属性里，云开发存储的文件 ID 本身就支持前端直接展示，不需要额外换取临时链接。

3.3 前端调用与参数说明：page 和 limit 的正确用法

页面上展示影讯列表时，除了首次加载，还要考虑下拉刷新和触底加载。通常的做法是在onPullDownRefresh里重置 page 为 1，再调云函数；在onReachBottom时 page+1 追加数据。下面给出一段完整的调用封装：

// utils/api.js async function getFilms(page = 1, limit = 10) { const res = await wx.cloud.callFunction({ name: 'films_latest', data: { page, limit } }); if (res.result && res.result.list) { return res.result.list; } return []; } module.exports = { getFilms };

参数 page 从 1 开始，limit 建议设置为 10 或 15，配合海报列表卡片的高度，正好一屏展示一组数据。前端拿到列表后，不要直接把整组数据 setData 到旧列表上，应该用concat追加，否则触底加载时会出现列表闪动。

4. 房间预约与后台预约管理：状态机与权限校验

4.1 预约状态机：从 pending 到 confirmed 再到 cancelled

预约是私人影院的核心业务，建议把预约状态定义成四态：

为什么用户提交预约后不能直接confirmed？因为私人影院需要核对房间卫生、设备状态，管理员必须在后台确认。如果直接确认，用户到店后发现房间没准备好，体验会很差。这个状态机要放在云函数里校验，不能只在前端改状态，否则小程序端被人抓包后可以直接伪造请求改预约状态。

4.2 创建预约云函数：校验房间占用和用户身份

创建预约时最怕用户重复提交同一个房间同一个时段。我用一个create_booking云函数完成创建：

// cloudfunctions/create_booking/index.js const cloud = require('wx-server-sdk'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const db = cloud.database(); const _ = db.command; exports.main = async (event) => { const { room_id, date, time_slot } = event; if (!room_id || !date || !time_slot) { return { code: 1, msg: '参数不完整' }; } const wxContext = cloud.getWXContext(); const openid = wxContext.OPENID; // 检查房间是否存在且可用 const roomRes = await db.collection('rooms') .where({ _id: room_id, status: 'available' }) .count(); if (roomRes.total === 0) { return { code: 2, msg: '房间不可用' }; } // 检查同一时段是否已被预约 const conflictRes = await db.collection('bookings') .where({ room_id, date, time_slot, status: _.in(['pending', 'confirmed']) }) .count(); if (conflictRes.total > 0) { return { code: 3, msg: '该时段已被预约，请选择其他时间' }; } // 写入预约记录 const addRes = await db.collection('bookings').add({ data: { room_id, date, time_slot, user_openid: openid, status: 'pending', created_at: Date.now() } }); return { code: 0, msg: '提交成功', id: addRes._id }; };

代码里最关键的是_.in(['pending', 'confirmed'])这个条件。如果只查 status 等于 pending，那么一条已经确认的预约记录不会被视为占用，管理员确认后用户又能重复提交。把待确认和已确认都纳入占用，才是正确的防重复逻辑。房间查询用count()而不是get()，因为这里只需要知道是否存在，不需要把房间完整数据传给前端。

4.3 后台预约管理：用 isAdmin 字段控制操作

后台管理页面和用户端在同一个小程序里，管理员用自己的微信号打开后，云函数需要先判断他的 openid 是否在 admins 集合中。常见做法是在 admins 集合里存一条记录，字段包括 openid 和 isAdmin。

管理预约状态的操作统一封装为update_booking_status：

// cloudfunctions/update_booking_status/index.js const cloud = require('wx-server-sdk'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const db = cloud.database(); exports.main = async (event) => { const wxContext = cloud.getWXContext(); const callerOpenid = wxContext.OPENID; const adminRes = await db.collection('admins') .where({ openid: callerOpenid, isAdmin: true }) .count(); if (adminRes.total === 0) { return { code: 403, msg: '无权限操作' }; } const { booking_id, new_status } = event; const allowed = ['confirmed', 'cancelled', 'completed']; if (!allowed.includes(new_status)) { return { code: 400, msg: '非法的状态变更' }; } await db.collection('bookings').doc(booking_id).update({ data: { status: new_status } }); return { code: 0, msg: '更新成功' }; };

这段代码已经做了两层校验：一是调用者必须是管理员，二是 new_status 必须在白名单里。禁止把 pending 之外的状态直接改成 pending，是为了防止管理员操作失误后把已取消的预约重新激活。前端调用时需要把 booking_id 作为参数传进来，云函数内部不要再做模糊匹配，避免误更新多条记录。

5. 导出预约Excel：云函数生成表格和下载兼容性

5.1 用 exceljs 在云函数里生成 xlsx Buffer

预约后台管理列表在页面上看没问题，但财务和店长要的是 Excel 文件。云开发环境下用 exceljs 这个 npm 包在云函数里生成 xlsx 是常见做法。先安装依赖：

# 在 cloudfunctions/export_bookings 目录下执行 npm install exceljs --save

生成 Excel 并上传到云存储：

// cloudfunctions/export_bookings/index.js const cloud = require('wx-server-sdk'); const ExcelJS = require('exceljs'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const db = cloud.database(); exports.main = async () => { const res = await db.collection('bookings').limit(1000).get(); const workbook = new ExcelJS.Workbook(); const sheet = workbook.addWorksheet('预约记录'); sheet.columns = [ { header: '预约编号', key: '_id', width: 32 }, { header: '房间', key: 'room_id', width: 16 }, { header: '日期', key: 'date', width: 14 }, { header: '时段', key: 'time_slot', width: 16 }, { header: '状态', key: 'status', width: 12 } ]; res.data.forEach((row) => sheet.addRow(row)); const buffer = await workbook.xlsx.writeBuffer(); const uploadRes = await cloud.uploadFile({ cloudPath: `exports/bookings_${Date.now()}.xlsx`, fileContent: Buffer.from(buffer) }); return { fileID: uploadRes.fileID }; };

这里用workbook.columns定义了表头，addRow会把数据库字段按 key 填入对应列。最后writeBuffer得到的是 ArrayBuffer，转成 Buffer 后通过cloud.uploadFile上传，前端拿着 fileID 去换临时链接下载。

5.2 把 Excel 传到云存储并返回下载地址

云函数返回 fileID 后，前端不能直接下载，需要调用wx.cloud.getTempFileURL换取临时地址：

wx.cloud.callFunction({ name: 'export_bookings' }).then(res => { const fileID = res.result.fileID; return wx.cloud.getTempFileURL({ fileList: [fileID] }); }).then(res => { const url = res.fileList[0].tempFileURL; wx.setClipboardData({ data: url, success: () => wx.showToast({ title: '下载链接已复制' }) }); });

这里不直接把下载地址展示在页面上，而是复制到剪贴板，让用户自己粘贴到浏览器下载。因为小程序内置的 web-view 打开文件经常会因为缺少文件协议处理而失败。

5.3 常见坑：中文文件名、日期格式和粘贴异常

导出 Excel 时最容易遇到三个问题。第一，云存储里的文件名如果包含中文，下载后可能变成普通文本，cloudPath 里尽量不要用中文，用bookings_加时间戳最稳妥。第二，bookings 集合里 status 字段是英文，需要在导出前 map 成中文，比如 pending 改成“待确认”，否则店长看不懂。第三，很多人在手机浏览器直接打开 xlsx 后，会提示无法粘贴数据，这通常是浏览器没有识别 xlsx 的 MIME 类型，让用户在下载后用文件 App 重新打开一次就好。最后一个技巧：如果列表数据超过 1000 条，记得在云函数里用db.command.gt配合上一页的_id做游标分页，而不是用skip，否则导出数据会重复。

本文还有配套的精品资源，点击获取