云开发

云开发基础

云开发是微信团队联合腾讯云提供的原生 Serverless 云服务，致力于帮助更多的开发者快速实现小程序业务的开发，怏速迭代。

云开发 VS 传统开发

传统模式

产品经理 → 后端开发 → 部署上线 → 前端开发 → 正式发布

云开发

产品经理 → 前端开发 → 正式发布

---

---

云开发能力

• 存储：在小程序端直接上传/下载云端文件，可视化管理

• 云函数：在云端运行的代码，微信私有天然鉴权，开发者只需编写自身业务逻辑代码

• 云数据库：一个既可在小程序前端操作，也能在云函数中读写的JSON数据库

• 音视频服务：提供互通高品质实时音视频通话服务，支持互动白板，美颜滤镜，高清视频通话等，基于云开发快速接入

• 智能图像服务：集成智能鉴黄、人脸识别、人脸识别、人脸核身等AI视觉能力，基于云开发怏速接入。

数据存储能力

一行代码创建数据

一行代码查询数据

云开发 API

初始化

小程序

服务端

初始化选项 env 支持传入一个 Object，指定服务使用的默认环境

注意事项

• 云开发 API 同时支持callback 风格和promise 风格
• 云开发 API 初始化时如果没有设置 ID，默认使用先创建的那个
• 在服务端可以借助云开发 SDK 内置的 getWXContext 来获取到用户的身份信息

数组查询

字段查询

正则查询

地理位置索引

减少开发压力，只需要一个字段。

文件存储

存储于云端，可以生成临时链接。

云函数定时触发器

{
   "Type":"Timer",
   "TriggerName":"EveryDay",
   "Time":"2019-02-21T11:49:00Z",
   "Message":"user define msg body"
}

Todo项目实战

Vant UI

导入Vant UI

//安装
npm i vant

//初始化
npm init -y

//安装组件
npm i @vant/weapp@1.3.3 -S --production

​ 删除app.json中的"style":"v2"。防止微信中的样式与 vant 中的样式发生冲突。

在project.config.json中的setting节点中修改以下两项：

"packNpmManually": true,
"packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
]

构建 npm

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

---

组件引入

"usingComponents": {
    "vant-button" : "@vant/weapp/button",
    "van-cell" : "@vant/weapp/cell",
    "van-cell-group" : "@vant/weapp/cell-group"
  }

下拉刷新

index.json

"enablePullDownRefresh": true

index.js

onPullDownRefresh:function(){
    this.getdata();
    wx.stopPullDownRefresh()
  },

选择位置

app.json

"requiredPrivateInfos": [
    "chooseLocation"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口"
    }
  }

addtodo.js

chooseLocation:function(){
  wx.chooseLocation({
    latitude: 0,
    longitude: 0,
    success: res => {
      console.log(res)
      let LocationObj = {
        latitude:res.latitude,
        longitude:res.longitude,
        name:res.name,
        address:res.address
      }
      this.pagedata.LocationObj = LocationObj
    },
    fail: (res) => {
      console.log(res)
    },
    complete: (res) => {
      console.log(res)
    },
  })
}

导航

todoInfo.js

viewLocation:function(){
    wx.openLocation({
      latitude: this.data.task.location.latitude,
      longitude: this.data.task.location.longitude,
      address: this.data.task.location.address,
      name: this.data.task.location.name,
      scale: 0,
      success: (res) => {},
      fail: (res) => {},
      complete: (res) => {},
    })
  }

注意传送LocationObj对象