WeChat アプレット クラウド開発の具体的な使用方法のチュートリアル

ミニプログラムクラウド開発入門

クラウド開発の公式ドキュメント
小さなプログラムを開発する場合、インターフェイス関数のロジックを考慮するだけでなく、バ​​ックエンド データのサポートも必要になります。バックエンド データのサポートを得るために、開発者はサーバー、ストレージ、およびデータベースの要件を事前に検討し、アプリケーションと依存関係の展開に時間と労力を費やす必要があります。したがって、小さなプログラムの迅速な立ち上げと反復を実現するために、公式は開発者にクラウド開発機能を提供し、クラウド機能、データベース、ストレージ管理などの必要な機能をサービスの形で開発者に提供します。小規模プログラムの数を削減 小規模プログラムのクラウド開発が提供するインターフェースだけで、バックエンドの知識不足で実現できない要件を実現できます。この章では、Mini Program Cloud Development の使用方法について簡単に説明します。

クラウド データ オペレーションの取得

ヒント: プロジェクトを作成する前に、次の点に注意する必要があります。

  1. 複数のクラウド開発 ID がある場合は、そのうちの 1 つを選択してグローバル app.js にバインドする必要があります。
  2. ノードクラウド機能を作成する前に、現在の環境を選択する必要があります
  3. ノード クラウド機能が作成されたら、それをアップロードしてデプロイする必要があります: クラウドのインストールと依存関係 (新しいものを作成する場合のみ操作)
  4. クラウド機能を変更するたびに、クラウド機能を右クリックして段階的にアップロードする必要があります

伝説
グローバル app.js のバインド ID
ここに画像の説明を挿入
クラウド関数 index.js も ID をバインドする必要があります
ここに画像の説明を挿入
クラウド データベース ID ビュー
ここに画像の説明を挿入
環境を選択
ここに画像の説明を挿入
アップロードしてデプロイする
ここに画像の説明を挿入
増分アップロード
ここに画像の説明を挿入

1. クラウド開発プロジェクトを作成する

ここに画像の説明を挿入

2. クラウド データベースを作成する

2.1 オープンクラウド開発

ここに画像の説明を挿入

2.2 コレクションを作成する

ここに画像の説明を挿入

2.3 レコードを作成する

ここに画像の説明を挿入

3. クラウド機能の作成と定義

3.1 クラウド機能を作成する

3.1.1 cloudfunctions ファイルで現在の環境を選択する

ここに画像の説明を挿入

3.1.2 cloudfunctions を右クリックして node.js クラウド関数を作成する

ここに画像の説明を挿入

3.1.3 作成したクラウド機能フォルダーのアップロードとデプロイ

ここに画像の説明を挿入

ヒント: クラウド関数フォルダーが変更されるたびに、段階的にアップロードされて更新されます

ここに画像の説明を挿入

3.2 クラウド機能の定義

3.2.1 作成したクラウド関数フォルダー index.js に関数を定義する

ここに画像の説明を挿入

4. page.js でクラウド関数を呼び出す

//调用云函数
wx.cloud.callFunction({
    
    name,data})
sendFeed(){
    
    
    console.log("发表留言");
    // 执行云函数
    wx.cloud.callFunction({
    
    
      name:"addFeed",  //云函数的名称
      data:{
    
       //data传递的参数
        msg:this.data.msg, //留言信息
        userInfo:wx.getStorageSync('userInfo'),//用户信息
      }
    })
    .then(res=>{
    
    
      console.log(res)
      // 获取留言
      this.getFeedback()
      // 更新msg
      this.setData({
    
    msg:""})
    })
    .catch(err=>{
    
    
      console.log(err)
    })
  },

以上で、クラウドデータ取得の基本操作は完了です。

クラウド機能でクラウドデータを操作する方法

1. 初期化

 var db = cloud.database()

2.入手

var data = await db.collection("feedback").get()

3.追加

var  data = await db.collection("feedback").add(
data:{
    
    添加数据}
)

クラウドアップロード

1. クラウドデータを取得するためのクラウド機能と、データをアップロードするためのクラウド機能を作成する

1.1 クラウド データ フィードバック クラウド機能の取得でクラウド データベース内のデータを取得する

ここに画像の説明を挿入

1.2 アップロード データ クラウド関数 addfeed の作成

ここに画像の説明を挿入

2.home.jsページでユーザー情報を取得し、アップロード方法を定義する

ここに画像の説明を挿入

3. 追加されたメッセージ情報を home.js の addfeed クラウド関数にアップロードし、アップロードが成功したらページ msg を更新します。

4. addfeed クラウド関数で追加されたアクションを実行し、クラウド データに戻ります

ここに画像の説明を挿入
完全なコード (これはメッセージを送信する場合です)
フィードバック/index.js コード

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
    
    env: 'cloud1-3gqtnkb6095e983c'}) // 使用当前云环境
