{"id":13678051,"url":"https://github.com/Rychou/mpvue-cloud","last_synced_at":"2025-04-29T12:33:03.409Z","repository":{"id":96293798,"uuid":"152521726","full_name":"Rychou/mpvue-cloud","owner":"Rychou","description":"mpvue和云开发写的一款小程序，踩坑记录","archived":false,"fork":false,"pushed_at":"2018-10-11T03:03:20.000Z","size":1043,"stargazers_count":75,"open_issues_count":1,"forks_count":23,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-08-02T13:20:12.292Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Rychou.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-11T02:53:36.000Z","updated_at":"2024-06-19T11:31:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"4e3b573d-2b78-4942-82f2-2f4bd5ffefda","html_url":"https://github.com/Rychou/mpvue-cloud","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rychou%2Fmpvue-cloud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rychou%2Fmpvue-cloud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rychou%2Fmpvue-cloud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rychou%2Fmpvue-cloud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rychou","download_url":"https://codeload.github.com/Rychou/mpvue-cloud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224173463,"owners_count":17268117,"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":[],"created_at":"2024-08-02T13:00:49.696Z","updated_at":"2024-11-11T20:30:53.288Z","avatar_url":"https://github.com/Rychou.png","language":"JavaScript","funding_links":[],"categories":["Project"],"sub_categories":["付费课程"],"readme":"# 一、前言\n\n这两天在用踩坑了一下小程序云开发，用mpvue、vant组件库、wux组件库、小程序云开发开发了一款小程序。算是初试云开发了，所以总结一下使用上的注意事项。\n\n这个是我用云开发写的一个小程序，欢迎大家使用，提供建议。\n\n 猫叫助手 | 收录各种猫叫声，帮助与猫咪交流，分享一些养猫的小知识等。\n\n![猫叫助手](https://camo.githubusercontent.com/32afa7cb4169b88b97df5fc509efbc0f70429e45/68747470733a2f2f692e6c6f6c692e6e65742f323031382f31302f31302f356262646130613938396439652e6a7067)\n\n\n# 二、开启云开发功能\n\n\u003e 确保你的微信开发工具是最新版的\n\u003e [小程序云开发文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)\n\n### 1. 注册一个小程序账号\n\n小程序云开发必须有小程序AppId才能使用，所以首先应先注册一个小程序账号（如果已有请忽略）。记录下`设置-\u003e开发设置`中的小程序`AppId`\n\n### 2. 用`mpvue`初始化一个项目\n\n\u003e参考：[mpvue官方文档](http://mpvue.com/mpvue/)\n\n```shell\n# 全局安装 vue-cli\n$ npm install --global vue-cli\n\n# 创建一个基于 mpvue-quickstart 模板的新项目\n$ vue init mpvue/mpvue-quickstart my-project\n\n# 安装依赖\n$ cd my-project\n$ npm install\n# 启动构建\n$ npm run dev\n```\n\n### 2. 在微信开发者工具中新建项目\n\n新建项目选择的目录为`dist`目录，然后填写刚刚注册的小程序的`AppId`。\n\n打开项目之后，可以发现开发者工具中多了个云开发的按钮。点击之后，安装提示配置，就可以了。微信默认免费提供开发者一个服务器进行云开发，对于小型程序来说是够用了。\n\n# 三、正式使用云开发\n\n### 1. 开发前的配置\n\n首先在`src/main.js`文件添加以下语句。\n\n```js\nwx.cloud.init({\n  traceUser: true\n})\n```\n\n必须要初始化才能使用云开发，`traceUser`决定是否在将用户访问记录到用户管理中，在控制台中可见。\n\n### 2. 初试数据库\n\n云开发的数据库是一个`JSON`数据库，这里使用了查询数据的功能。\n\n**添加数据**\n\n首先得有数据，你可以在程序里进行插入数据（提交表单时使用）（[参考云开发的文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html)），也可以手动的在云开发控制台中插入数据。\n\n我直接在控制台插入数据好了。\n\n在控制台的数据库中，`点击添加集合-\u003e填入集合名称-\u003e在集合中点击添加纪录-\u003e添加所需的数据`。这种插入数据的方式，是不带有用户态的(`openId`)，如果你的权限设置是管理员可读的话，那是没办法读取到信息的，因为没有openId，没办法识别你的身份。\n\n![未命名1539162118.png](https://i.loli.net/2018/10/10/5bbdc013b0a56.png)\n\n\u003e 千万记住，要考虑你的集合数据的使用范围进行`权限设置`，比如我添加的是`article`文章，那这是公开的。那我就应该在权限设置中修改为`所有用户可读、仅管理员可写`，默认的是`仅创建者及管理员可读写`。\n\u003e ![img](https://i.loli.net/2018/10/10/5bbdc14657bc5.png)\n\n**查询数据**\n\n```js\nmounted{\n  // env是你云开发的环境id。\n  const db = wx.cloud.database({ env: 'meow-helper-1b5609' })\n  this.db.collection('article').get()\n  .then(res=\u003e{\n    console.log(res.data)\n    // 可以进行数据初始化\n  })\n  .cathc(console.error)\n}\n```\n\n可以看到，使用方法很简单，当然你也可以使用回调的方式查询数据，具体参考云开发文档。\n\n### 3. 云开发下的登录流程\n\n云开发大大简化了登录流程，因为每当有用户访问时，都会在云开发控制台留下该用户的`openId`。所以，我处理登录流程如下：\n\n- 使用`\u003cbutton\u003e\u003c/button\u003e`组件获取用户授权\n- 使用云函数从后端返回用户`openId` (待会会讲如何使用云函数)\n- 如果同时有`openId`以及用户是否授权，那么就登录了\n\n若用户授权了，那么你能在云开发控制台的用户管理中看到用户信息，否则只能看到一条记录以及`openId`\n\n![未命名1539170221.png](https://i.loli.net/2018/10/10/5bbddfb7a81c9.png)\n\n### 4.云函数的使用\n\n这里讲解如何通过云函数返回用户的`openId`\n\n**配置云函数根目录**\n\n在`/static`目录下创建目录`funtions`，然后在`project.config.json`文件下新增字段\n\n```json\n{\n  \"cloudfunctionRoot\": \"/static/functions/\"\n}\n```\n\n注意：这可能在编译后不会生效，保险起见，应在`npm run dev`后检查`dist/project.config.json`文件，看看刚刚的字段是否添加成功，如果没有，请在`dist/project.config.json`中也添加上述字段。\n\n**新增云函数**\n\n新增云函数这一步必须得在微信开发者工具中进行。\n\n1. 打开开发者工具\n2. 在编辑器窗口下，右键`/static/funtions`，选择新建Node云函数\n3. 填写云函数名,如`user`，回车。\n4. 在弹出的窗口中，会询问你是否安装`wx-server-sdk`，点击确定（如果安装没有进行，可以自己手动在命令行中运行`npm install`）\n\n完成以上步骤后就可以在`index.js`中编写云函数了。以下的云函数代码用于返回用户`openId`\n\n```js\n// 云函数入口文件\nconst cloud = require('wx-server-sdk')\n\ncloud.init()\n\n// 云函数入口函数\nexports.main = async (event, context) =\u003e {\n  return event.userInfo\n}\n```\n编写完成后，一定要记得右键云函数目录，选择上传并部署之后，才能使用云函数。\n\n**使用云函数**\n\n```js\n// 调用云函数，返回用户openId，参数为云函数名称\nwx.cloud.callFunction({ name: 'user' }).then(res =\u003e {\n          console.log(res)\n\t  // 更新store中的openId\n          this.$store.commit('updateOpenId', res.result)\n          return this.WXP.getSetting()\n        })\n        .then(res =\u003e {\n\t  // 检验是否授权\n          const authUserInfo = res.authSetting['scope.userInfo']\n          if (authUserInfo) {\n            this.$store.commit('updateAuthUserInfo', authUserInfo)\n          }\n        })\n        .catch(err =\u003e console.error(err))\n```\n\n### 5.存储的使用\n\n云开发的存储具有上传，下载，删除等功能，具体可以查看[云开发文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html)。\n\n它支持直接在`\u003cimage/\u003e`,`\u003caudio/\u003e`等组件中直接使用云文件id。接下来演示一下。\n\n首先我们手动在云存储中上传一张图片，然后复制其`fileId`\n![未命名1539172169.png](https://i.loli.net/2018/10/10/5bbde7553e963.png)\n\n在需要用到的地方引入即可：\n\n```html\n\u003cimage src=\"cloud://meow-helper-1b5609.6d65-meow-helper-1b5609/img/13.png\"/\u003e\n```\n\n# 四、总结\n\n小程序云开发是属于最近刚出来的技术，目的是为了简化小程序的开发。特别适合于业务逻辑简单，功能不复杂的小程序。对于那些比如说电商平台等业务逻辑复杂的小程序，目前来说可能不适合了。\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRychou%2Fmpvue-cloud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRychou%2Fmpvue-cloud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRychou%2Fmpvue-cloud/lists"}