mpvue中使用小程序云开发总结

1、前言

这两天在用踩坑了一下小程序云开发，用mpvue、vant组件库、wux组件库、小程序云开发开发了一款小程序。算是初试云开发了，因此总结一下使用上的注意事项。

2、开启云开发功能

确保你的微信开发工具是最新版的
小程序云开发文档

1. 注册一个小程序帐号

小程序云开发必须有小程序AppId才能使用，因此首先应先注册一个小程序帐号（若是已有请忽略）。记录下设置->开发设置中的小程序AppId

2. 用mpvue初始化一个项目

参考： mpvue官方文档

# 全局安装 vue-cli
$ npm install --global vue-cli

# 建立一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

2. 在微信开发者工具中新建项目

新建项目选择的目录为dist目录，而后填写刚刚注册的小程序的AppId。

打开项目以后，能够发现开发者工具中多了个云开发的按钮。点击以后，安装提示配置，就能够了。微信默认免费提供开发者一个服务器进行云开发，对于小型程序来讲是够用了。

3、正式使用云开发

1. 开发前的配置

首先在src/main.js文件添加如下语句。

wx.cloud.init({
  traceUser: true
})

必需要初始化才能使用云开发，traceUser决定是否在将用户访问记录到用户管理中，在控制台中可见。

2. 初试数据库

云开发的数据库是一个JSON数据库，这里使用了查询数据的功能。

添加数据

首先得有数据，你能够在程序里进行插入数据（提交表单时使用）（参考云开发的文档），也能够手动的在云开发控制台中插入数据。

我直接在控制台插入数据好了。

在控制台的数据库中，点击添加集合->填入集合名称->在集合中点击添加纪录->添加所需的数据。这种插入数据的方式，是不带有用户态的(openId)，若是你的权限设置是管理员可读的话，那是没办法读取到信息的，由于没有openId，没办法识别你的身份。

千万记住，要考虑你的集合数据的使用范围进行 权限设置，好比我添加的是 article文章，那这是公开的。那我就应该在权限设置中修改成 全部用户可读、仅管理员可写，默认的是 仅建立者及管理员可读写。

查询数据

mounted{
  // env是你云开发的环境id。
  const db = wx.cloud.database({ env: 'meow-helper-1b5609' })
  this.db.collection('article').get()
  .then(res=>{
    console.log(res.data)
    // 能够进行数据初始化
  })
  .cathc(console.error)
}

能够看到，使用方法很简单，固然你也可使用回调的方式查询数据，具体参考云开发文档。

3. 云开发下的登陆流程

云开发大大简化了登陆流程，由于每当有用户访问时，都会在云开发控制台留下该用户的openId。因此，我处理登陆流程以下：

• 使用<button></button>组件获取用户受权
• 使用云函数从后端返回用户openId (待会会讲如何使用云函数)
• 若是同时有openId以及用户是否受权，那么就登陆了

若用户受权了，那么你能在云开发控制台的用户管理中看到用户信息，不然只能看到一条记录以及openId

4.云函数的使用

这里讲解如何经过云函数返回用户的openId

配置云函数根目录

在/static目录下建立目录funtions，而后在project.config.json文件下新增字段

{
  "cloudfunctionRoot": "/static/functions/"
}

注意：这可能在编译后不会生效，保险起见，应在npm run dev后检查dist/project.config.json文件，看看刚刚的字段是否添加成功，若是没有，请在dist/project.config.json中也添加上述字段。

新增云函数

新增云函数这一步必须得在微信开发者工具中进行。

1. 打开开发者工具
2. 在编辑器窗口下，右键/static/funtions，选择新建Node云函数
3. 填写云函数名,如user，回车。
4. 在弹出的窗口中，会询问你是否安装wx-server-sdk，点击肯定（若是安装没有进行，能够本身手动在命令行中运行npm install）

完成以上步骤后就能够在index.js中编写云函数了。如下的云函数代码用于返回用户openId

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  return event.userInfo
}

编写完成后，必定要记得右键云函数目录，选择上传并部署以后，才能使用云函数。

使用云函数

// 调用云函数，返回用户openId，参数为云函数名称
wx.cloud.callFunction({ name: 'user' }).then(res => {
          console.log(res)
      // 更新store中的openId
          this.$store.commit('updateOpenId', res.result)
          return this.WXP.getSetting()
        })
        .then(res => {
      // 检验是否受权
          const authUserInfo = res.authSetting['scope.userInfo']
          if (authUserInfo) {
            this.$store.commit('updateAuthUserInfo', authUserInfo)
          }
        })
        .catch(err => console.error(err))

5.存储的使用

云开发的存储具备上传，下载，删除等功能，具体能够查看云开发文档。

它支持直接在<image/>,<audio/>等组件中直接使用云文件id。接下来演示一下。

首先咱们手动在云存储中上传一张图片，而后复制其fileId

在须要用到的地方引入便可：

<image src="cloud://meow-helper-1b5609.6d65-meow-helper-1b5609/img/13.png"/>

4、总结

小程序云开发是属于最近刚出来的技术，目的是为了简化小程序的开发。特别适合于业务逻辑简单，功能不复杂的小程序。对于那些好比说电商平台等业务逻辑复杂的小程序，目前来讲可能不适合了。

这个是我用云开发写的一个小程序，欢迎你们使用，提供建议。

猫叫助手 | 收录各类猫叫声，帮助与猫咪交流，分享一些养猫的小知识等。

原文连接: mpvue中小程序云开发总结|Rychou

5、分享个小程序

这是我近期使用Taro开发框架开发的一款小程序，主要功能是提供可靠的书架管理功能，只须要扫一扫书籍背后的条形码便可添加书籍入库，你能够方便的在线上管理你的书架，查看书籍的基本信息，亦能够添加书评。

该项目得到了微信小程序 U 计划的资助。目前项目正在开发中，欢迎你们体验反馈。