微信小程序刚出没多久时，曾经上手写过demo，但开发体验比较差，所以一直没怎么关注。不过自从诸多适配方案出炉，以及云端的开通，觉得还是有必要上手体验一番的。
原生开发我是不想再试了，那就选一种适配方案，目前比较知名的有基于vue的 mpvue，umi-app，基于react 的 taro，以及TX团体出的全新框架 wepy。个人对 react 的好感 以及 taro 框架的走向成熟，促使我选择了 taro。
云端开发就是将普通小程序的传统后端切换为微信提供的轻量级云端。而这个云端服务部分的开发其实是针对前端开发的，前端工程师很容易就能全栈开发出一整个小程序。但是这种轻量级解决方案也只是针对业务简单的项目，因为公共平台肯定有各种限制，它的出现只是让我们多了一个选择方案而已。
接着进入主题，项目大体目录结构如下
client #前端目录
├── config #配置
├── dist #输出
├── src #源目录
└── index.html #入口文件
cloud #云目录
├── dao #数据库操作函数集合
├── login #登录云函数
└── ... #其他
前端
小程序的前端部分，想必不用过多讲解，因为这都是古玩论坛前端的基本功。就以首页为样例，使用了typeScript，主要功能是分页加载数据，调用微信提供的触发到达底部的api，onReachBottom即可。 taro 相关部分的使用请看 taro
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.callFunction({
name: "dao",
data: { fn, param }
});
}
onReachBottom() {
this.getList();
}
getList() {
const { size, page, total, loading }=this.state;
if (loading) return;
TaroLoading({ 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.callFunction({
name: "login",
data: {}
}).then(res=> {
this.setState({ context: res.result });
}).catch(err=>{
});
}
云端
云端数据库是个文档型，操作风格与mongodb如出一辙，格式自然是json。最有用的还是操作数据库的部分，操作方法都已经 Promise 化，调用还是比较方便的。具体内容请查看文档: 小程序云开发
//数据库引用
const db=wx.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 daofn;
};
// 调用数据库
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 daofn;
};
对应前端部分也封装出一个调用数据库的方法
getDbFn(fn, param) {
return Taro.callFunction({
name: "dao",
data: { fn, param }
});
}
云端部分开发完之后，在微信开发者工具里面上传云端代码即可，而其余部分的流程和普通小程序一样，这里也不再介绍。