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

微信小程序刚出没多久时，曾经上手写过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>  ); }}