小程序云开发初探(小结)


Posted in Javascript onOctober 24, 2018

云开发是微信平台新开放的功能,为开发者提供集成了服务器,数据库和资源存储的云服务。本文将基于官方文档,以一个小例子来作为探索云开发的相关功能。

云开发官方文档

一、新建云开发项目新建项目

将微信开发助手更新之后,选择云开发模板。

小程序云开发初探(小结)

项目目录

小程序云开发初探(小结)

项目目录分为了2大块内容:cloudfunctions(云函数)和miniprogram。miniprogram存放的是和普通开发相同的业务代码和资源,cloudfunctions中则存放了可以上传至云端的代码,在云开发中被称为云函数。
云开发模板建立之后,会带有一些相关例子可以熟悉api。

二、控制台

微信开发者工具更新之后,在工具栏上会有一个控制台入口,点击可出现以下面板,可查看相关数据情况。

小程序云开发初探(小结)

概览

概览界面如上图所示,展示了该 云开发项目下使用云资源的统计数据。

用户管理

凡是访问过云项目的用户,都会在用户管理下留有访问记录。前提是该小程序在app.js中设置traceUser:true,表示允许记录用户信息。

wx.cloud.init({
    env:'......',
    traceUser: true,
  })

数据库

数据库是控制台中最常用的功能之一,在该界面下,可以快速建立数据集合,可以理解为数据表。可在控制台中建立新的集合,添加记录有三种方式:控制台手动添加、文件导入以及调用api。调用api会在每条记录中自动插入用户_openid。

小程序云开发初探(小结)

存储管理

存储管理可保存小程序端上传的文件,可通过调用api进行上传,上传名称和路径需要自己定义。

小程序云开发初探(小结)

云函数

云函数对cloudfunctions中上传的函数进行管理,可进行调试,查看调用日志等信息。

小程序云开发初探(小结)

小程序云开发初探(小结)

云函数添加方式有2种,可视化添加与IDE添加,可视化添加的云函数直接上传至了云端,IDE中添加需要上传部署才可以调用。如果要删除云函数,在控制台删除之后,IDE中同步云函数列表即可。

统计分析

统计分析对云服务的调用情况有针对得给出了数据。

小程序云开发初探(小结)

三、环境配置

api会在每条记录中自动插入用户_openid。

小程序云开发初探(小结)

项目初始化需要在app.js中进行配置,env中填写的就是自主配置的环境ID。

wx.cloud.init({
    env:'mina-cloud-test001'
  })

四、实际应用

本例以上传书籍信息为实际应用,实现基本的书籍信息增删改查功能,以及图片的上传删除。

小程序云开发初探(小结)

小程序云开发初探(小结)

读取数据库数据

先通过调用wx.cloud.database();获取数据库所有集合,然后通过查询具体集合的方式获取数据。

const db = wx.cloud.database();
  const _ = db.command;
  
  db.collection('bookList').get().then(res => {
    console.log('get', res)
    self.setData({
      bookList: res.data
    });
  })

增加数据

const db = wx.cloud.database();
  const _ = db.command;
  
  db.collection('bookList').add({
    data: {
     bookMes: self.data.bookMes
    }
  }).then(res => {
    console.log(res)     
  })

删除数据

db.collection('bookList').doc(id).remove().then(res => {
    console.log(res)
    wx.showToast({
      title: '删除成功!',
    })
    self.getBook();
    }).catch(err => {
      console.log('err', res)
    })
  })

增加数据

const db = wx.cloud.database();
  const _ = db.command;
  
  db.collection('bookList').doc(id).remove().then(res => {
    console.log(res)
    }).catch(err => {
      console.log('err', res)
    })
  })

改变数据

const db = wx.cloud.database();
  const _ = db.command

  db.collection('bookList').doc(self.data.currentId).update({
    data: {
     bookMes:self.data.bookMes
    }
  }).then(res=>{
    console.log('update',res)
    self.getBook();
  }).catch(console.error)

