{"id":13678135,"url":"https://github.com/caochangkui/miniprogram-project","last_synced_at":"2025-04-29T12:33:39.705Z","repository":{"id":47268582,"uuid":"164041715","full_name":"caochangkui/miniprogram-project","owner":"caochangkui","description":"微信小程序，诗词大全，成语大全，百家姓，成语接龙（垃圾分类查询小程序）","archived":false,"fork":false,"pushed_at":"2020-06-19T05:59:56.000Z","size":1716,"stargazers_count":184,"open_issues_count":7,"forks_count":82,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-07T17:11:38.940Z","etag":null,"topics":["javascript","mini-program","wechat","wechat-mini-program"],"latest_commit_sha":null,"homepage":"https://www.cnblogs.com/cckui/p/10228795.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/caochangkui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-04T01:30:01.000Z","updated_at":"2024-08-07T06:54:21.000Z","dependencies_parsed_at":"2022-09-23T08:00:49.429Z","dependency_job_id":null,"html_url":"https://github.com/caochangkui/miniprogram-project","commit_stats":null,"previous_names":["caochangkui/miniprogram-food"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caochangkui%2Fminiprogram-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caochangkui%2Fminiprogram-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caochangkui%2Fminiprogram-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caochangkui%2Fminiprogram-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caochangkui","download_url":"https://codeload.github.com/caochangkui/miniprogram-project/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224173560,"owners_count":17268130,"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":["javascript","mini-program","wechat","wechat-mini-program"],"created_at":"2024-08-02T13:00:50.471Z","updated_at":"2024-11-11T20:31:03.747Z","avatar_url":"https://github.com/caochangkui.png","language":"JavaScript","readme":"## 1. 小程序功能\n\n- 古诗词大全\n- 成语大全\n- 成语接龙\n- 诗词飞花令\n- 诗词分享、收藏\n- 诗词接龙\n- 唐诗宋词起名字\n- 百家姓\n- 猜谜语\n\n\n## 2. 小程序地址\n\n[https://www.cnblogs.com/cckui/p/10228795.html](https://www.cnblogs.com/cckui/p/10228795.html)\n\n## 3. 小程序预览：\n\n\u003cbr\u003e\n\u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/cckui/1107952/o_WechatIMG732.jpg\" width=\"240\" /\u003e\n\u003cbr\u003e\n\n## 4. 部分截图\n\n####  首页\n\n\u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/cckui/1107952/o_1558438424141.jpg\" width=\"225\" height=\"400\"  /\u003e\n\n\n####  列表页\n\n\u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/cckui/1107952/o_1558438667474.jpg\" width=\"225\" height=\"400\"  /\u003e\n\n####  详情页 分享页\n\n\n\u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/cckui/1107952/o_1558438974751.jpg\" width=\"225\" height=\"400\"  /\u003e\n\n\n####  成语接龙\n\n\u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/cckui/1107952/o_1558438538843.jpg\" width=\"225\" height=\"400\"  /\u003e\n\n\n## 5. 项目结构\n\n```\n.\n├── README.md\n├── project.config.json                              // 项目配置文件\n├── cloudfunctions | 云环境                           // 存放云函数的目录\n│   ├── login                                        // 用户登录云函数\n│   │   ├── index.js\n│   │   └── package.json\n│   └── collection_get                               // 数据库查询云函数\n│   │   ├── index.js\n│   │   └── package.json\n│   └── collection_update                               // 数据库更新云函数\n│       ├── index.js\n│       └── package.json\n└── miniprogram\n    ├── images                                        // 存放小程序图片\n    ├── lib                                           // 配置文件\n    ├── pages                                         // 小程序各种页面\n    |   ├── index                                     // 首页\n    |   └── menu                                      // 分类页\n    |   └── user                                      // 用户中心\n    |   └── search                                    // 搜索页\n    |   └── list                                      // 列表页 搜索结果页\n    |   └── detail                                    // 详情页\n    |   └── collection                                // 收藏页\n    |   └── find                                      // 发现页\n    |   └── idiom-jielong                             // 成语接龙页\n    |   └── poet                                      // 作者页\n    |   └── baijiaxing                                // 百家姓\n    |   └── xiehouyu                                  // 歇后语\n    |   └── poet                                      // 作者页\n    |   └── suggest                                   // 建议反馈\n    |   └── ...                                       // 其他\n    ├── style                                         // 样式文件目录\n    ├── app.js                                        // 小程序入口文件\n    ├── app.json                                      // 全局配置\n    └── app.wxss                                      // 全局样式\n\n```\n\n## 6. 封装云函数操作数据库\n\n本项目是使用的小程序云开发。云开发提供了一个 JSON 数据库，用户可以直接在云端进行数据库增删改查，但是，小程序对用户操作数据的权限进行了一定的限制（例如数据update、一次性get记录的条数限制等），所以，这里主要采用云函数来操作数据库。\n\n### 查询数据、分页查询\n\n函数根目录上右键，在右键菜单中，选择创建一个新的 Node.js 云函数，我们将该云函数命名为 collection_get。\n\n编辑 index.js：\n\n```\n// 云函数入口文件\nconst cloud = require('wx-server-sdk')\ncloud.init()\n\nconst db = cloud.database()\n\nexports.main = async (event, context) =\u003e {\n\n  /**\n   * page: 第几页\n   * num: 每页几条数据\n   * condition： 查询条件，例如 { name: '李白' }\n   */\n\n  const {database, page, num, condition} = event\n  console.log(event)\n\n  try {\n    return await db.collection(database)\n                  .where(condition)\n                  .skip(num * (page - 1))\n                  .limit(num)\n                  .get()\n  } catch (err) {\n    console.log(err)\n  }\n}\n\n```\n\n#### 使用 collection_get 云函数\n\n例如，按照查询条件`{tags: '唐诗三百首'}`查询诗词列表，每页`num = 10`条数据:\n\n```\nlet {list, page, num} = this.data\nlet that = this\n\nthis.setData({\n    loading: true\n})\n\nwx.cloud.callFunction({\n    name: 'collection_get',\n    data: {\n        database: 'gushici',\n        page,\n        num,\n        condition: {\n            tags: '唐诗三百首'\n        }\n    },\n    }).then(res =\u003e {\n        if(!res.result.data.length) {\n            that.setData({\n                loading: false,\n                isOver: true\n            })\n        } else {\n            let res_data = res.result.data\n            list.push(...res_data)\n            that.setData({\n                list,\n                page: page + 1, // 页面加1\n                loading: false\n            })\n        }\n    })\n    .catch(console.error)\n}\n```\n\n### 更新数据\n\n注意，当我们向数据库中添加记录时，系统会自动帮我们为每条记录添加上用户的 `openid` 字段，但如果，数据表是自己用 json/csv 文件导入的，就不存在 `openid` 字段，此时，当更新这个数据表时，系统会认为你不是创建者，所以也就无法更新。\n\n此时，就需要通过云函数更新数据库，新建云函数 collection_update, 编辑 index.js:\n\n```\n// 更新数据 - 根据 _id 更新已打开人数\nconst cloud = require('wx-server-sdk')\ncloud.init()\n\nconst db = cloud.database()\nconst _ = db.command\n\nexports.main = async (event, context) =\u003e {\n\n  const { id } = event\n  console.log(event)\n\n  try {\n    return await db.collection('gushici').doc(id)\n      .update({\n        data: {\n          opened: _.inc(1)\n        },\n      })\n  } catch (e) {\n    console.error(e)\n  }\n}\n```\n\n#### 使用 collection_update 云函数\n\n更新某_id数据的打开人数：\n\n```\nlet _id = e.currentTarget.dataset.id\nwx.cloud.callFunction({\n    name: 'collection_update',\n    data: {\n        id: _id\n    },\n}).then(res =\u003e {\n    console.log(res.data)\n})\n.catch(console.error)\n```\n\n\n## 7. 数据库模糊查询\n\n小程序云开发可以使用正则表达式进行模糊查询。例如， 根据用户输入关键词，查询标题中存在改关键词的古诗词。\n\n```\nlet database = 'gushici'\nlet condition =  {\n    name: {\n        $regex:'.*'+ inputValue,\n        $options: 'i'\n    }\n}\n\nlet { list, page, num } = this.data\nlet that = this\n\nthis.setData({\n    loading: true\n})\n\n// 模糊查询\nwx.cloud.callFunction({\n    name: 'collection_get',\n    data: {\n        database,\n        page,\n        num,\n        condition\n    },\n}).then(res =\u003e {\n    if (!res.result.data.length) {\n        that.setData({\n            loading: false,\n            isOver: true\n        })\n    } else {\n        let res_data = res.result.data\n        list.push(...res_data)\n        that.setData({\n            list,\n            loading: false\n        })\n    }\n})\n.catch(console.error)\n```\n\n## 8. 使用 async/await 处理异步\n\n参考文章：[微信小程序中使用Async/await方法处理异步请求](https://www.cnblogs.com/cckui/p/10231801.html)\n\n## 9. 分享或转发功能\n\n\n小程序中页面触发转发的方式有两种：\n\n* 1.在小程序的右上角选择转发，需要定义函数 Page.onShareAppMessage，如果当前页面没有定义此事件，则点击后无效果。\n* 2.通过给 `button` 组件设置属性 `open-type=\"share\"`，可以在用户点击按钮后触发 Page.onShareAppMessage 事件，如果当前页面没有定义此事件，则点击后无效果。\n\n用户还可以在 Page.onShareAppMessage 事件中自定义转发后显示的标题、图片、路径：\n\n```\nonShareAppMessage(res) {\n    let id = wx.getStorageSync('shareId')\n    if (res.from === 'button') {\n        // 来自页面内转发按钮\n        console.log(res.target)\n    }\n    return {\n        title: `跟我一起挑战最长的成语接龙吧！`,\n        path: `pages/find/find`,\n        imageUrl: '/images/img.jpg',\n    }\n},\n```\n\n#### 注意：转发成功/失败的 callback 已经被官方废弃，所以理论上小程序是无法得知用户是否将页面分享成功的\n\n\n## 10. 用户授权\n\n详情请参考文章：[微信小程序之授权](https://www.cnblogs.com/cckui/p/10000738.html)\n\n## 11. 需要注意的几个坑\n\n### 查询不到数据\n\n数据表中明明有数据，但是 collection.get 到的却为空。解决：可以在云开发控制台中打开数据库权限设置，设置权限。\n\n### 更新数据失败\n\ncollection.update 函数调用成功单返回的却是0行记录被更新，因为小程序端不允许更新没有 openid 字段的数据。解决：可以通过云函数更新数据库。\n\n\n### background 图片 url 不能为本地图片\n\n解决：1：将图片上传到服务器，填写服务器上的图片路径地址。2：将图片转为 base64 编码。\n\n### 往云数据库中批量导入 json 数据失败\n\n原因：请看文档：[https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/import.html](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/import.html)\n\n解决：去掉json数据 `{}`之间的逗号, 如果最外层为 `[]`，也必须去掉, 最终形如：\n\n```\n{\n    \"index\": \"作者_1\",\n    \"type\": \"作者\",\n    \"poet\": \"李白\",\n    \"abstract\": \"李白（701年－762年），字太白，号青莲居士，唐朝浪漫主义诗人，被后人誉为“诗仙”...\"\n}\n{\n    \"index\": \"作者_2\",\n    \"type\": \"作者\",\n    \"poet\": \"白居易\",\n    \"abstract\": \"白居易（772年－846年），字乐天，号香山居士...\"\n}\n```\n\n---\n\n## 其他小程序作品预览：\n\n\n\u003cimg src=\"https://github.com/caochangkui/miniprogram-project/blob/master/miniprogram/images/%E5%9E%83%E5%9C%BE%E5%88%86%E7%B1%BB.png?raw=true\" width=\"320\" /\u003e\n\u003cbr\u003e\n\n\n\u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/cckui/1107952/o_code.jpg\" width=\"320\" /\u003e\n\n\n\n\n","funding_links":[],"categories":["Project"],"sub_categories":["付费课程"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaochangkui%2Fminiprogram-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaochangkui%2Fminiprogram-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaochangkui%2Fminiprogram-project/lists"}