クラウド開発のメリット

複雑なサーバー開発プロセスを回避する
強力なWeChatチームのAPIライブラリに依存できます
ユーザーデータ管理に便利
急速な開発、小規模なトラフィックプログラムの低価格、さらには無料に役立ちます

クラウド開発のためのツールと準備

WeChatミニプログラム
開発者ツールの登録：ミニプログラム開発者ツールのURLのダウンロード
技術文書：クラウド開発公式文書

注意

アプレットのID（AppID）は、プログラム開発者の唯一の指標であり、対応するAPPIDのみが、プログラムを実行およびテストするように駆動できます。

1.オープンクラウド開発サービス

WeChat Developer Toolsの「クラウド開発」アイコンをクリックし、ポップアップボックスの「開く」をクリックすると、同意した後、環境を作成するためのダイアログボックスがポップアップ表示されます。このとき、環境名と環境ID、およびクラウド開発の現在の基本環境クォータを入力するように求められます（基本クォータは無料で使用できます）。

2.クラウド開発の環境IDを見つける

クラウド開発コンソールウィンドウの設定アイコンをクリックし、[環境変数]タブで環境名と環境IDを見つけます。

クラウド開発サービスがアクティブ化されると、アプレットのソースコードのcloudfunctionsフォルダー名に環境名が表示されます。cloudfunctionsフォルダーの名前が環境名ではなく「未指定の環境」の場合は、フォルダーを右クリックして「その他の設定」を選択し、「設定」の小さなアイコンをクリックして環境を選択し、確認します。

3.アプレットのクラウド開発環境を指定します

開発者ツールのソースコードフォルダーミニプログラムでapp.jsを開き、次のコードを見つけます。

wx.cloud.init({
    
    
      // 此处请填入环境 ID, 环境 ID 可打开云控制台查看
      env: 'my-env-id',
      traceUser: true,
    })

在 env: 'my-env-id'处改成你的环境 ID，如 env: 'xly-snoop'

4.Nodejsをダウンロードします

NodeJSは、サーバー上でJavaScriptを実行するためのランタイム環境であり、クラウド開発で使用されるサーバー環境はNodeJSです。npmはノードパッケージマネージャーです。npmを使用すると、クラウド開発に必要な依存関係パッケージを簡単にインストールできます。

npmは、フロントエンド開発に不可欠なパッケージ（モジュール）マネージャーです。その主な機能は、インストール、アンインストール、更新、表示、検索、公開などのパッケージパッケージを管理することです。他のプログラミング言語にも同様のパッケージマネージャーがあります。 Pythonのピップ、PHPのコンポーザー、Javaのメイヴンなど。パッケージマネージャーは、Windowsのソフトウェア管理センターまたは携帯電話のアプリケーションセンターと考えることができますが、それらはビジュアルインターフェイスを使用し、パッケージマネージャーはコマンドラインコマンドラインを使用します。

ダウンロードリンク：Nodejsダウンロードリンク

コンピュータのオペレーティングシステムに応じて、対応するNodeJSインストールパッケージをダウンロードしてインストールできます（インストール中にインストールディレクトリを変更しないでください。次に直接インストールできます）。コンピューターターミナル（Windowsコンピューターの場合はcmdコマンドプロンプト、Macコンピューターの場合はターミナルターミナル）を開き、1行ずつ入力し、Enterキーを押して次のコードを実行します。

node --version
npm --version

v10.15.0と6.11.3が表示されている場合（バージョン番号が異なる場合があります）、Nodejs環境が正常にインストールされたことを意味します。

プログラミングを注意深く学び、1文字、1単語、1つの句読点を間違えないでください。上記のコマンドを入力すると、nodeとnpmの後にスペースがあり、2つの短いダッシュ-であることに注意してください。

5.クラウド機能をデプロイしてアップロードします

