微信小プログラムクラウド開発機能実践

前言
フロントエンド開発者は,openIdの取得,ウィジェットコードの生成,微信支払いなど,ウィジェットサービス側の開発に常に触れる必要がある.これらの機能はバックエンドサービスと組み合わせて開発しなければならない.これにより、フロントエンド開発者はバックエンドの開発言語、例えばJava、Python、PHPなどに接触し、学習しなければならず、追加の学習コストが発生する可能性がある.
ウィジェットの 機能はフロントエンド開発者に福音をもたらし、クラウド開発は開発者に完全なオリジナルクラウドサポートと微信サービスサポートを提供し、 ・プラットフォームが提供するAPIを使用してコアビジネス開発を行い、迅速なオンラインと反復を実現することができる.同時に、開発者が使用しているクラウドサービスとは反発しません.
ここがポイントで、囲んで試験しなければなりません!
小プログラムクラウド開発の基礎能力
ウィジェットのクラウド開発は、クラウド関数、データベース、ストレージ、クラウド呼び出しの4つの基礎能力を提供しています.
コンピテンシー
さぎょう
説明
クラウド関数
サーバをセルフビルドする必要はありません
クラウド上でコードを実行し、微信プライベートプロトコルの天然認証を行い、開発者は自分のビジネスロジックコードを書くだけです.
データベース#データベース#
独自のデータベースを構築する必要はありません
ウィジェットのフロントエンドでもクラウド関数でも読み書きできるJSONデータベース
きおく
ストレージとCDNを独自に構築する必要はありません
ウィジェットのフロントエンドでクラウドファイルを直接アップロード/ダウンロードし、クラウド開発コンソールで可視化管理する
クラウドコール
オリジナルの微信サービス統合
クラウド関数に基づいて、サービス側の呼び出し、オープンデータの取得など、ウィジェットのオープンインタフェースを使用する能力
小プログラムクラウド開発の実践
一、小プログラムクラウド開発プロジェクトの作成
注意:小プログラムクラウド開発プロジェクトと一般的な小プログラムプロジェクトの構造は の(私たちは違う、違う、自分で頭でリズムを補う).

kanshu/     
  - cloudfunctions/      
    - saveOpenId/      
      - index.js
      - package.json
  - miniprogram/     
    - pages/     
      - index/   
        - index.js
        - index.wxml
        - index.wxss
        - index.json
    - app.js      
    - app.json      
    - app.wxss      
  - README.md
  - project.config.json

二、操作クラウド能力
1.クラウド開発の開通
微信開発者ツールのメインパネルで、クラウド開発ボタンをクリックし、クラウド開発サポートを開通します.
注意:クラウド開発が開通した後、10分ほど待たなければなりません.インスタントコールが発生する可能性がありますcloud init error: { errMsg: "invalid scope" }この時点でオフィシャルバックグラウンドでサービスの準備をしている.
2.主入口app.jsファイル、初期化クラウド呼び出し

//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('    2.2.3              ')
    } else {
      wx.cloud.init({
        //         ID,    ID          
        env: 'xxoo',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

クラウドコンピテンシーを使用する場合は、通常、ウィジェットの初期化時にこのメソッドを呼び出します.
3.具体的な業務:登録機能-ユーザーのopenid及びユーザー基本情報を取得し、クラウドデータベースに保存する
ウィジェット:

// miniprogram/pages/index/index.wxml
  

// miniprogram/pages/index/index.js
page({
  data: {
    //     
  },
  /**
   * onGetUserInfo()
   * @description         ，       
   * @param {object} e          
  */
  onGetUserInfo: function(e) {
    if (e.detail.userInfo) {
      wx.cloud.callFunction({
        name: 'saveUserInfo',
        data: {
          userInfo: e.detail.userInfo
        },
        success: (res) => {
          console.log(res)
          if (res.result && res.result._id) {
            wx.showToast({
              title: '    ',
            })
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '    ...',
            icon: 'none'
          })
        }
      })
    }
  }
})

ここを注意してください.

//      
wx.cloud.callFunction({
  //     
  name: 'saveUserInfo',
  //   
  data: {}

クラウドたんい:クラウド関数クラウドかんすう

// cloudfunctions/saveUserInfo/index.js

//      SDK
const cloud = require('wx-server-sdk')

//    
cloud.init()

//      
let db = cloud.database()

//        
exports.main = async (event, context) => {
  //       ，               
  const wxContext = cloud.getWXContext()

  //       
  try {
    //        ，             
    
    //        ，             users
    return await db.collection('users').add({
      data: {
        created: new Date(),
        userInfo: event.userInfo,
        openid: wxContext.OPENID
      }
    })
  } catch (e) {
    console.error(e)
  }
}

クラウド関数は、ローカライズされたテストの場合は、必ずアップロードして導入する必要があります.npm installインストールパッケージ依存
クラウド:データベース
登録ボタンをクリックすると、クラウドデータセットusersにデータが作成されます.
後記
以上が胡哥今日皆さんに分かち合う内容で、好きな友达は覚えています ・右下のボタンをクリックします 、もっと多くの友达にお勧めしますよ、多くの伝言を残して交流することを歓迎します...
胡兄は言うことがあって、1つの技術があって、気持ちの胡兄があります!京東開放プラットフォームの首席先端は城獅子を攻める.あなたと一緒に大フロントエンドについて話して、フロントエンドシステムのアーキテクチャを分かち合って、フレームワークの実現原理、最新の最も効率的な技術実践!
スキャンコードを長く押して注目して、もっとかっこよくてきれいですよ!胡兄に注目して公衆番号を言って、胡兄と引き続き深く交流することができますよ!