小程序云开发实践

1.微信小程序云开发使用背景

在之前我未实际接触,小程序云开发时,就凭我一点点印象,一直以为他是一个相当于mock数据的一个功能。方便前端工程人员,快速的根据文档建立mock的API(CGI)然后进行开发。以提高开发效率,实际了解之后,他们之间既有相似之处,但更多的是不同的地方。

1.1 数据存储的扩展
由于小程序本身存储数据的能力有限,所以不可能将大量的数据保存在客户端,而且将数据保存在本地既不安全,也无法与其他小程序用户共享,所以大多数小程序都需要一个服务端,服务端可以用多种技术实现,如 PHP、Node.js、 等。不管使用哪种技术实现服务端,都增加了开发的复杂度
1.2后端业务的相似性
微信小程序云开发,就是将服务端的功能都封装起来,然后向客户端提供 API (CGI)访问这些封装的功能。服务端的主要功能无外乎数据存储、文件上传下载、视频/音频流等功能。这些功能大多开发其业务逻辑很多是相通,复用性较强,但比较费时,所以将其封装起来供客户端调用,这样可以提高开发效率,同时也减少了开发成本。

2.云开发的使用

那些简单的开通什么的就不说了,从较为复杂的说起。
2.1 如果不使用构建工具,直接开始项目,我感觉上手会容易很多,毕竟,微信小程序可以直接创建一个云开发小程序模板,然后看着文档依葫芦画瓢即可。
2.2 在上手项目构建,我是使用webpack4作为小程序的构建工具,毕竟其实改动也没多大,就是方便了wxss,用scss语法而已,这样用构建工具构建项目的时候很多地方就要注意。一、把小程序入口目录、插件目录、云函数目录拆出来,并在project.config.json里面加**“miniprogramRoot”: “miniprogram/”,
“cloudfunctionRoot”: “cloudfunctions/”,**这二个配置项,一个指定小程序根目录一个指云函数根目录,这样打包小程序的时候就不会把云函数文件打进去,而且如果不这么搞,微信开发者工具,下面会出现好几个黄色警告,这个很不舒服。
2.3 部署云函数,这部分可以用小程序开发工具那边创建的模板的login云函数去体验,学习,按文档指引即可。

2.4 体验完了之后就要进入正题了,创建云函数

一个云函数基本包括这三个文件config.json,package.json,index.js.config其中,config.json和package.json不是必要的文件,前一个是为做定时触发器的配置文件而存在,而后一个这是本地使用调试云函数,npm下载依赖‘wx-server-sdk’而存在。
2.4.1 const cloud = require('wx-server-sdk')
基本上是每个云函数都有的一条语句,提供了云函数的整个基础能力(本地调试)

当开发者直接使用小程序开发工具点击云开发模板,他实例的每个云函数都有的一条语句,提供了云函数的整个基础能力(本地调试),实际开发中没有这个也是可以的,也就是意味着你的云函数当中没有要依赖wx-server-sdk的功能。

如下2个实例代码:

// const cloud = require('wx-server-sdk')

// // 初始化 cloud
// cloud.init({
//   // API 调用都保持和云函数当前所在环境一致
//   env: cloud.DYNAMIC_CURRENT_ENV
// })
let a = 0;
let b = 1;

exports.main = (event, context) => {
    return{
        sum : a+b ,
    }
}
const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})
let a = 0;
let b = 1;

exports.main = (event, context) => {
    return{
        sum : a+b ,
    }
}

其结果一直 输出为{sum:1}

如果用了wx-server-sdk初始化云,基本上也是创建云函数的标配

cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

所以wx-server-sdk是什么?

2.4.2云函数的入口函数

相当于是对应了c语言中的main函数,里面些基本业务逻辑其实和es6没什么差别。

//异步输出
exports.main = async (event, context) => {
  //主要逻辑
}
//同步输出
exports.main = (event, context) => {
  //主要逻辑
}

基本上云函数的创建就是这样。在小程序端调用也很简单。
首先需要在app.js中进行云函数调用的初始化

if (!wx.cloud) {
    console.error('请使用 2.2.3 或以上的基础库以使用云能力')
   } else {
     wx.cloud.init({
       // env 参数说明:
       //   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
       //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
       //   如不填则使用默认环境(第一个创建的环境)
       env: 'test-ba05b',
       traceUser: true,
     })
}

实例如下:

  //事件调用区域
  onGetOpenid() {
    // 调用云函数
    wx.cloud.callFunction({
      name: 'login',//这里是云函数的名字,基本上也就对应创建的云函数的文件夹名
      data: {},
      success: res => {
        wx.showModal({
          title: '提示(opendid)',
          content: `${res.result.openid}`,
          success (res) {
            if (res.confirm) {
              wx.cloud.callFunction({
                name:"test",
                data:{},
              }).then((res)=>{
                console.log(res.result)
              })
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
        console.log(res.result)
        //console.log('[云函数] [login] user openid: ', res.result.openid)
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
      }
    })
  },

还有一个注意点就是云端部署更新同名云函数并不需要先删除在上传,文件更新直接上传即可

2.4.3 数据库的使用

其实我个人认为啊,小程序云开发,应该把云函数初步使用放在数据库的前面,虽然我熟悉整个云开发,觉得云开发中的云函数主要就是为数据库服务的,但是,云函数也能写不依赖数据库的公共业务放在云端,不过好像这样做意义不大,但是能够让入手的开发者快速掌握云函数。这样在熟悉云函数和数据库关联开发的时候就更加简单。

以下代码是直接在某个页面的js中调用的,也就是使用到了数据库的增

db.collection('todos').add({
    data: {
      id: 1,
      openid:'fsdfsafdsaf',
      todoname:"代办事项二"
    },
    success: res => {
      // 在返回结果中会包含新创建的记录的 _id
      wx.showToast({
        title: '新增记录成功',
      })
      console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
    },
    fail: err => {
      wx.showToast({
        icon: 'none',
        title: '新增记录失败'
      })
      console.error('[数据库] [新增记录] 失败:', err)
    }
  })
},

直接在使用云函数,比如创建一个add云函数,使用云函数进行数据添加实例代码如下:

const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
    const db = cloud.database();
    let message = await db.collection('todos').add({
        data: event,
    })
    return message;
}

然后直接调用这个云函数

//使用云函数进行数据库操作
wx.cloud.callFunction({
  name:"test",
  data:{
    id: 3,
    openid:'fsdfsafdsaf',
    todoname:"代办事项三"
  }
}).then(res=>{
  console.log(res.result)//然后根据res.result 的errCode来判断是否上传成功
})

备注:# 云开发 quickstart

这是云开发的快速启动指引,其中演示了如何上手使用云开发的三大基础能力:

  • 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 文档型数据库
  • 文件存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
  • 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写业务逻辑代码
参考文档
  • 云开发文档

你可能感兴趣的:(小程序类,前端大杂烩,前端)