微信小程序云开发功能实践

前言

前端开发者在进行小程序开发时，总是需要接触到小程序服务端的开发，如openId的获取、生成小程序码、微信支付等。这些功能必须要搭配后端服务进行开发的，这就可能会导致前端开发者不得不去接触、学习后端的开发语言：如Java、Python、PHP等，产生了额外的学习成本。

小程序的云开发功能为前端开发者带来了福音，云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的API进行核心业务开发，即可实现快速上线和迭代。同时该能力与开发者已使用的云服务并不互斥。

这里是重点，圈起来要考！

小程序云开发基础能力

小程序的云开发为我们提供了：云函数、数据库、存储、云调用，四大基础能力。

能力	作用	说明
云函数	无需自建服务器	在云端运行代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
数据库	无需自建数据库	一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储	无需自建存储和 CDN	在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
云调用	原生微信服务集成	基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力

小程序云开发实践

一、创建小程序云开发项目

注意：小程序云开发项目与普通的小程序项目结构是不一样的（我们不一样，不一样，自行脑补节奏）。

kanshu/ 项目目录
  - cloudfunctions/ 云函数目录
    - saveOpenId/ 任意云函数
      - index.js
      - package.json
  - miniprogram/ 小程序端
    - pages/ 页面目录
      - index/ 首页
        - index.js
        - index.wxml
        - index.wxss
        - index.json
    - app.js 主入口文件
    - app.json 主配置文件
    - app.wxss 主样式文件
  - README.md
  - project.config.json

二、操作云能力

1. 开通云开发

在微信开发者工具的主面板中，点击云开发按钮，开通云开发支持。

注意：开通云开发后，需等待大概10分钟左右；即时调用有可能出现cloud init error: { errMsg: "invalid scope" }，此时官方后台正在准备服务。

2. 主入口app.js文件，初始化云调用

//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // 此处请填入环境 ID, 环境 ID 可打开云控制台查看
        env: 'xxoo',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

如果要使用云能力，通常我们在小程序初始化时即调用这个方法。

3. 具体业务：注册功能-获取用户的openid以及用户基本信息，存储到云数据库中

小程序端：

// miniprogram/pages/index/index.wxml
<button open-type="getUserInfo" type="primary" bindgetuserinfo="onGetUserInfo">注册</button>

// miniprogram/pages/index/index.js
page({
  data: {
    // 定义数据
  },
  /**
   * onGetUserInfo()
   * @description 获取用户登录信息，存储到云数据库
   * @param {object} e 获取的用户信息对象
  */
  onGetUserInfo: function(e) {
    if (e.detail.userInfo) {
      wx.cloud.callFunction({
        name: 'saveUserInfo',
        data: {
          userInfo: e.detail.userInfo
        },
        success: (res) => {
          console.log(res)
          if (res.result && res.result._id) {
            wx.showToast({
              title: '保存成功',
            })
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '保存失败...',
            icon: 'none'
          })
        }
      })
    }
  }
})

请注意观察这里：

// 云函数调用
wx.cloud.callFunction({
  // 云函数名
  name: 'saveUserInfo',
  // 传参
  data: {}

云端：云函数

// cloudfunctions/saveUserInfo/index.js

// 引入云函数SDK
const cloud = require('wx-server-sdk')

// 初始化
cloud.init()

// 数据库链接
let db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  // 全局的工具类，在云函数中获取微信的调用上下文
  const wxContext = cloud.getWXContext()

  // 云数据库操作
  try {
    // 实际注册功能时，应先检测该用户是否已经注册
    
    // 此处操作集合时，请预先在数据库中创建该集合users
    return await db.collection('users').add({
      data: {
        created: new Date(),
        userInfo: event.userInfo,
        openid: wxContext.OPENID
      }
    })
  } catch (e) {
    console.error(e)
  }
}

云函数在使用时必须上传并部署，如果是本地化测试，一定要进行npm install 安装包依赖

云端：数据库

点击注册按钮，即会在云数据集合users中创建一条数据

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得收藏、转发、点击右下角按钮在看，推荐给更多小伙伴呦，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！