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


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的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 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
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python 读入多行数据的实例
2018/04/19 Python
python中如何写类
2020/06/29 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
元旦晚会邀请函
2014/01/27 职场文书
小小的船教学反思
2014/02/21 职场文书
民主生活会发言材料
2014/10/20 职场文书
自我推荐信格式模板
2015/03/24 职场文书
员工手册编写范本
2015/05/14 职场文书
党支部培养考察意见
2015/06/02 职场文书