微信小程序云开发使用方法新手初体验


Posted in Javascript onMay 16, 2019

今天看到微信推送了一条小程序云上线通知,作为一个前端er,满怀期待的去看了看,很不错先看看文档上怎么说的:

开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。

云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。(就是说以后老板让你做小程序,连个后台的人都不用给你配了,自己搞定就行了)。

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

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

说白了就是,云函数就是后端代码,现在叫云函数,自己写,自己上传,数据库没什么好说的,就是数据库,不过这个数据库是json数据库,很方便,怎么个方便法呢,看下图:

传统数据库以mysql为例子:

微信小程序云开发使用方法新手初体验

看到int..这么多类型是不是很烦躁,取的时候再合并多个表也很麻烦

小程序云json数据库:

微信小程序云开发使用方法新手初体验

看到这些类型是不是很亲切,大大降低了新手对数据库理解,不用学黑窗口,sql命令,还可以导入josn数据,很是方便。

现在走一遍流程:

1、创建带小程序云模板的小程序:

微信小程序云开发使用方法新手初体验

----新建一个空的文件夹,填入你的appId(必须),官方说 :勾选创建 “云开发 QuickStart 项目”,实际上是"建立云开发快速启动模板",有点坑哦,同学要注意,点击确定 ==>

2.看到这么多是不是有点方  - -!,看到多了一个东西,点击创建自己的环境,,具体就是写个名字,创个一个环境,官方上说是最好创建俩个环境,一个是开发环境,一个是线上环境。

微信小程序云开发使用方法新手初体验

不做赘述,都是免费的

微信小程序云开发使用方法新手初体验

看这配置给的也挺良心,一般人真的不用升级配置 ==>

3.选择环境,环境创建好了,不过还没有使用上

微信小程序云开发使用方法新手初体验

对第一个文件夹点右键,选择你要使用的环境,下面则是你的云函数,就是跑在服务器上的。

对login文件夹点右键,选择上传并部署,ps:不上传部署怎么使用呀,所以没毛病。==>

4.先别急上传个login是怎么使用的,我们先去看点击获取openid是事件,发现,这里只有个name对应上上传的云函数事件名,而云函数直接就返回了openid,看看云函数是怎么实现的

wx.cloud.callFunction({
 name: 'login',
 data: {},
 success: res => {
 console.log('[云函数] [login] user openid: ', res.result.openid)
 app.globalData.openid = res.result.openid
 wx.navigateTo({
  url: '../userConsole/userConsole',
 })
 },
 fail: err => {
 console.error('[云函数] [login] 调用失败', err)
 wx.navigateTo({
  url: '../deployFunctions/deployFunctions',
 })
 }
})
// 云函数模板
// 部署:在 cloud-functions/login 文件夹右击选择 “上传并部署”
 
/**
 * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
 * 
 * event 参数包含
 * - 小程序端调用传入的 data
 * - 经过微信鉴权直接可信的用户唯一标识 openid 
 * 
 */
exports.main = (event, context) => {
 console.log(event)
 console.log(context)
 
 // 可执行其他自定义逻辑
 // console.log 的内容可以在云开发云函数调用日志查看
 
 return {
 openid: event.userInfo.openId,
 }
}

云函数里,直接就能拿到用户的openid和appid并返回,所以在前端上拿到了openid,真的是很方便。==>

微信小程序云开发使用方法新手初体验

5.关于数据库,数据库那边每一个表都有权限设置,好好看一下。

创建很简单,读取也很简单,很像slq语句。

先创建一个db对象,然后直接走collection('表名字').where({条件}).get().then(res=>{}) ,我这里使用的是Promise风格,当然也可以使用回调的方式,就可以把表里的数据都取出来在页面上展示了。

const db = wx.cloud.database();
 db.collection('todos').where({
 _id: 'W5c0IDWesyZkco4t'
 }).get().then(res => {
 this.setData({
 dataList: res.data
 })
 })

更多api还是得看接口

感觉还可以继续完善,使用起来感觉很好,把一切变的简单。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ready函数滥用分析
Feb 16 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
angular多语言配置详解
May 16 #Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 #Javascript
Django模板继承 extend标签实例代码详解
May 16 #Javascript
vue视图不更新情况详解
May 16 #Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 #Javascript
Vue中props的详解
May 16 #Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
自己动手做一个SQL解释器
2006/10/09 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
清除输入框内的空格
2016/12/21 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
基于javascript实现碰撞检测
2020/03/12 Javascript
python使用KNN算法识别手写数字
2019/04/25 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python实现ip地址的包含关系判断
2020/02/07 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
幼儿教师年度个人总结
2015/02/05 职场文书
海上钢琴师观后感
2015/06/03 职场文书
python自动化测试之Selenium详解
2022/03/13 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript