微信小程序云开发如何上手
简要介绍
微信小程序云开发,是基于 Serverless 的一站式后端云服务,涵盖函数、数据库、存储、CDN等服务,免后端运维。基于云开发可以免鉴权调用微信所有开放能力。
前提准备
创建环境
打开小程序项目,点击工具栏“云开发”进行开通:
根据对话框提示,创建云环境:
选择默认免费配额:
“提交订单”,创建完成。
此后,就可以打开“云开发控制台”了:
创建云函数
云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。
首先,配置小程序项目。编辑 project.config.json
添加 cloudfunctionRoot
:
{
// ...
"cloudfunctionRoot": "./cloudfunction/",
"cloudfunctionTemplateRoot": "cloudfunctionTemplate"
}
并于根目录新建该目录 cloudfunction
,该目录图标会变成“云目录图标”。
然后,右键云函数根目录,“新建 Node.js 云函数”:
输入云函数名称,就会创建好模板:
使用云函数
编辑 index.js
修改成求和:
// 云函数入口文件
const cloud = require("wx-server-sdk");
cloud.init();
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext();
return {
sum: event.a + event.b,
};
};
event
是触发云函数的事件。小程序端调用时,就是其请求参数。return
返回云函数计算的结果。小程序端调用时,就是其响应内容。
Taro 调用云函数
Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信/京东/百度/支付宝/字节跳动/QQ 小程序/H5 等应用。
快速创建小程序应用,可见 Taro3 快速开始。
Taro 使用云开发,首先需要初始化云环境:
import Taro from "@tarojs/taro";
Taro.cloud.init({
env: "gocoding-xxx",
});
其中 env
环境 ID ,可见“云开发控制台”的“设置”:
然后,调用该云函数:
Taro.cloud
.callFunction({
name: "photo-lucky",
data: {
a: 1,
b: 2,
},
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
name
是云函数的名称。data
是请求参数,对应云函数的event
。
部署云函数
右键云函数目录,选择“上传并部署”:
编译运行小程序,可见打印结果:
调试云函数
打开“云开发控制台”的“云函数”:
打开“本地调试”,右侧选中“开启本地调试”:
之后,小程序调用云函数就会进“本地调试”。
云开发服务
云函数模板中默认 require
了 wx-server-sdk
,这是一个帮助我们在云函数中操作数据库、存储以及调用其他云函数的微信提供的库。关于 wx-server-sdk
的使用可见 在云函数中使用 wx-server-sdk 。
其他
云函数是 Node.js
应用,原想直接使用 TypeScript
开发并运行,可参考:
- Node.js QuickStart: https://basarat.gitbook.io/typescript/nodejs
但其调试时默认主入口是 index.js
,试了下配置,但没什么用。报错如下:
所以,想用 TypeScript
的话,需要 tsc
编译发布出 js
后再调试。
参考
结语
欢迎关注 GoCoding 公众号,分享日常 Coding 中实用的小技巧、小知识!
微信小程序云开发如何上手的更多相关文章
- 技本功丨收藏!斜杠青年与你共探微信小程序云开发(下篇)
2019年2月26日,人们为了一个杯子疯了一天. 星巴克猫爪杯,一场已经与猫无关了的“圣杯战争“.网上的倒卖价格,已炒至近千元! 求而不得,舍而不能,得而不惜.这是人最大的悲哀... 所以,请珍惜以下 ...
- 微信小程序云开发不完全指北
微信小程序云开发不完全指北 首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
- 微信小程序-云开发(手记)
微信小程序-云开发(手记) 1.创建data.json文件 注意以下几点要求: 入门示例: init方法的env:默认环境配置,传入字符串形式的环境 ID(理解为数据库)可以指定所有服务的默认环境(意 ...
- 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作
爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...
- 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现
第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现 开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 ...
- “我要点爆”微信小程序云开发实例
使用云开发进行微信小程序“我要点爆”的制作 下一章:“我要点爆”微信小程序云开发之项目建立与我的页面功能实现 接下来我将对“我要点爆”微信小程序进行完整的开源介绍 小程序名称: 我要点爆 查看方式:从 ...
- 微信小程序云开发-从0打造云音乐全栈小程序
第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...
- 微信小程序-云开发实战教程
微信小程序-云开发实战教程 云函数,云存储,云数据库,云调用 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/gettin ...
- 微信小程序-云开发-实战项目
微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...
随机推荐
- Caused by: java.lang.ClassNotFoundException: com.alibaba.druid.filter.logging.Log4j2Filter
最开始遇到这个错误,百度,网上一堆的清一色解决方案,缺少log4j,引入log4j相关依赖,或者引入slf4j-over-log4j的依赖,但是好像都不行,最后还是谷歌靠谱,直接检索出github上的 ...
- ctfshow之Web入门刷题记(从89开始,持续更新)
0x01Web89-99PHP特性payload Web89 include("flag.php"); highlight_file(__FILE__); if(isset($_G ...
- 如何在Camtasia中对录制视频添加注释
今天我给大家带来的是一款专门录制屏幕动作的软件Camtasia,拥有了使我们的屏幕录像拥有全新的剪辑速度和更换颜色背景的特性.它不仅可以完成我们屏幕录像的心愿,还可以进行对录制的视频进行后期的编辑.这 ...
- 简单实用的Boom 3D基础入门教程分享
Boom 3D可以很大限度的弥补声音设备或是环境的不足,满足您更加高级的声学体验.Boom 3D用简单明了的方式帮助您设计声音,即使您不是专业的声音编辑,也可以达到专业相似的效果. 打开Boom 3D ...
- MathType可以和哪些Microsoft Office版本一起使用?
Office类软件可能是我们碰到电脑后,最先接触到的电脑软件了.尤记得,当初的微机课一开始就会讲word和excel的使用,一开始可能学不太明白,但后来越来越频繁的使用office软件,不说offic ...
- css3系列之属性选择器
Attribute Selectors(属性选择器) E[attr ~="val"] E[attr |="val"] E[attr ^="val&qu ...
- Django踩坑记录2
错误如下 OperationalError no such table 解决方法: 首先执行: python manage.py makemigrations 再执行 python manage.py ...
- MySQL的中的全局锁、表级锁、行锁
MySQL的中的全局锁.表级锁.行锁 学习极客时间-林晓彬老师-MySQL实战45讲 学习整理 全局锁 对整个数据库实例加锁.通过使用Flush tables with read lock (FTWR ...
- HEXO & CARDS主题进阶配置
我想对于建立一个网站而言,第一步要能够做到正常在线访问以及定期产出一定的内容, 其实当网站建立好那一刻,这第一步已经算是完成了,不过我在此基础之上做了些扩展 在默认的card主题之上,我设置了标签.分 ...
- vue 项目在 IE11 里呈现空白,不兼容的问题解决方案
我用vue 2.6.11版本编写的项目,在谷歌浏览器上运行的好好地,但是放到ie11浏览器上却是一片空白. 这个问题遇到的时候,我是蒙蔽了,抓紧去搜了搜百度,百度上的答案倒是都很统一. 都是说ie不兼 ...