cloudfuntionsフォルダーアイコンに小さなクラウドがあり、これがクラウド関数のルートディレクトリであることを示しています。cloudfunctionsを展開すると、login、openapi、callback、echoフォルダーがあり、これらはクラウド関数のディレクトリであることがわかります。ミニプログラムフォルダには、ミニプログラムのページファイルが含まれています。

クラウド関数はcloudfunctionsに配置され、ミニプログラムはミニプログラムのページに配置されます。これは静的ではないため、プロジェクト構成ファイルproject.config.jsonの以下に応じて、これらのフォルダーの名前を変更することもできます。構成項目：

"miniprogramRoot": "miniprogram/",
"cloudfunctionRoot": "cloudfunctions/",

ただし、アプレットページが配置されているフォルダとクラウド機能が配置されているフォルダは、どちらもプロジェクトのルートディレクトリにあり、管理が容易です。

ログインなどのクラウド機能ディレクトリの1つでマウスの右ボタンを使用し、右クリックメニューからターミナルで[開く]を選択します。開いた後、ターミナルに次のコードを入力し、Enterキーを押して実行します。

npm install

「npmは内部コマンドでも外部コマンドでもありません」と表示されている場合は、WeChat開発者ツールで起動したターミナルを閉じる必要がありますが、ターミナルウィンドウを再度開き、クラウド関数ディレクトリにcd / Dと入力して、クラウド関数ディレクトリに移動します。 as cd / DC：\ download \ tcb-project \ cloudfunctions \ loginログインのクラウド機能ディレクトリに入り、npminstallコマンドを実行します。

このとき、クラウド機能の依存モジュールがダウンロードされます。ダウンロードが完了したら、ログインクラウド機能ディレクトリを右クリックし、「作成してデプロイ：すべてのファイル」をクリックします。このとき、ローカルクラウド機能は次のようになります。クラウドにアップロードしました。アップロードが成功したら、クラウド機能にログインします。ディレクトリアイコンが小さなクラウドに変わります。

開発ツールのツールバーにある「クラウド開発」アイコンをクリックしてクラウド開発コンソールを開き、クラウド開発コンソールのクラウド機能アイコンをクリックすると、アップロードされた「ログイン」クラウド機能がクラウド機能リストに表示されます。

すべてのクラウド機能をアップロードする

次に、このプロセスに従って、他のすべてのクラウド機能（openapiなど）をデプロイおよびアップロードします。つまり、上記と同じ手順を実行し、次のように要約します。

クラウド機能ディレクトリを右クリックし、ターミナルで[開く]を選択し、npminstallコマンドを入力して依存ファイルをダウンロードします。

次に、クラウド機能ディレクトリを右クリックし、[作成と展開：すべてのファイル]をクリックします。

クラウド開発コンソール-クラウド機能-クラウド機能リストで、クラウド機能が正常にデプロイされているか確認してください。

ログイン、openapi、echo、コールバックなどのクラウド関数は後で使用されます。デプロイとアップロードが正常に行われていることを確認してください。そうしないと、遭遇したときにエラーが発生します。

openidとクラウド機能のログインを取得する

クラウド機能ログインのデプロイとアップロードに成功したら、クリックしてシミュレーターと携帯電話でopenidを取得できます（プレビューアイコンをもう一度クリックしてQRコードをスキャンする必要があります）。

6. openidを取得し、クラウド関数を呼び出します

openidは、アプレットユーザーの一意の識別子です。つまり、すべてのアプレットユーザーは一意のopenidを持っています。「クリックしてopenidを取得」をクリックし、「ユーザーIDが正常に取得されました」と文字列+数字がユーザー管理ガイドページに表示されている場合は、ログインクラウド機能が正常にデプロイおよびアップロードされていることを意味します。openidの取得に失敗した場合は、次の手順に進む前に、ログインクラウド機能のデプロイとアップロードを解決する必要があります。

クラウド関数の呼び出しの解釈

アプレットのホームページは「pages / index / index」です。これは、app.jsonの構成アイテムまたはシミュレーターの左下隅にあるページパスから確認できます。index.wxmlに次のコードがあります。

