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

微信(小程序)  /  管理员 发布于 3年前   302

微信小程序刚出没多久时，曾经上手写过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 (       {this.state.list.map(l => (                         {l.summary.title}                   {l.summary.tags.map(t => (         {t}        ))}       {l.summary.date}               ))}     ); }}

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

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 }  }); }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 小程序云开发初探(小结)
• 小程序云开发实战小结
• 小程序云开发部署攻略(图文教程)
• 微信小程序云开发修改云数据库中的数据方法
• 微信小程序云开发实现云数据库读写权限
• 微信小程序云开发详细教程
• 微信小程序云开发之数据库操作
• 微信小程序云开发之使用云函数
• 微信小程序云开发之使用云数据库