详解小程序云开发攻略(解决最棘手的问题)


Posted in Javascript onSeptember 30, 2019

背景

最近小程序非常的火,应公司业务发展要求,开发维护了几款小程序,公司开发的小程序都是由后端提供的接口,开发繁琐而复杂,直到小程序出现了云开发,仔细研读了文档之后,欣喜不已,于是我着手开发了本人的第一款小程序

  • 小程序云开发教程地址 点我查看>>

分析

云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

优势

  • 无需自建服务器,数据库,无需自建存储和CDN
  • 数据库模型很简单,就是一个json形式的对象格式
  • 调用服务端云函数自动获取openid,再也没有繁琐的授权登陆流程了,只要进入小程序就是登陆状态,体验真的好
  • 开发迅速,只需要前端就能搞定所有开发工作

需要解决的问题

数据库切换问题

使用过云开发的人都发现云开发切换数据库环境是最头疼的,如果手动去切换容易搞错,不小心在当前环境修改了线上数据库数据

直到官方出了这个函数问题也就迎刃而解

cloud.updateConfig({
  env: ENV === 'local' ? 'dev-aqijb' : ENV
 });

我使用的是服务端云开发功能,为什么要这样判断,因为在开发工具中ENV = 'local',所以这么判断一下,保证开发工具中使用的是测试环境数据库

使用taro多端开发框架,借助于webpack,还可以通过process.env.NODE_ENV值区分当前代码开发环境

await Taro.cloud.init({
    env: `${process.env.NODE_ENV === 'development' ? 'dev-aqijb' : 'pro-hljv7'}`
    /* env: 'pro-hljv7' */
   });

这样可以保证开发环境和线上环境可以使用对应环境的数据库

数据库字段定义问题

因为JS是弱类型语言,不能像typescript那样静态定义变量类型,这样添加到数据库的字段数量和字段类型都无法控制

我不想用typescript,能不能实现这样的功能呢,可以用superstruct库来实现这个功能

  • superstruct git地址 点我查看>>

详细使用案例见下方代码

函数文件太多的问题

官方和他人教程的例子都是一个文件对应一个云函数,通过开发体验我发现这样做并不好,当项目有多个表的时候,找个函数文件真的太难了
我们可以将一个表的增删改查函数全部写入一个文件中

教程: 首先每个云函数文件中package.json引入superstruct

{
 "dependencies": {
  "wx-server-sdk": "latest",
  "superstruct": "latest"
 }
}

以下代码是一个完整的云函数例子

const cloud = require('wx-server-sdk');
const { struct, superstruct } = require('superstruct');
cloud.init();
//小区信息
const Model = () => {
 const db = cloud.database();
 const _ = db.command;
 const collection = db.collection('address');
 return {
  async add(data) {
   try {
    data = struct({
     name: 'string', //名字
     phone: 'string',
     unit: 'number', //楼单元号
     doorNumber: 'string', //门号
     communityId: 'string', //小区id
     _openid: 'string' //用户的id
     //isDefault: 'boolean' //是否默认地址
    })(data);
   } catch (e) {
    const { path, value, type } = e;
    const key = path[0];

    if (value === undefined) {
     const error = new Error(`${key}_required`);
     error.attribute = key;
     throw error;
    }

    if (type === undefined) {
     const error = new Error(`attribute_${key}_unknown`);
     error.attribute = key;
     throw error;
    }
    const error = new Error(`${key}_invalid`);
    error.attribute = key;
    error.value = value;
    throw error;
   }
   let res = await this.getList({ _openid: data._openid });
   if (res.data.length >= 1) {
    return { msg: '当前只支持保存一个地址' };
   }
   res = await collection.add({
    data,
    createTime: db.serverDate(),
    updateTime: db.serverDate()
   });
   return res;
  },
  async getAdressById({ _openid, _id }) {
   const user = await collection
    .where({
     _openid,
     _id: _.eq(_id)
    })
    .get();
   return user;
  },
  //更新指定的id 先判断手机号修改没,没修改直接就改数据,修改过判断一下库中有没有这条数据
  async update(data) {
   //更新表的操作
  },
  //删除指定id的shop
  async remove({ _id, _openid }) {
   //删除表的操作
  },
  /**
   * 获取商列表
   * @param {*} option {category 类别, pagenum 页码}
   */
  async getList({ _openid }) {
   const shopList = await collection
    .where({
     _openid
    })
    .get();

   return shopList;
  }
 };
};

exports.main = async (event, context) => {
 const { func, data } = event;
 const { ENV, OPENID } = cloud.getWXContext();
 // 更新默认配置,将默认访问环境设为当前云函数所在环境
 console.log('ENV', ENV);
 cloud.updateConfig({
  env: ENV === 'local' ? 'dev-aqijb' : ENV
 });
 let res = await Model()[func]({ ...data, _openid: OPENID });
 return {
  ENV,
  data: res
 };
};

函数使用方式

wx.cloud.callFunction({
   'address', //云函数文件名
   data: {
    func: 'add', //云函数中定义的方法
    data: {} //需要上传的数据
   }
  });

图片 视频等文件

直接打开云开发控制台选择存储直接上传文件,复制url地址就可以放到代码中使用了

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

Javascript 相关文章推荐
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 #Javascript
uploadify插件实现多个图片上传并预览
Sep 30 #Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 #Javascript
JavaScript中的null和undefined用法解析
Sep 30 #Javascript
vue resource发送请求的几种方式
Sep 30 #Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 #Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 #Javascript
You might like
PHP与Java对比学习日期时间函数
2016/07/03 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
动态控制Table的js代码
2007/03/07 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
Python正则表达式的使用范例详解
2014/08/08 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
毕业生个人的求职信范文
2013/12/03 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
员工安全生产承诺书
2014/05/22 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
个人四风问题整改措施
2014/10/24 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
银行求职自荐信范文
2015/03/04 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书