クリックしてopenidbuttonを取得>
つまり、[クリックしてopenidを取得]ボタンをクリックすると、bindtapにバインドされたイベントハンドラonGetOpenidがトリガーされます。index.jsでonGetOpenidイベントハンドラを確認できます（インデックスでイベントハンドラonGetOpenidを検索してください） .js比較理解）wx.cloud.callFunction（）インターフェースが呼び出されます（比較理解のためのオープンテクニカルドキュメント）

技術文書：クラウド関数wx.cloud.callFunctionを呼び出す

クラウド関数を呼び出す方法は非常に簡単です。クラウド関数の名前（ここではログイン）と渡す必要のあるパラメーター（ここにはアップロードパラメーターはありません）を入力するだけで、次のように呼び出すことができます。。成功コールバック関数に次のコードを追加して、resオブジェクトを出力します。

console.log('调用login云函数返回的res',res)

コードを追加した後、忘れずに保存してください。ファイルの変更が保存されていない場合は、タブページに小さな緑色の点が表示されます。ショートカットキー（同時に押す）を使用して、CtrlキーとSキーを押して保存できます（Macコンピューターの場合はCommandキーとSキー）。

コンパイル後、「クリックしてopenidを取得」ボタンをクリックして、完全なresオブジェクトを表示します。resオブジェクトには次の3つのパラメーターがあります。

requestID：クラウド開発コンソールでログを検索し、クラウド開発コンソール–クラウド関数–ログを開くために使用できるクラウド関数実行ID。ここでは、クラウド関数の呼び出しログ（戻り結果を含む）をフィルタリングおよび表示できます。）クラウド関数の関数名とrequestIDに基づく）;
result：クラウド関数によって返される結果。logincloud関数によって返される結果には、appidオブジェクトとeventオブジェクトが含まれます。res.result.appidおよびres.result.eventからアクセスできます。
errMsg：クラウド関数が正常に呼び出されたかどうかを示します。
イベント処理関数onGetOpenidがクラウド関数を正常に呼び出した後、次の3つのことが行われます。

console.logを使用してopenidを印刷します。ボタンをクリックしてクラウド機能をトリガーし、コンソールで印刷結果を確認できます。

取得したappidをapp.jsファイルのglobalDataグローバルオブジェクトに割り当てます
。userConsoleページにジャンプします。

userConsoleページは、globalDataからopenidを取り出し、setDataを介してページにレンダリングします。

クラウド開発の最初の経験

新しいクラウド機能

クラウド関数のクラウド関数ルートディレクトリを右クリックし、ポップアップウィンドウで新しいNode.jsクラウド関数を選択します。たとえば、sumと入力し、Enterキーを押して確認します。WeChat開発者ツールは、合計クラウド関数を作成します。ローカル（コンピューター）のディレクトリ。対応するクラウド機能がオンライン環境で作成されます（つまり、自動的にデプロイされ、クラウド開発コンソールのクラウド機能リストに表示されます）。

