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

jiezi

5 年前

前端开发者在进行小程序开发时，总是需要接触到小程序服务端的开发，如 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

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

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

//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 = {}}
})

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

小程序端：

// 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 中创建一条数据

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

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

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

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

前言

小程序云开发基础能力

小程序云开发实践

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

二、操作云能力

1. 开通云开发

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

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

后记