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

 更新时间:2019年06月06日 15:02:12   作者:Jeff.Zhong  
这篇文章主要介绍了小试小程序云开发(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信小程序刚出没多久时,曾经上手写过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 WEB操作方法分享

    常用的JavaScript WEB操作方法分享

    这篇文章主要介绍了常用的JavaScript WEB操作方法分享,包含数组方法集、cookie方法集、url方法集、正则表达式方法集、字符串方法集、加密方法集、日期方法集等常用操作方法,需要的朋友可以参考下
    2015-02-02
  • 基于JavaScript实现的插入排序算法分析

    基于JavaScript实现的插入排序算法分析

    这篇文章主要介绍了基于JavaScript实现的插入排序算法,结合实例形式详细分析了插入排序的原理、操作步骤及javascript相关实现技巧与注意事项,需要的朋友可以参考下
    2017-04-04
  • 解决bootstrap导航栏navbar在IE8上存在缺陷的方法

    解决bootstrap导航栏navbar在IE8上存在缺陷的方法

    这篇文章主要为大家详细介绍了解决bootstrap导航栏navbar在IE8上存在缺陷的方法,需要的朋友可以参考下
    2016-07-07
  • layui-table获得当前行的上/下一行数据的例子

    layui-table获得当前行的上/下一行数据的例子

    今天小编就为大家分享一篇layui-table获得当前行的上/下一行数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 深入探讨JavaScript中Class的语法与使用

    深入探讨JavaScript中Class的语法与使用

    这篇文章将带大家深入探讨 class 在 JavaScript 中的作用、语法和使用方法,并与 ES5 构造函数进行对比,希望可以帮助大家更好地理解和应用类的概念
    2023-06-06
  • js实现无需数据库的县级以上联动行政区域下拉控件

    js实现无需数据库的县级以上联动行政区域下拉控件

    县级以上联动行政区域下拉控件,想必大家对此也有所熟悉,本文为大家介绍下使用js实现无需数据库的联动下拉控件,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • Bootstrap Table快速完美搭建后台管理系统

    Bootstrap Table快速完美搭建后台管理系统

    这篇文章主要为大家详细介绍了Bootstrap Table快速完美搭建后台管理系统的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • Javascript连接Access数据库完整实例

    Javascript连接Access数据库完整实例

    这篇文章主要介绍了Javascript连接Access数据库的方法,涉及javascript针对access数据库的连接、关闭及增删改查等常用操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 微信小程序实现文字跑马灯

    微信小程序实现文字跑马灯

    这篇文章主要为大家详细介绍了微信小程序实现文字跑马灯,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • javascript中的nextSibling使用陷(da)阱(keng)

    javascript中的nextSibling使用陷(da)阱(keng)

    关于HTML/XML节点的问题,在IE中nextSibling不会返回文本节点,而chrome或者firefox等会返回文本节点
    2014-05-05

最新评论