sumクラウド関数ディレクトリでindex.jsを開き、sum：event.a + event.bをreturn関数に追加し（余分なコンテンツは削除できます）、クラウド関数の増分アップロードを選択することを忘れないでください:(更新ファイル）、sumcloud関数を更新します。

 return {
    
    
    sum:event.a+event.b,
  }

aとbは変数ですが、前とは異なり、サーバー側でaとbを宣言していません。これは、小さなプログラム側で変数を宣言できるためです。

開発者ツールシミュレーターで[新しいクラウド関数をすばやく作成する]をクリックすると、addFunctionページにジャンプし、addFunction.wxmlを開きます。テストクラウド関数が、testFunctionイベント処理関数にバインドされていることがわかります。

<view class="list-item" bindtap="testFunction">
  <text> 测试云函数</text>
</view>

addFunction.jsのtestFunctionを見て、変数aとbがサーバー側の変数にどのように関連しているか、および結果がページにどのようにレンダリングされるかを確認しましょう。testFunctionは、wx.cloud.callFunctionを介してクラウド関数の合計を呼び出します。違いは、データにaとbがあることです。

data: {
    
    
  a: 1,
  b: 2
},

入力されたデータは、クラウド関数に渡されるパラメーターです。つまり、アプレットのパラメーターが最初にクラウド関数に渡され、次にクラウド関数が処理されてから、resオブジェクトが返されます。resオブジェクトを印刷できます。成功コールバック関数の場合：

console.log("sum云函数返回的对象",res)

コンパイル後、テストクラウド関数をもう一度クリックすると、コンソールに出力された結果が表示され、result.result.sumは3になります。数値をレンダリングするためにsetDataを介してresult.result.sumをresultに直接割り当てます。次に、このresult.resultは何ですか？JSON.stringify（）とは何ですか？

result: JSON.stringify(res.result)

result.resultとJSON.stringify（res.result）を出力できます

console.log（ "What is res.result"、res.result）
console.log（ "What is JSON.stringify（res.result）"、JSON.stringify（res.result））
res.resultはオブジェクトであり、 JSON .stringify（res.result）はjson形式です。JSON.stringify（）メソッドは、JavaScript値（オブジェクトまたは配列）をJSON文字列に変換します。これは、オブジェクトがページに直接レンダリングされると、[objectオブジェクト]。

従来のプロジェクトからクラウド開発プロジェクトへの変換

もちろん、前の章でクラウド開発を使用しなかったプロジェクトをクラウドサービスを使用するように変換することもできます。まず、クラウド関数など、アップルトのルートディレクトリに新しいフォルダーを作成してから、のパス構成を追加します。 project.config.jsonのクラウド関数フォルダーはい、

"cloudfunctionRoot": "cloudfunctions/",

次に、新しいミニプログラムフォルダーを作成し、project.config.jsonを除く、ページ、utils、画像、app.js、app.jsonなどのミニプログラムの他のすべてのファイルをミニプログラムフォルダーに配置します。 project.config.jsonにminiprogramRoot構成を追加します。

"cloudfunctionRoot": "cloudfunctions/",
"miniprogramRoot":"miniprogram/",

クラウド関数が正常にデプロイおよびアップロードされた場合は、いつでも呼び出すことができます。アプレットのappidおよびenvironment IDが変更されていない限り、作成したアプレットプロジェクトの数に関係なく、直接呼び出すことができます。デプロイされたクラウド関数。たとえば、以前のログイン、エコー、コールバック、合計、およびその他のクラウド関数。つまり、クラウド機能が正常にデプロイされると、アプレットのすべてのローカルクラウド機能を削除しても、それは常にクラウドサーバーにあります。

クラウド機能ルートディレクトリを作成し、cloudfunctionsフォルダーとして構成した場合、クラウド機能ルートディレクトリにクラウド機能はありません。クラウド機能ルートディレクトリcloudfunctionsフォルダーを右クリックすると、同期クラウド機能リストとすべてのクラウドを選択できます。クラウド内の機能を選択できますリストはすべて一覧表示され（これは単なるリストです）、クラウド機能のコンテンツを変更するには、クラウド機能ディレクトリの1つを右クリックして、クラウド機能のダウンロードを選択できます。

さらに、アプレットのapp.jsの起動時にライフサイクル関数を使用する必要があります

wx.cloud.init()来初始化云开发能力：
onLaunch: function () {
    
    
    if (!wx.cloud) {
    
    
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
    
    
      wx.cloud.init({
    
    
        env: '你的环境ID',
        traceUser: true,
      })
    }
  },

グローバルクラウド開発機能は一度だけ初期化する必要があります。ここでのtraceUser属性はtrueに設定され、ユーザーアクセスはユーザー管理に記録されます。アクセスレコードは、運用分析で確認できます-クラウド開発のユーザーアクセスコンソール。

WeChatミニプログラムクラウドネイティブ開発-クイックスタート

目次