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

前言

前端开发者在进行小程序开发时,总是需要接触到小程序服务端的开发,如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中创建一条数据

数据库记录展示

后记

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

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

原文发布于微信公众号 - 胡哥有话说(hugeyouhuashuo)

原文发表时间:2019-07-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券