前言
前端开发者在进行小程序开发时，总是需要接触到小程序服务端的开发，如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中创建一条数据
数据库记录展示
后记
以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得收藏、转发、点击右下角按钮在看，推荐给更多小伙伴呦，欢迎多多留言交流...
胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！
长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！
胡哥有话说
网友评论