微信小程序云开发详细教程


Posted in Javascript onMay 16, 2019

微信小程序云开发之初体验,供大家参考,具体内容如下

小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发。

目前提供三大基础能力支持:

  • 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码
  • 数据库:既可在小程序前端操作,也能在云函数中读写的 JSON 数据库,免费2G容量
  • 存储:可在小程序前端上传/下载云端文件,在云开发控制台可视化管理,免费5G容量

微信小程序云开发详细教程

上手体验

打开微信开发者工具,新建工程,选择新建云开发模板,这里appid是必填项。

微信小程序云开发详细教程

确认后,工具默认创建好工程如下:

微信小程序云开发详细教程

可以看到,工程目录中多了一个cloudfunctions的文件夹,其他的与普通模板目录结构一致,而cloudfunctions文件夹其实就是用来存放云函数的。

云开发控制台

点击顶部工具栏中的云开发,会弹出创建的引导,按照提示一步一步创建,这里点击开通。

微信小程序云开发详细教程

填写好相应的环境名称信息,可以看到,数据库有2G的空间,另外有5G的存储,可以用来存放一些图片和其他资源,这对于一些小的应用来说是完全够用的。另外,一个小程序可以建立两个环境。

微信小程序云开发详细教程

新建好的控制台就是这个样子

微信小程序云开发详细教程

云数据库

下面通过一个实例来学习小程序的云开发终端云数据库功能。数据库使用的是JSON 数据库,也就是我们所说的nosql,类似于MongoDB,使用键值对应的方式存储数据。

首先进入云开发控制台,选择数据库管理。新建一个集合,也就是一个数据库,输入集合名称。

微信小程序云开发详细教程

然后新建一条记录,记录可以手动创建,也可以导入json或者csv数据。id默认自动生成。

微信小程序云开发详细教程

那么接下来,就尝试着从小程序端读取数据库中的数据。在pages/index/index.js中的onLoad函数中加入下面的一段代码

// 创建数据库实例
const db = wx.cloud.database()
// 2. 构造查询语句
// collection 方法获取一个集合的引用
// 可以使用where 方法传入一个对象,数据库返回集合中字段等于指定值的 JSON 文档。API 也支持高级的查询条件(比如大于、小于、in 等)
// get 方法会触发网络请求,往数据库取数据
db.collection('user').get({
 success(res) {
 console.log(res)
 }
})

保存代码,编译运行,观察控制台,发现打印出来的信息中没有数据。

微信小程序云开发详细教程

不要着急,这并不是我们的代码写的有问题,而是数据库有权限限制。再次打开控制台,选择数据库权限设置。

微信小程序云开发详细教程

可以看到,默认的权限是仅创建者及管理员可读写,这里我们更改为第一个选项,选择所有用户可读,仅创建者可写。再次编译运行,可以看到数据库中的内容成功的被打印出来了。

微信小程序云开发详细教程

总结

小程序云开发确实是一个不错的功能,大大降低了开发成本,不用再去为服务器、域名、备案等一系列开发流程而发愁,因此如果要开发一些小型的应用,首选云开发。

以上是小程序云开发之初体验,之后的文章会继续深入,持续关注。

希望本文对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
JS搜狐面试题分析
Dec 16 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 #Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 #Javascript
微信小程序云开发之云函数详解
May 16 #Javascript
微信小程序云开发之模拟后台增删改查
May 16 #Javascript
微信小程序云开发之新手环境配置
May 16 #Javascript
vue项目中使用scss的方法步骤
May 16 #Javascript
微信小程序云开发使用方法新手初体验
May 16 #Javascript
You might like
php 图片上添加透明度渐变的效果
2009/06/29 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
mocha的时序规则讲解
2019/02/16 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python将字符串转换成数组的方法
2015/04/29 Python
python执行使用shell命令方法分享
2017/11/08 Python
Python装饰器用法实例总结
2018/02/07 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python基于event实现线程间通信控制
2020/01/13 Python
python机器学习库xgboost的使用
2020/01/20 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
信号生成及DFT的python实现方式
2020/02/25 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
文明班集体申报材料
2014/05/23 职场文书
新教师培训方案
2014/06/08 职场文书
歌剧魅影观后感
2015/06/05 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书