小試小程序雲開發

原文地址：小試小程序雲開發
微信小程序剛出沒多久時，曾經上手寫過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.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 }
    });
  }

雲端部分開發完以後，在微信開發者工具裏面上傳雲端代碼便可，而其他部分的流程和普通小程序同樣，這裏也再也不介紹。

後記

小程序部分的開發仍是比較簡單的，我開發的大部分時間實際上是用在寫 markdown 轉 wxml 解析器上。下一篇講解如何將 markdown 轉換爲 wxml 。