{"id":13603954,"url":"https://github.com/wei-zone/wedding-app","last_synced_at":"2025-04-11T22:32:24.631Z","repository":{"id":36372220,"uuid":"285001264","full_name":"wei-zone/wedding-app","owner":"wei-zone","description":"Taro + 云开发 打造婚礼邀请函","archived":false,"fork":false,"pushed_at":"2023-07-04T03:29:40.000Z","size":14146,"stargazers_count":72,"open_issues_count":0,"forks_count":14,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T19:04:04.313Z","etag":null,"topics":["redux","taro","taro2","wechat-mini-program","wechat-weapp","wedding-invitation","weui"],"latest_commit_sha":null,"homepage":"https://blog.csdn.net/WEIGUO19951107/article/details/88411078","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wei-zone.png","metadata":{"files":{"readme":"Readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-08-04T14:15:31.000Z","updated_at":"2025-03-13T12:55:24.000Z","dependencies_parsed_at":"2024-01-19T10:23:30.630Z","dependency_job_id":null,"html_url":"https://github.com/wei-zone/wedding-app","commit_stats":null,"previous_names":["wei-zone/wedding-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wei-zone%2Fwedding-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wei-zone%2Fwedding-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wei-zone%2Fwedding-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wei-zone%2Fwedding-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wei-zone","download_url":"https://codeload.github.com/wei-zone/wedding-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154981,"owners_count":21056543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["redux","taro","taro2","wechat-mini-program","wechat-weapp","wedding-invitation","weui"],"created_at":"2024-08-01T19:00:37.166Z","updated_at":"2025-04-11T22:32:19.618Z","avatar_url":"https://github.com/wei-zone.png","language":"JavaScript","funding_links":[],"categories":["开源项目"],"sub_categories":["Taro2"],"readme":"\n\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"https://github.com/wforguo/wedding-app\" title=\"趣婚礼\"\u003e趣婚礼\u003c/a\u003e\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"趣婚礼 Logo\" src=\"https://forguo-1302175274.cos.ap-shanghai.myqcloud.com/wedding/assets/img/qrcode.jpeg\" width=\"180\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/wforguo/wedding-app\" title=\"趣婚礼\"\u003e基于Taro2 + 云开发 打造婚礼邀请函\u003c/a\u003e\n\u003c/p\u003e\n\n有问题请issue\n\n## 项目名称\n\n- 趣婚礼\n\n- 基于`Taro2` + 云开发 打造婚礼邀请函\n\n\u003e [Taro2](https://taro-docs.jd.com/taro/docs/2.2.11/README)\n\n\u003e [云开发](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)\n\n## 项目介绍\n\n- 结婚的时候婚礼邀请函是一道必不可少的程序，但是没法去很好的留存我们的数据和回忆（除非有后端支持）。\n最近刚好在学习`Taro`，所有就尝试基于`Taro` + 云开发快速的搭建一个婚礼邀请函小程序。\n\n- 也有人会问，使用了云开发，怎么去管理数据呢，不用担心，云开发`CMS`帮你搞定，支持文本、富文本、图片、文件、关联类型等多种类型的可视化编辑。\n\n[CMS 概览](https://docs.cloudbase.net/cms/intro)\n\n## 项目效果截图\n\n#### 模块划分\n\n1. 邀请 =》邀请函信息\n2. 相册 =》相册展示\n3. 导航 =》婚礼举办地\n4. 祝福 =》婚礼视频及弹幕留言，留言保存至留言列表\n5. 留言 =》好友留言\n\n#### 目录结构\n\n```\n├── config                              # 配置文件\n├── cloud                               # 云函数存放\n├── dist                                # 打包文件\n├── node_modules                        # 依赖的模块包\n├── package.json                        # 项目基本信息\n├── src                                 # 项目的核心组件\n│   ├── service                         # 资源文件（css、image、config）\n│   ├── common                          # 资源文件（css、image、config）\n│   ├── components                      # 公共组件\n│   ├── store                           # 状态管理（redux）\n|   ├── pages                           # 页面文件目录\n|   |   ├── Index                       # index页面目录\n|   |   |   ├── index.jsx               # index页面逻辑\n|   |   |   └── index.scss              # index页面样式\n|   |   |   └── index.config.js         # index页面配置（小程序page.json内容）\n│   ├── util                            # 公共方法(util.js、globalData.js)\n│   ├── app.jsx                         # 入口文件\n│   ├── app.scss                        # 公共样式\n│   ├── index.html                      # 主页模板\n├── static                              # 静态资源(CDN)\n├── README.md                           # 项目描述信息\n\n```\n\n#### 效果预览\n\n![云开发入口](https://7765-wedding-wxapp-1302175274.tcb.qcloud.la/wedding/imgs/preview.jpg)\n\n#### 视频演示\n\n[视频演示](https://7765-wedding-wxapp-1302175274.tcb.qcloud.la/wedding/imgs/show.mp4)\n\n## 部署\n\n#### clone\n\n`clone`该项目，并在`project.config.json`下修改自己的小程序`appid`\n\n#### 开通云开发\n\n![环境名称](https://7765-wedding-wxapp-1302175274.tcb.qcloud.la/wedding/imgs/db-id.png)\n\n首先需要你在小程序的控制台去开通云开发，并拿到环境名称\n\n在`src/service/config`下修改`DBID`为你自己申请的环境ID`；\n\n#### 新建数据库并导入\n\n##### \n\n表的设计\n\n- wedding_invite：婚礼信息\n\n- wedding_msgs：留言祝福\n\n- wedding_photos：相册\n\n- wedding_video：视频\n\n数据库文件存放在`static/db`下，按照文件名新建数据库集合，并导入数据文件即可完成数据库创建。\n\n#### 项目启动\n\n- 使用`yarn`\n\n安装依赖\n\n```bash\nyarn\n```\n编译和打包\n\n```bash\n yarn dev:weapp\n yarn build:weapp\n```\n\n- 使用`npm`\n\n安装依赖\n\n```bash\n npm install\n```\n编译和打包\n\n```bash\n npm run dev:weapp\n npm run build:weapp\n```\n\n具体可查看`Taro`教程\n\n到此你就可以看到效果了...\n\n#### 云开发CMS的使用\n\n\u003e 用于管理云开发数据的CMS\n  \n[CMS文档](https://docs.cloudbase.net/cms/intro)\n\n#### CMS截图\n\n##### CMS Web端\n\n**CMS端需要建立与数据库对应的内容模型，才能在列表正常展示对应数据库数据。**\n\n\u003e 可直接导入内容模型，位于 static/schema\n\n- 模型管理\n\n![CMS](https://cdn.nlark.com/yuque/0/2021/png/1088766/1632221818600-590d45cd-1970-4530-8e21-9fe1532fc761.png)\n\n- 内容管理\n\n![CMS](https://cdn.nlark.com/yuque/0/2021/png/1088766/1632221668534-53cc5780-08c1-4a14-add4-ced80cb8cfb1.png)\n\n##### 开发者工具端\n\n![云开发](https://7765-wedding-wxapp-1302175274.tcb.qcloud.la/wedding/imgs/cloud.png)\n\n圈出来的部分是和小程序云开发控制台数据库所对应的.\n\n## 技术及框架\n\n### 1.小程序\n\n具体入门和使用，请访问官方文档。\n\n*  [小程序文档](https://developers.weixin.qq.com/miniprogram/dev)\n*  [小程序云开发](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)\n\n\u003e 开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。包含云函数\t、数据库、存储和云调用。\n\n### 2.Taro2 + Redux\n\n[Taro2](https://taro-docs.jd.com/taro/docs/2.2.11/README)\n\n\u003e Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。\n\n项目中使用了最新版本`Taro2`，由于`Taro3`使用期间不是很丝滑，所以选择了`Taro2`\n\n**所以本项目可以作为Taro的学习入门，也可以作为小程序云开发的一个入门Demo**\n\n### 3.TaroUI\n\n基于Taro2的UI框架\n\n[TaroUI](https://taro-ui.jd.com/#/docs/introduction)\n\n## 云开发的使用\n\n[官方文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/getting-started.html)\n\n**需要在控制台去开启云开发，并获取DBID（数据库初始化用到）**\n\n* 1. 云开发入口\n![云开发入口](https://forguo-1302175274.cos.ap-shanghai.myqcloud.com/enter.png)\n\n* 2. 数据库配置\n![云开发](https://forguo-1302175274.cos.ap-shanghai.myqcloud.com/cloud.png)\n\n### 数据库\n\n可以在项目中的service中去查看数据库的CURD代码。\n\n有数据库基础的很容易就上手了，小程序的数据库其实就是一个`JSON`，类似于`MongoDb`。\n\n\u003e 顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。\n\n#### 操作\n\n- 初始化\n\n在开始使用数据库 API 进行增删改查操作之前，需要先获取数据库的引用。\n\n```js\nconst db = Taro.cloud.database({\n    env: 'DBID'\n});\n```\n\n- 数据库操作\n\n\u003e 要操作一个集合，需先获取它的引用。在获取了数据库的引用后，就可以通过数据库引用上的 collection 方法获取一个集合的引用了\n\n```js\ndb.collection('wedding_msgs')\n   .orderBy('createTime', 'desc') // 时间升序\n   .skip(current * 10)\n   .limit(pageSize)\n   .get()\n```\n这样每次都比较麻烦，所以我做了统一的处理，都写在`service/cloud/index.js`当中，并export，只需要按需引入，并传入要操作的数据库名称即可。\n\n![云数据库](https://forguo-1302175274.cos.ap-shanghai.myqcloud.com/wedding/assets/img/db_function.png)\n\n**Tips：如果发现数据库有数据，但是拿不到所有数据，那应该就是数据库的权限问题了，改成仅创建者可写，所有人可读就可以了**\n\n### 云函数\n\n[官方文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html)\n\n使用云函数去获取用户信息就变得简单多了，具体可翻阅文档！\n\n项目中云函数所在目录，`cloud/functions.js`，项目中使用到了一个云函数，留言的内容过滤功能`msgSecCheck`，\n具体使用方法：[security.msgSecCheck](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.msgSecCheck.html)\n\n- 声明\n\n```js\n/**\n * @Description: 文本内容过滤；\n*/\n// 云函数入口文件\nconst cloud = require('wx-server-sdk');\n\ncloud.init();\n\n// 云函数入口函数\nexports.main = async function (event, context) {\n    console.log(event);\n    let opts = {\n        content: event.content || ''\n    };\n    let fun = cloud.openapi.security.msgSecCheck(opts);\n\n    return fun.then(res =\u003e {\n        return res;\n    }).catch(err =\u003e {\n        return err;\n    });\n};\n\n```\n\n- 调用\n\n```js\n    // 云调用内容安全过滤\n    Taro.cloud.callFunction({\n      name: 'msgCheck',\n      data: { content: data.userMsg },\n    }).then(res =\u003e {\n      if (res \u0026\u0026 res.result \u0026\u0026 res.result.errCode === 0) {\n          Taro.showLoading({\n              title: '发送中...',\n              mask: true\n          });\n          // 数据库插入留言数据\n          cloud.add('wedding_msgs', data).then(msgRes =\u003e {\n              resolve(msgRes);\n          }, (err) =\u003e {\n              console.log(err);\n              reject(err);\n          });\n      } else {\n          reject(res.result);\n      }\n    }).catch(err =\u003e {\n      console.log(err);\n      reject(err);\n    });\n```\n\n## ToDos\n\n- [x] 朋友圈海报生成...\n- [x] ...\n\n这次的版本使用了Taro + 云开发，后面打算出一版`Taro + Antd + koa2 + MongoDb`的版本，初步内容已经差不错了，详见下面项目地址\n\n[Taro + Antd + koa2 + MongoDb](https://github.com/wforguo/wedding)\n\n## Taro3的坑\n\n- redux使得下拉刷新和上拉加载冲突\n\n- 无法阻止事件冒泡\n\n- 无法使用 小程序的`selectComponent`，获取组件实例\n\n`const barrageComp = this.selectComponent('.barrage')` 使用 `Taro.createRef();` 代替\n\n## 关于\n\n\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"https://forguo-1302175274.cos.ap-shanghai.myqcloud.com/wedding/assets/img/wechart.jpg\" title=\"微信：iforguo\"\u003e微信：iforguo\u003c/a\u003e\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"微信：iforguo\" src=\"https://forguo-1302175274.cos.ap-shanghai.myqcloud.com/wedding/assets/img/wechart.jpg\" width=\"480\"\u003e\n\u003c/p\u003e\n\n- [个人主页](https://www.forguo.cn)\n- [CSDN](https://blog.csdn.net/WEIGUO19951107/article/details/88411078)\n- [掘金](https://juejin.im/post/6844904015793242120)\n\n---\n\n本项目仅供学习和交流，部分素材来源于网络，如有侵权联系删除。\n项目有需改进也请留言和Issues，\n如有合作请在[博客](https://blog.csdn.net/WEIGUO19951107/article/details/88411078)留言或wx：（`iforguo`）。\n\n---\n\n编码不易，感谢各位大佬的吐槽和[GitHub](https://github.com/wforguo/wedding-app)的Star\n\n\n有问题请issue【这样也方便别人查阅】\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwei-zone%2Fwedding-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwei-zone%2Fwedding-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwei-zone%2Fwedding-app/lists"}