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

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

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

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

client #前端目录
├── config #配置
├── dist #

前端

小程序的前端部分，想必不用过多讲解，因为这都是前端的基本功。就以首页为样例，使用了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 }
 });
 }

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