Linux コマンド クエリ アプレットでの WePY クラウド開発の実践

みなさんこんにちは。今日は Linux コマンド クエリ アプレットでの WePY クラウド開発の実践についてお話しします。

WePYを選ぶ理由

まず最初に、WePY を選ぶべき理由をお話ししましょう。

プロジェクトの選択を始めたとき、選択できる基盤フレームワークには、WePy、MPVue、Taro、MinUI などがありました。これらのフレームワークは、ミニプログラム プロジェクトの長期的なメンテナンスに役立つ、よく設計されたフレームワークです。その中でもTaroは、私が詳しくないReactを使っていたため、最初から除外していました。 MPVue を調べてみたところ、これはミニプログラム開発者向けの Vue のようなツールというよりは、Web 開発者向けのミニプログラム変換ツールであることがわかったので、これも除外しました。 MinUI はコンポーネント化されたソリューションのみを提供し、npm、ES6/ES7、およびその他のコマンドのサポートは引き続きミニプログラムの機能を使用する必要があるため、除外されました。より多くのサポートは提供されておらず、エコシステム全体がまだ豊富ではありません。

最終的に私はWePYを選択しました。始める前に、WePY にはどのような利点があるのか​​調べました。 一般的に、WePY の利点は次のようになると思います。

1. Vue に似たコンポーネント化ソリューションを提供します。コンポーネント化開発により、プロジェクトの保守性が向上します。開発サイクルが長くなるにつれて、コンポーネント化は開発エクスペリエンスに大きな影響を与えます。

2. ES6/ES7 構文のサポートを提供します。JavaScript の批判されているコールバックは、ES6 と ES7 ではよりエレガントな実装になっています。

3. Vue エコシステムを提供: MinUI の孤独な戦いとは異なり、WePY には WePY-Redux、RxWX など、誰もが使い慣れているその他の Vue ツールなど、多くの Vue コミュニティ エコシステム製品があり、開発プロセスがよりスムーズになり、開発エクスペリエンスがより一貫性のあるものになります。

4. ネイティブ API の最適化: ミニプログラムが公式に提供するインターフェースの中には、コールバック モードを提供し、Promise を提供しないものが多くあります。これらを使用する場合、自分で再パッケージ化する必要があることが多く、面倒です。 WePYでは、WePYの担当者がレイヤーをカプセル化してくれています。WePYでカプセル化されたメソッドを直接使用できるため、カプセル化の作業負荷が軽減されます。

5. Vue 慣れ親しんだデータ設定: WePY では、this.xxx=xxx の構文を使用して割り当て操作を実行できます。ネイティブの setData メソッドと比較して、より快適な構文を持ち、より保守しやすくなります。

6. 計算メソッドが提供されます: ミニプログラムを開発する場合、必然的にデータをフォーマットする必要があります。従来のミニプログラム開発では、データをマッピングしてから変更する必要がありました。しかし、WePY を使用すると、計算プロパティを使用してデータをフォーマットおよび調整できるため、コードの可読性が大幅に向上します。

以上が私が重視するWePYのメリットです。次にWePYでのクラウド開発の活用方法についてお話しします。

WePY でのクラウド開発

私は多くのミニプログラムを書き、いくつかのミニプログラム コースを教えてきました。よく「XXX は XXX で使用できますか?」と尋ねられます。このシナリオでは、WePY でクラウド開発を使用できますか?

答えはもちろんイエスです。

この問題を検討する際には、まずクラウド開発が具体的に何を提供するのかを把握する必要があります。

クラウド開発はデータストレージ、ファイルストレージ、コンピューティングパワーを提供します

これは、WeChat アプレットをコンポーネント化して開発する機能を提供するという WePY の位置付けと矛盾しません。したがって、WePY とクラウド開発は競合せず、WePY でクラウド開発を使用できます。

WePYプロジェクトでクラウド開発を可能にする

WePY 自体はクラウド開発テンプレートを提供していないため (ただし、wepy init cloudkits/wepy-tcb-demo コマンドを使用して、クラウド開発の例を含む WePY プロジェクトを初期化できるようになりました)、プロジェクトにクラウド開発を自分で追加する必要があります。

クラウド開発自体は wx. 名前空間に統合されているため、設定なしで wx.cloud.xxx を使ってさまざまなクラウド開発コマンドを直接呼び出すことができます。さらに、特別なのは、WeChat アプレット開発者ツールがクラウド機能ディレクトリを認識できるように、クラウド機能ディレクトリを指定する必要があることです。

ここで注目すべきは、クラウド開発コマンド自体が Promise と Callback をサポートしているため、wepy.cloud を使用する代わりに wx.cloud を使用して直接呼び出すことができるという点です。 WePY はこれをクラウド開発用に公式にパッケージ化していません。

ミニプログラム プロジェクトのルート ディレクトリに新しいディレクトリ cloudfunctions を作成し、project.config.json に新しい構成項目 cloudfunctionRoot を追加して、その値を cloudfunctions に設定できます。このようにして、WeChat ミニプログラム開発者ツールは、このディレクトリがクラウド機能ディレクトリであることを認識し、特別なディレクトリ名を追加できます。

ここで注意すべき点は、クラウド関数はミニプログラムのソース コード ディレクトリ src の外側に配置する必要があるということです。そうしないと、コンパイル エラーが発生します。 wepy.config.js でコンパイル チェック ディレクトリのシールドに関する設定項目を探してみましたが、見つからなかったので、このディレクトリをプロジェクト ルート ディレクトリに直接、クラウド関数とミニ プログラムのソース コードの src と同じレベルに配置しました。

これで、WePY でのアプレット クラウド開発のリファレンスが完了しました。

開発中に遭遇した落とし穴

この割り当てでは最初にデータを設定する必要があります

WePYで開発する場合、this.xxxを使用してデータの値を変更します。しかし、開発を始めたばかりの頃、最初に遭遇した問題は、this.xxxを使用してデータの値を設定できず、ミニプログラムインターフェースで対応する値を取得できないことでした。

後でわかったのですが、WePY でデータを更新および管理したい場合は、ページに渡すデータをページ インスタンスのデータ オブジェクトに配置する必要があります。そうすることで、WePY がデータの更新と管理を支援できるようになります。このことはドキュメントに記載されていなかったので、困ってしまいました。

WePY を分析して、このアプローチを理解しました。WePY は setData を使用せず、this.xxx を直接呼び出して変更を加えるため、WePY はどの変数をページに送信する必要があるかを知る必要があります。そうしないと、this 内のすべてのデータをページに渡すと、送信時間が長くなりすぎて、アプレットが簡単に終了する可能性があります。この時点で、データを使用してデータを制限する方法が理解できます。

純粋なモバイルデータの管理をどのように処理しますか?

これまでのところ、クラウド開発では公式の WeChat ミニプログラム コンソール以外の管理方法は提供されておらず、アプリケーションの構築時に大きな制限が生じています。

より良いサービスを提供するために、製品モデルを変更することにしました。当初は、ユーザーが翻訳を提出し、チームがそれをレビューするというモデルを検討しましたが、管理と開発のコストの不足を考慮する必要がありました。私たちはモデルを調整し、コミュニティの自己浄化に切り替えることにしました。編集機能を完全に公開しており、どのユーザーでもデータを送信できます。同時に、国内のコミュニティによって完全に保守されるアプリケーションを実装することも可能です。

しかし、誰でも提出できるこのようなデータは他人に悪用される可能性が高いため、WeChatミニプログラムが公式に提供するコンテンツセキュリティインターフェースを導入してテキストセキュリティテストを実施し、一部の違法・不法コンテンツがミニプログラムに与える影響を可能な限り回避しました。

このインターフェースを使用すると、インターフェースを呼び出すときに access_token が必要であることがわかります。WeChat の access_token 取得インターフェースには、呼び出しを開始するためのアドレス制限 (ミニプログラムでは呼び出せない) とインターフェース要求頻度制限 (要求が速すぎるとトークンの取得に失敗する可能性があります) の両方があります。そのため、この部分の機能を処理するにはクラウド機能を使用することにしました。

クラウド関数の got ライブラリを使用して、WeChat が提供するインターフェースを要求し、access_token を取得してコンテンツのセキュリティを検出します。また、access_token リクエストが頻繁に行われないようにするために、トークンをキャッシュするコードを追加しました。

const result = await cache.get(); // cache は対応するコレクションへの参照です。const now = (new Date).valueOf();
const nextTime = now + 5400000;
accessToken = '' とします
if (!結果データの長さ) {
 console.log("初期取得プロセスに入る")
 const 結果 = 待機 got(accessTokenUrl)
 アクセストークン = JSON.parse(result.body).access_token
 キャッシュの追加を待ちます({
  データ： {
   トークン: accessToken、
   時間: 次回
  }
 })
} それ以外 {
 （結果データ[0].時間＞現在）の場合{
  console.log("すでに有効なトークンがあります")
  アクセストークン = 結果.データ[0].トークン
 } それ以外 {
  console.log("既存のトークンは無効です")
  const tokenResult = 取得を待機します(accessTokenUrl)
  アクセストークン = JSON.parse(tokenResult.body).access_token
  キャッシュ.doc(result.data[0]._id).update({を待つ
   データ：{
    トークン: accessToken、
    時間: 次回
   }
  })
 }
}

上記のコードにより、トークンがクラウド データベースに保存され、有効期限と比較されます。トークンの有効期限が近づいていることが判明した場合、トークンが更新され、リクエストが正常に実行できるようになります。

要約する

ミニプログラムの開発プロセス全体を振り返ると、WePY の利便性により開発プロセス全体が非常にスムーズになり、クラウド開発の迅速な反復の利点により、アプリケーション全体が迅速にオンラインになりました。 Linux アプレットから正式リリースまでの合計開発時間は 24 時間以内です。