小试小程序云开发(小结)


Posted in Javascript onJune 06, 2019

微信小程序刚出没多久时,曾经上手写过demo,但开发体验比较差,所以一直没怎么关注。不过自从诸多适配方案出炉,以及云端的开通,觉得还是有必要上手体验一番的,于是为我的技术博客也写了个小程序版。

原生开发我是不想再试了,那就选一种适配方案,目前比较知名的有基于vue的 mpvue,umi-app,基于react 的 taro,以及TX团体出的全新框架 wepy。个人对 react 的好感 以及 taro 框架的走向成熟,促使我选择了 taro。

云端开发就是将普通小程序的传统后端切换为微信提供的 轻量级云端。而这个云端服务部分的开发其实是针对前端开发的,前端工程师很容易就能全栈开发出一整个小程序。但是这种轻量级解决方案也只是针对业务简单的项目,因为公共平台肯定有各种限制,它的出现只是让我们多了一个选择方案而已。

接着进入主题,项目大体目录结构如下

client #前端目录
├── config #配置
├── dist #输出
├── src #源目录
└── index.html #入口文件
cloud #云目录
├── dao #数据库操作函数集合
├── login #登录云函数
└── ... #其他

前端

小程序的前端部分,想必不用过多讲解,因为这都是前端的基本功。就以首页为样例,使用了typeScript,主要功能是分页加载数据,调用微信提供的触发到达底部的api-onReachBottom即可。

import Taro, { Component, Config } from "@tarojs/taro";
import { View, Text, Navigator } from "@tarojs/components";
import "./index.scss";

interface IState {
 loading: boolean;
 size: number;
 page: number;
 total: number;
 list: Array<{ _id: string; summary: object }>;
 context:object;
}
export default class Index extends Component<{}, IState> {
 state = {
  loading: false,
  size: 10,
  page: 0,
  total: -1,
  list: [],
  context:{}
 };
 config: Config = {
  navigationBarTitleText: "Jeff's Blog",
  onReachBottomDistance: 50
 };

 componentWillMount() {
  this.getList();
  this.getLogin();
 }

 getDbFn(fn, param) {
  return Taro.cloud.callFunction({
   name: "dao",
   data: { fn, param }
  });
 }

 onReachBottom() {
  this.getList();
 }
 
 getList() {
  const { size, page, total, loading } = this.state;
  if (loading) return;
  Taro.showLoading({ title: 'loading', });
  if (total >= 0 && size * page >= total) return;
  this.setState({ loading: true });
  this.getDbFn("getList", { size, page: page + 1 }).then(res => {
   Taro.hideLoading();
   const total = res.result.total;
   const list = this.state.list.concat(res.result.list);
   this.setState({ loading: false, page: page + 1, total, list });
  }).catch(err => {
   Taro.hideLoading();
   this.setState({ loading: false });
  });
 }

 onShareAppMessage (res) {
  return {
   title: "Jeff's Blog",
   path: '/pages/index/index'
  }
 }
 
 render() {
  return (
   <View className='container'>
    {this.state.list.map(l => (
     <View className='item' key={l._id}>
      <Navigator url={'/pages/post/post?id=' + l._id}>
       <Image className='banner' mode='widthFix' src={l.summary.banner} />
       <View className='title'>{l.summary.title}</View>
      </Navigator>
      <View className='sub-title'>
       {l.summary.tags.map(t => (
        <Navigator className='tag' url={'/pages/list/list?tag=' + t}> {t} </Navigator>
       ))}
       <Text className='time'>{l.summary.date}</Text>
      </View>
     </View>
    ))}
   </View>
  );
 }
}

与普通小程序不同的地方就是调用云端,云函数调用如官方样例所示

getLogin(){
  Taro.cloud.callFunction({
   name: "login",
   data: {}
  }).then(res => {
   this.setState({ context: res.result });
  }).catch(err=>{
  });
}

云端

云端数据库是个文档型,操作风格与mongodb如出一辙,格式自然是json。最有用的还是操作数据库的部分,操作方法都已经 Promise 化,调用还是比较方便的。具体内容请查看文档: 小程序云开发

//数据库引用
const db = wx.cloud.database()
//获取数据集合
const todos = db.collection('todos')

//获取记录数
todos.count();
//条件查找
todos.where({done: false,progress: 50}).get()

//插入
todos.add({data: {content:'11',time:new Date()}},success:(res){});

//更新
todos.doc('todo').update({ data: { done: true}},success:(res){});

//删除
todos.where({done:true}).remove();

//分页查找
todos.orderBy('time','desc')
  .skip(start)
  .limit(size)
  .get();

云函数

调用云端的方式就要使用云函数,就以下面数据库操作库为例

// 云函数入口文件
const cloud = require("wx-server-sdk");
cloud.init();

// 云函数入口函数
exports.main = async (event, context) => {
  const { fn, param } = event;
  return dao[fn](param);
};
// 调用数据库
const db = cloud.database();
// 表
const posts = db.collection("posts");
const tags = db.collection("tags");
const dao = {
  async getList({ page = 1, size = 10 }) {
    const start = (page - 1) * size;
    try {
      const { total } = await posts.count();
      const { data } = await posts
        .field({ summary: true })
        .orderBy('num','desc')
        .skip(start)
        .limit(size)
        .get();
      return {
        code: 0,
        list: data,
        total,
        message: "sucess"
      };
    } catch (err) {
      return {
        code: -1,
        list: [],
        total: -1,
        err: err,
        message: "error"
      };
    }
  },
  getPost({ id }) {
    return posts.doc(id).get();
  },
  async getTagList({ tag }) {
    try{
      const { data } = await tags.where({ name: tag }).get();
      if(!data.length){ 
        return {
          code:0,
          list:[],
          message: "success"
        };
      } 
      const list = data[0].list.sort((a,b) => b.num - a.num);
      return {
        code:0,
        list:list,
        message: "success"
      };
    } catch(err){
      return {
        code: -1,
        list:[],
        err: err,
        message: "error"
      };
    }
  }
}

将操作数据库的所有云函数合并成一个文件,将云函数入口封装一下,即把函数名字和参数都做为参数

exports.main = async (event, context) => {
  const { fn, param } = event;
  return dao[fn](param);
};

对应前端部分也封装出一个调用数据库的方法

getDbFn(fn, param) {
  return Taro.cloud.callFunction({
   name: "dao",
   data: { fn, param }
  });
 }

云端部分开发完之后,在微信开发者工具里面上传云端代码即可,而其余部分的流程和普通小程序一样,这里也不再介绍。

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

Javascript 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
插件:检测javascript的内存泄漏
Mar 04 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 #Javascript
微信小程序如何使用globalData的方法
Jun 06 #Javascript
详解微信小程序开发(项目从零开始)
Jun 06 #Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 #Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
JS根据json数组多个字段排序及json数组常用操作
Jun 06 #Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 #Javascript
You might like
php flv视频时间获取函数
2010/06/29 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
python使用opencv读取图片的实例
2017/08/17 Python
python pygame模块编写飞机大战
2018/11/20 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
pycharm修改file type方式
2019/11/19 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
实习生自我鉴定
2013/12/12 职场文书
节约能源标语
2014/06/17 职场文书
老龄工作先进事迹
2014/08/15 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
小学生交通安全寄语
2015/02/27 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
班级管理经验交流材料
2015/11/02 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript