リトルテストプログラムクラウド開発（小結）

WeChatアプリが出没したばかりの頃には、Demoを手書きしたことがありますが、開発体験が足りないので、あまり注目していませんでした。でも、いろいろな案が出てきて、雲の開通も経験する必要があると思いました。それで、私の技術ブログにもプログラム版を書きました。
原生開発はもう試したくないです。適格な方案を選んでください。今有名なのはvueベースのmpvue、umi-ap、reactベースのtaro、及びTXグループから出る新しいフレームワークwepyです。個人的にはreactに対する好感とtaroの枠組みが成熟していくので、taroを選択しました。
クラウド開発とは、普通のウィジェットの伝統的なバックエンドをWeChatが提供するライト級クラウドに切り替えることです。このクラウドサービス部分の開発は先端に対して開発されています。フロントエンドエンジニアは簡単に全スタックで小さなプログラムを開発できます。しかし、このような軽量級ソリューションは業務に対して簡単な項目です。公共プラットフォームには様々な制限があります。
次にテーマに入ります。プロジェクトの大まかなディレクトリ構成は以下の通りです。

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

普通のウィジェットとは違って、クラウドの呼び出しは公式の例のようになります。

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

クラウド部分の開発が終わったら、WeChat開発者ツールにクラウドコードをアップロードすればいいです。残りの部分の流れは普通のウィジェットと同じです。ここでは紹介しません。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。