基于Taro + 云开发 打造婚礼邀请函
趣婚礼
基于Taro2 + 云开发 打造婚礼邀请函
项目名称
趣婚礼
基于
Taro2
+ 云开发 打造婚礼邀请函
Taro2
云开发
项目介绍
结婚的时候婚礼邀请函是一道必不可少的程序,但是没法去很好的留存我们的数据和回忆(除非有后端支持)。
最近刚好在学习Taro
,所有就尝试基于Taro
+ 云开发快速的搭建一个婚礼邀请函小程序。也有人会问,使用了云开发,怎么去管理数据呢,不用担心,云开发
CMS
帮你搞定,支持文本、富文本、图片、文件、关联类型等多种类型的可视化编辑。
CMS 概览
项目效果截图
模块划分
- 邀请 =》邀请函信息
- 相册 =》相册展示
- 导航 =》婚礼举办地
- 祝福 =》婚礼视频及弹幕留言,留言保存至留言列表
- 留言 =》好友留言
目录结构
├── config # 配置文件
├── cloud # 云函数存放
├── dist # 打包文件
├── node_modules # 依赖的模块包
├── package.json # 项目基本信息
├── src # 项目的核心组件
│ ├── service # 资源文件(css、image、config)
│ ├── common # 资源文件(css、image、config)
│ ├── components # 公共组件
│ ├── store # 状态管理(redux)
| ├── pages # 页面文件目录
| | ├── Index # index页面目录
| | | ├── index.jsx # index页面逻辑
| | | └── index.scss # index页面样式
| | | └── index.config.js # index页面配置(小程序page.json内容)
│ ├── util # 公共方法(util.js、globalData.js)
│ ├── app.jsx # 入口文件
│ ├── app.scss # 公共样式
│ ├── index.html # 主页模板
├── static # 静态资源(CDN)
├── README.md # 项目描述信息
效果预览
视频演示
视频演示
部署
clone
clone
该项目,并在project.config.json
下修改自己的小程序appid
开通云开发
首先需要你在小程序的控制台去开通云开发,并拿到环境名称
在src/service/config
下修改DBID
为你自己申请的环境ID`;
新建数据库并导入
表的设计
wedding_invite:婚礼信息
wedding_msgs:留言祝福
wedding_photos:相册
wedding_video:视频
数据库文件存放在static/db
下,按照文件名新建数据库集合,并导入数据文件即可完成数据库创建。
项目启动
- 使用
yarn
安装依赖
yarn
编译和打包
yarn dev:weappyarn build:weapp
- 使用
npm
安装依赖
npm install
编译和打包
npm run dev:weappnpm run build:weapp
具体可查看Taro
教程
到此你就可以看到效果了…
云开发CMS的使用
用于管理云开发数据的CMS
CMS文档
CMS截图
CMS Web端
CMS端需要建立与数据库对应的内容模型,才能在列表正常展示对应数据库数据。
可直接导入内容模型,位于 static/schema
- 模型管理
- 内容管理
开发者工具端
圈出来的部分是和小程序云开发控制台数据库所对应的.
技术及框架
1.小程序
具体入门和使用,请访问官方文档。
- 小程序文档
- 小程序云开发
开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。包含云函数 、数据库、存储和云调用。
2.Taro2 + Redux
Taro2
Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。
项目中使用了最新版本Taro2
,由于Taro3
使用期间不是很丝滑,所以选择了Taro2
所以本项目可以作为Taro的学习入门,也可以作为小程序云开发的一个入门Demo
3.TaroUI
基于Taro2的UI框架
TaroUI
云开发的使用
官方文档
需要在控制台去开启云开发,并获取DBID(数据库初始化用到)
- 云开发入口
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hEaRGBuY-1639125252602)(https://forguo-1302175274.cos.ap-shanghai.myqcloud.com/enter.png)]
- 云开发入口
- 数据库配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ek41vAYQ-1639125252603)(https://forguo-1302175274.cos.ap-shanghai.myqcloud.com/cloud.png)]
- 数据库配置
数据库
可以在项目中的service中去查看数据库的CURD代码。
有数据库基础的很容易就上手了,小程序的数据库其实就是一个JSON
,类似于MongoDb
。
顾名思义,数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。
操作
- 初始化
在开始使用数据库 API 进行增删改查操作之前,需要先获取数据库的引用。
const db = Taro.cloud.database({env: 'DBID'
});
- 数据库操作
要操作一个集合,需先获取它的引用。在获取了数据库的引用后,就可以通过数据库引用上的 collection 方法获取一个集合的引用了
db.collection('wedding_msgs').orderBy('createTime', 'desc') // 时间升序.skip(current * 10).limit(pageSize).get()
这样每次都比较麻烦,所以我做了统一的处理,都写在service/cloud/index.js
当中,并export,只需要按需引入,并传入要操作的数据库名称即可。
Tips:如果发现数据库有数据,但是拿不到所有数据,那应该就是数据库的权限问题了,改成仅创建者可写,所有人可读就可以了
云函数
官方文档
使用云函数去获取用户信息就变得简单多了,具体可翻阅文档!
项目中云函数所在目录,cloud/functions.js
,项目中使用到了一个云函数,留言的内容过滤功能msgSecCheck
,
具体使用方法:security.msgSecCheck
- 声明
/*** @Description: 文本内容过滤;
*/
// 云函数入口文件
const cloud = require('wx-server-sdk');cloud.init();// 云函数入口函数
exports.main = async function (event, context) {console.log(event);let opts = {content: event.content || ''};let fun = cloud.openapi.security.msgSecCheck(opts);return fun.then(res => {return res;}).catch(err => {return err;});
};
- 调用
// 云调用内容安全过滤Taro.cloud.callFunction({name: 'msgCheck',data: { content: data.userMsg },}).then(res => {if (res && res.result && res.result.errCode === 0) {Taro.showLoading({title: '发送中...',mask: true});// 数据库插入留言数据cloud.add('wedding_msgs', data).then(msgRes => {resolve(msgRes);}, (err) => {console.log(err);reject(err);});} else {reject(res.result);}}).catch(err => {console.log(err);reject(err);});
ToDos
- 朋友圈海报生成…
- …
这次的版本使用了Taro + 云开发,后面打算出一版Taro + Antd + koa2 + MongoDb
的版本,初步内容已经差不错了,详见下面项目地址
Taro + Antd + koa2 + MongoDb
Taro3的坑
redux使得下拉刷新和上拉加载冲突
无法阻止事件冒泡
无法使用 小程序的
selectComponent
,获取组件实例
const barrageComp = this.selectComponent('.barrage')
使用 Taro.createRef();
代替
关于
微信:iforguo
- 个人主页
- CSDN
- 掘金
本项目仅供学习和交流,部分素材来源于网络,如有侵权联系删除。
项目有需改进也请留言和Issues,如有合作请在博客留言或wx:(iforguo
)。
编码不易,感谢各位大佬的吐槽和GitHub的Star
基于Taro + 云开发 打造婚礼邀请函相关推荐
- 基于微信云开发的商家转账至零钱
基于微信云开发的商家转账至零钱 相关简介 开通功能 阅读文档 技术框架 配置环境 编写代码 注意事项 相关参考 相关简介 本篇文章主要介绍如何通过微信云开发的云函数实现商家转账到零钱.(让那些没有服务 ...
- springboot 做表白墙_基于微信云开发 SayLove 表白墙微信小程序V1.0
基于微信云开发 SayLove 表白墙微信小程序 后续会继续更新,敬请期待2.0全新版本~ 欢迎添加左边的微信一起探讨! 注意: 云函数的wx-server-sdk依赖需要更新才能正常使用,这里的都是 ...
- 基于微信云开发的微信小程序之搜索功能的实现
文章目录 搜索功能的设计 代码逻辑 页面设计 效果展示 搜索功能的设计 功能描述: 该模块主要是基于云开发实现小程序搜的搜索功能.如果搜索框输入为空或直接点击搜索按钮,显示对应弹窗:如果搜索框输入内容 ...
- 用小程序·云开发打造运动圈小程序丨实战
乒乓圈小程序 和朋友合伙写了一个小程序,写了一个以共享乒乓信息和交流的平台---乒乓圈.我们使用了微信的云开发来完成数据和后台的作用.免去了租赁服务器. 我主要负责的是数据库的设计和云函数实现数据获取 ...
- 微信小程序开发之——婚礼邀请函-邀请函页面(4.3)
一 概述 "邀请函"页面说明 婚礼邀请函功能开发 效果图 二 "邀请函"页面说明 右上角有一个背景音乐播放按钮,用于控制音乐播放状态,单击按钮播放音乐,再次点击 ...
- 校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
项目最新更新介绍请看这里:https://www.cnblogs.com/LiangSenCheng/p/13040899.html 发现有问题?欢迎加我微信一起探讨,或者直接提Issues 无法下载 ...
- 用小程序·云开发打造功能全面的博客小程序丨实战
用小程序·云开发将博客小程序常用功能"一网打尽" 本文介绍mini博客小程序的详情页的功能按钮如何实现,具体包括评论.点赞.收藏和海报功能,这里记录下整个实现过程和实际编码中的一些 ...
- 从0到100: 基于微信云开发的驾校预约学车小程序
背景 随着机动车逐渐走进寻常百姓家中,学车也随之被人们提上了日程,这使得汽车驾驶培训行业得到迅猛发展.移动互联网技术的广泛应用,使手机约车成为可能,如何合理地分配已有资源,提高资源利用率,增强驾校服务 ...
- 微信小程序开发之——婚礼邀请函-项目初始化(4.2)
一 概述 tabBar组件介绍 项目初始化 项目目录结构说明 二 tabBar组件介绍 2.1 常用属性表 属性 说明 color 未选择时,底部导航文字的颜色 selectedColor 选中时,底 ...
最新文章
- python变量类型-【干货】Python基础语法之变量类型
- Java Cardioid 心脏形曲线 (整理)
- Python计算一个文件中大写字母的数量
- object overview page打开后白屏问题分析
- Flask使用Flask-SQLAlchemy操作MySQL数据库
- 开机按f12怎么恢复系统 开机按f12恢复系统
- c语言水仙花验证,[编程入门]水仙花数判断 (C语言代码)
- Kyligence李扬:数据智能推荐成为技术发展新方向
- c++ 多线程 垃圾回收器_JavaSE基础代码(3)--JavaSE程序入口,JDK,JRE,JVM垃圾回收器的关系与作用...
- org.apache.thrift.TApplicationException: Required field 'client_protocol' is unset!
- C#中的overload,overwrite,override的语义区别
- Morris 中序遍历
- 处理数据之把省市自治区这样的字眼切除
- STM32Cube MX USB双设备MSC+CDC 实现虚拟U盘+虚拟串口
- 微信支付宝个人收款方法
- Android获取系统相册图片选中地址,获取手机中的所有图片地址自定义相册
- 渗透测试工具集(非常详细),从零基础入门到精通,看完这一篇就够了(附安装)
- 三千年读史,不外乎功名利禄。九万里悟道,终归诗酒田园。
- 如何快速实现在网页中调用文档扫描仪 (2)
- 创建第一个phpstorm项目(phpstorm+Apache)