查询数据&调用云函数

查询数据采用云函数为例

先在云函数中定义查询函数,每个需要调用云开发api的云函数都必须使用wx-server-sdk,当新创建一个云函数时,项目会提示是否需要使用依赖,选择是则会自动安装wx-server-sdk
函数中的event参数代表由小程序端传递过来的参数,除此之外默认包含了userInfo,可用来做用户鉴权操作。

//云函数入口文件
  const cloud = require('wx-server-sdk')
  cloud.init()
  const db = cloud.database()
  const _ = db.command
  
  //云函数函数入口
  exports.main = async (event, context) => {
    return db.collection('bookList').where({
      'bookMes.name': _.eq(event.bookMes.name),
      'bookMes.chooseTags':_.in(event.bookMes.chooseTags)
  }).get({
    success:function(res){
     return res
    }
   })
  }

小程序端引用云函数,name为云函数文件夹的名称,data中存放的是传递给云函数的参数,云函数通过event获取:

wx.cloud.callFunction({
    name: 'searchBook',
    // 传给云函数的参数
    data: {
      bookMes: self.data.bookMes
    }
  }).then(res => {
    console.log('search',res.result.data)
    self.setData({
      bookList:res.result.data
    })
  })

本文中的api使用方式仅为示例,实际上服务端的api比小程序端的api丰富,实现功能更多。建议设计文件存储、数据库增删改查的操作都在云函数中进行。

上传图片

上传图片需要先调用wx.chooseImage返回的filePath参数,然后自主定义cloudPath,即上传至云端的地址。

choose() {
    let self = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
      // console.log(res.tempFilePaths[0])
      // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        self.setData({
          bookPic: res.tempFilePaths[0]
        })
      }
    })
  },
  upload(){
    let self = this
    const filePath = self.data.bookPic
    let myDate = new Date();
    let time = '' + myDate.getFullYear() + (myDate.getMonth() + 1) + myDate.getDate() + myDate.getHours() + myDate.getMinutes() + myDate.getSeconds();
    const cloudPath = 'book-image' + time + filePath.match(/\.[^.]+?$/)[0];
  
    return wx.cloud.uploadFile({
      cloudPath,
      filePath,
    }).then(res => {
      console.log('upload', res)
      let bookMes = self.data.bookMes;
      bookMes.bookPic = res.fileID;
      return self.setData({
        bookMes
      });
    }).catch(err => {
      console.log('error',err)
    })
  }

删除图片

删除图片或其他文件需要具体的fileId,可通过查询得到,通过该fileID进行删除。

wx.cloud.deleteFile({
    fileList: [fileId],
    success: res => {
      console.log('delete', res.fileList)
    },
    fail: err => {
      console.log('deleteE', err)
    }
  })

五、发现存在的问题

在实际写例子的过程中,也发现了一些问题,因为云开发的功能开放不久,功能并不是很完善,总结了一些发现的小问题:

  • 数据库暂不支持模糊查询
  • 数据库集合之间无法关联
  • 上传图片如果cloudPath和之前的图片一致的话,返回结果虽然现实成功,但实际替换成了之前的旧图
  • globalData定义方法发生改变,无法与onLaunch同级进行定义。

六、结语

关于云开发,官方文档给出的说明比较详细,仔细阅读文档可以较快速得实现上手应用。但由于目前其功能的局限性,较为复杂的公司业务不适合采用该模式进行开发,适合个人小型业务采用。

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

Javascript 相关文章推荐
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
vue-cli V3.0版本的使用详解
Oct 24 #Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 #Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 #Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 #Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 #Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 #Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 #Javascript
You might like
如何过滤高亮显示非法字符
2006/10/09 PHP
处理单名多值表单的详解
2013/06/08 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
js word表格动态添加代码
2010/06/07 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
数控专业个人求职信范例
2013/11/29 职场文书
采购部部门职责
2013/12/15 职场文书
倡议书格式模板
2014/05/13 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书