乐趣区

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

前言

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

后记

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

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

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

退出移动版