// 定义数据库
const db =cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
    
    
  // wx的上下文信息
  const wxContext = cloud.getWXContext()
  // event调用函数时传递的参数
  // 获取集合feedback的数据 云端集合的名字
  // get获取数据
  // awiat等待
  const data = await db.collection("feedback").get({
    
    
    data: {
    
    
      msg: event.msg,
      datatime: new Date(),
      userInfo:event.userInfo,
    },
  })
  
  return {
    
    
    data:data.data, //返回数据集合
    event,
    sum:event.a+event.b, //返回a+b结果
    openid: wxContext.OPENID, //openid与appid
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

addfeed/index.js コード

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
    
    env: 'cloud1-3gqtnkb6095e983c'}) // 使用当前云环境
// 定义数据库
const db =cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
    
    
  // wx的上下文信息
  const wxContext = cloud.getWXContext()
  // event调用函数时传递的参数
  // 获取集合feedback的数据 云端集合的名字
  // get获取数据
  // awiat等待
  const data = await db.collection("feedback").add({
    
    
    data: {
    
    
      msg: event.msg,
      datetime: new Date(),
      userInfo:event.userInfo,
    },
  })
  
  return {
    
    
    data:data.data, //返回数据集合
    event,
    sum:event.a+event.b, //返回a+b结果
    openid: wxContext.OPENID, //openid与appid
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

ページの home.wxml コード

<view>
  <textarea value="{
     
     {msg}}" style="background-color: #e784c9;" bindinput="inputHd"/>
  <button type="primary" bindtap="addFeed">发表</button>
</view>
<view class="list">
  <view wx:for="{
     
     {list}}" wx:key="_id">
    <view>
      <image src="{
     
     {item.userInfo.avatarUrl}}" style="width: 33px; height: 33px;" mode=""/>
      <text>{
   
   {item.userInfo.nickName}}</text>
      <text>{
   
   {item.datetime}}</text>
    </view>
    <view> {
   
   {item.msg}} </view>
  </view>
</view>

ページの home.js コード

// pages/home/home.js
const {
    
    formatDate} =require("../utils/index")
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    list:[],//用户信息
    msg:"",
  },
  inputHd(e){
    
    
    // textarea与msg双向绑定
    this.setData({
    
    msg:e.detail.value})
  },
  addFeed(){
    
    
    // 获取本地用户信息
    const userInfo=wx.getStorageSync('userInfo')
    // 如果有用户信息
    if(userInfo&&userInfo.nickName){
    
    
      // 直接发表留言
      this.sendFeed()
    }else{
    
    
      // 否则 先获取用户头像
      wx.getUserProfile({
    
    
        desc: '获取用户头像',
        success:(res)=>{
    
    
          // 存储用户头像信息
          wx.setStorageSync('userInfo',res.userInfo)
          // 然后发表留言
          this.sendFeed()
        }
      })
    }
  },
  sendFeed(){
    
    
    console.log("发表留言");
    // 执行云函数
    wx.cloud.callFunction({
    
    
      name:"addFeed",  //云函数的名称
      data:{
    
       //data传递的参数
        msg:this.data.msg, //留言信息
        userInfo:wx.getStorageSync('userInfo'),//用户信息
      }
    })
    .then(res=>{
    
    
      console.log(res)
      // 获取留言
      this.getFeedback()
      // 更新msg
      this.setData({
    
    msg:""})
    })
    .catch(err=>{
    
    
      console.log(err)
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
    
    this.getFeedback()
  },
  getFeedback(){
    
    
    wx.cloud.callFunction(
      {
    
    name:"feedback",data:{
    
    a:3,b:2}}
    )
    .then(res=>{
    
    
      console.log(res)
      this.setData({
    
    list:res.result.data.map(item=>({
    
    ...item,datetime:formatDate(item.datetime,"-")}))})
    })
    .catch(err=>
      console.error(err)
    )
  },

レンダリング
ここに画像の説明を挿入

検索クエリ Collection.where()

公式ドキュメントを検索
クエリ条件を指定し、新しいクエリ条件で新しいコレクション リファレンスを返す

//搜索语法
db.collection('todos').where({
    
    
  _openid: 'user-open-id',
  done: false
})
.get({
    
    
  success: function(res) {
    
    
    // res.data 是包含以上定义的两条记录的数组
    console.log(res.data)
  }
})

PagingCollection.skip

ページネーションの公式ドキュメント
Collection.skip では、クエリが結果を返すときに、ページングに使用されることが多い、指定されたシーケンスの後の結果から返すことが指定されています。

//分页语法
db.collection('todos').skip(10)
  .get()
  .then(console.log)
  .catch(console.error)

並べ替え Aggregate.sort()

公式ドキュメントの並べ替え
Aggregate.sort() 指定されたフィールドに従って入力ドキュメントを並べ替えます

sort({
    
    
    <字段名1>: <排序规则>,
    <字段名2>: <排序规则>,
})
//排序规则>可以是以下取值:
//1 代表升序排列(从小到大);
//-1 代表降序排列(从大到小)

おすすめ

転載: blog.csdn.net/promise466/article/details/127914795