小程序云开发初体验

原创

Thor

修改于 2020-05-19 17:47:25

1.1K0

修改于 2020-05-19 17:47:25

文章被收录于专栏：云上服务云上服务

微信小程序有提供云开发的支持，这次尝试使用这种方式开发一个类似pasterbin的微信小程序。

支持粘贴代码在微信中分享，可以避免直接通过聊天框发送代码时被截断，且显示效果不佳的问题。

小程序最终大概是长这样的：

功能分析

核心功能就两点：

有一个输入框可以粘贴代码文本，然后调用云函数将内容保存到云数据库中
根据id查询到数据库中的代码片段，然后用markdown渲染语法高亮显示出来

小程序端的UI交互逻辑不提，在云端执行的就是两个云函数：

createSnippet：代码片段入库
getSnippet：读取代码片段

创建项目

在微信开发者工具创建项目时，需要选择上小程序-云开发这一项，然后按照后续的步骤完成项目的创建，中间的过程会有点长，需要在微信开发者平台上完成个人的身份认证等等，在创建完成之后点击开发者工具中的云开发按钮，可以看到相关的信息：

这里我们主要就使用数据库和云函数两个功能。

使用小程序账号登录腾讯云的web控制台也可以看到并操作相关的资源，https://console.cloud.tencent.com/ ：

创建数据库集合

在开发者工具的云开发控制台中先创建数据库集合,这里的数据库和集合的概念和monogdb基本一致，了解过mongodb的同学马上就能理解:

创建云函数

在开发者工具中新建新云函数

我们需要以下两个云函数，代码都非常简单

createSnippet，保存代码片段

'use strict';
const cloud = require('wx-server-sdk')
cloud.init({})
exports.main = async(event, context) => {
    console.log("create a new snippet")
    let codeText = event["code"]
    console.log(`code: ${codeText}` )
    const db = cloud.database()
    //保存代码到数据库中
    let res = await db.collection("snippet").add({
       data: {
           code: codeText
       }
    })
    console.log(res)
    return res
};

getSnippet，读取代码片段

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

// 云函数入口函数
exports.main = async (event, context) => {
  console.log('get snippet:', event['id'])
  const db = cloud.database()
  let res = await db.collection("snippet").doc(event['id']).get()
  console.log('get snippet:', res)
  return res
}

这里需要注意的时，由于我们使用到了云环境的资源，在代码中必须先调用 cloud.init()方法来做初始化。

小程序调用云函数

提交代码片段：

wx.cloud.callFunction({
      //云函数名称
      name: 'createSnippet',
      //云函数的参数
      data: {
        code: this.data.codeText,
      },
      success: res => {
        console.log('[云函数] [createSnippet] 调用成功：', res)
        let snippetId = res.result._id
        console.log('snippetId:', snippetId)
        //调用成功之后跳转到显示页面
        wx.hideLoading({
          complete: (res) => {
            wx.navigateTo({
              url: `/pages/view/view?_id=${snippetId}`,
            })
          }
        })

      },
      fail: err => {
        wx.hideLoading({
          complete: (res) => {
            wx.showToast({
              icon: 'none',
              title: '调用失败',
            })
          },
        })
        console.error('[云函数] [createSnippet] 调用失败：', err)
      }
    })

读取代码片段：

wx.cloud.callFunction({
      name: 'getSnippet',
      data: {
        id: _id,
      },
      success: res => {
        console.log('[云函数] [getSnippet]  调用成功：', res)
        //显示逻辑
        wx.hideLoading()
      },
      fail: err => {
        console.error('[云函数] [getSnippet]  调用失败：', err)
      }
    })