WeChat ミニプログラムクラウド開発のクイックスタート (2/4)

序文

「WeChat ミニプログラムクラウド開発クイックスタート (1/4)」の知識を復習しましょう。前章ではクラウド開発のメリットと機能を学び、コードボーイメモのローカル版からオンライン版への移行を完了し、主にクラウドデータベースとクラウドを利用したクラウドデータベースの直接運用について学びました。アプレット内の API:

get() を使用してデータベースにクエリを実行します
add()を使用してデータを追加しました
update()を使用したデータ変更
データはremove()を使用して削除されました

この章では、実際のビジネスでもよく使われる「ソート」、「精密」、「ファジー」、「ページング」の4つのクエリ方法を紹介します。

リストの並べ替え

デフォルトでは、アプレットによってクエリされたリストは時間順に並べ替えられ、最後に追加された最新データが表示されます。ただし、実際の要件は、最新の追加が一番上にある必要があるため、現時点では並べ替え関数 orderBy を使用して並べ替えルールを変更する必要があります。

orderBy での具体的な使用方法 (get メソッドを使用する前に使用される、データベースオブジェクトを通じて直接チェーンされるメソッド):
ドキュメントサンプルコード: 進捗状況による昇順ソート To Do 項目

db.collection('todos').orderBy('progress', 'asc')
  .get()
  .then(console.log)
  .catch(console.error)

パラメータは次のとおりです。

ソートするフィールドの名前
特定のルールを並べ替える

asc: 小さいものから大きいものへの昇順
desc: 大きいものから小さいものへの降順

同時に、複数のフィールドの組み合わせと並べ替えをサポートしており、呼び出し順序に従って優先順位が決定されます。
この API を学習するときに、具体的な要件を実現する方法を考えてみましょう。この要件を実現するには 2 つの方法があります。 :

新しい時間フィールドの並べ替え

このとき、追加/変更時にタイムスタンプフィールド createTime を設定し、タイムスタンプフィールドで並べ替えることができます。
createTime 属性コードを追加し、編集ページの save メソッドに記述します
タイムスタンプを取得する 4 つの方法

let createTime1 = Date.parse(new Date()); // 精确到秒
let createTime2 = new Date().getTime(); // 精确到毫秒
let createTime3 = new Date().valueOf(); // 精确到毫秒
let createTime4 = Date.now(); // 精确到毫秒，实际上是new Date().getTime()

ソートコード:

db.collection('memo').orderBy('createTime', 'desc').get()

結合された時間フィールドの並べ替え

さらに、新しいフィールドを追加せずに、複数のフィールドを使用して並べ替えを行い、同じ効果を達成した学生もいます。

db.collection('memo').orderBy('date','desc').orderBy('time','desc').get()

最初に日付が並べ替えられ、次に時刻が並べ替えられます。ここで注意が必要なのは、時間だけをソートする学生もおり、この場合、同じ日のデータであれば普通にソートされるのですが、複数日になると順番がめちゃくちゃになってしまいます。

コンテンツによるクエリ

メモを効率よく探すためには検索が欠かせませんので、次にwhere関数を使って検索機能を実装していきます。まず第一に、検索ボックスが必要です。ここでちょっとしたトリックを説明します。一般的に使用されるコンポーネントの一部は、成熟した UI コンポーネントライブラリを参照することですぐに実装できます。前回は、npm アプリケーション時間ツールキットの使用方法を学習しました。次に、ライブラリは WeUI コンポーネントをインポートします。

UIコンポーネントライブラリを使用する

app.json で設定します。

{
  "useExtendedLib": {
    "weui": true
  }
}

これは、対応する拡張ライブラリに関連する npm パッケージの最新バージョンを導入するのと同等であり、アプレットのパッケージサイズを占有しません。
2. 使用するページの json で検索コンポーネントを構成します

{
  "usingComponents": {
    "mp-searchbar": "weui-miniprogram/searchbar/searchbar"
  }
}

ページ上の必要な場所にレイアウトコードを追加し、リストの上と見出しの下に挿入します。

<view>
  <!-- 头部布局 -->
   <view class="page__bd">
    <mp-searchbar bindinput="searchTitle" ></mp-searchbar>
  </view>
  <!-- 列表布局 -->
</view>

表示効果:

4. 入力ボックスのデータを監視する

searchTitle: function (event) {
    console.log('search',event.detail.value)
  }

この時点で、UIコンポーネントライブラリに関しては「最近出会ったな」という気持ちを誰もが抱いているはずです。ただし、そうは言っても、コンポーネントライブラリはよく使用されるコンポーネントのみをカバーしています。コンポーネントライブラリにコンポーネントがない場合でも、正直に記述する必要があります。したがって、スタイルを記述する能力は依然として非常に重要であり、もっと練習する必要があります学習プロセス中に。

正確なクエリ

データを取得したらクエリを開始しますが、ここで getMemoList 関数を変更する必要があります。

// 获取备忘录列表，支持搜索标题
function getMemoList(value) {
  // 1. 获取数据库引用
  const db = wx.cloud.database()
  // 2. 找到集合获取数据
  let memo = db.collection('memo')
  // 3. 判断是否有查询数据
  if (value) {
    memo = memo.where({
      title: value
    })
  }
  // 4. 判断查询返回数据
  return memo.orderBy('createTime', 'desc').get()
}

そして、聞いているときに呼び出します

searchTitle: function (event) {
    let value = event.detail.value
    getMemoList(value).then(res=>{
      console.log(res.data)
      this.udpateList(res.data)
    })
  }

効果を実感してください:

しかし、実際のシナリオでは、メモのタイトルが長すぎてユーザーが覚えにくい場合があるため、あいまい一致を使用することがよくあります。

ファジークエリ

ここでは、クエリ条件は主に正規表現で照合され、正規オブジェクトの構築には RegExp コンストラクターが使用されます。

memo.where({
      title: db.RegExp({
        regexp: value, //从搜索栏中获取的value作为规则进行匹配。
        options: 'i', //大小写不区分
    })

効果を実感してください:

ページングクエリ

メモを長く使用するとデータも増加しますが、このとき実際の需要を一度にロードする必要はなく、ページングの需要も追随します。アプレット側はクラウドデータベースのget()を操作してデータAPIを取得し、一度に最大20件のレコードを取得できます。

では、データをどのようにページネーションするのでしょうか? 公式のケースは次のとおりです。

db.collection('todos')
  .where({
    _openid: 'xxx', // 填入当前用户 openid
  })
  .skip(10) // 跳过结果集中的前 10 条，从第 11 条开始返回
  .limit(10) // 限制返回数量为 10 条
  .get()
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.error(err)
  })

主にスキップとリミットを通して。
スキップ: 最初から取得するデータの数制限
: 一度に取得するデータの数

実際の業務に合わせて導入してみよう

ページ数とページあたりの量を定義します

 /**
   * 页面的初始数据
   */
  data: {
    pageNo:0, // 默认第一页
    pageSize:5, // 一页5条数据
  },

変換リストデータクエリ機能

function getMemoList(pageNo, pageSize) {
  const db = wx.cloud.database()
  return db.collection('memo')
    .skip(pageNo * pageSize)
    .limit(pageSize)
    .orderBy('createTime', 'desc')
    .get()
}

最初の呼び出しで渡されるパラメータ

onShow() {
    getMemoList(this.data.pageNo,this.data.pageSize).then(res => {
      this.udpateList(res.data)
    })
  }

ページプルコールバックイベントをリッスンする

// 上拉加载
  onReachBottom (){
    this.loadList()
  }

特定のデータ読み込みロジックを実装する

async loadList(){
    // 1. 获取总条数
    let {total} = await getListTotal()
    // 2. 判断是否全部已经加载完毕
    if(this.data.list.length<total){
     // 如果没有加载完
     // 提示数据加载中
      wx.showLoading({
        title: '数据加载中...',
      })
      // 当前页+1
      this.data.pageNo ++
      // 获取下一页数据
      let {data} = await getMemoList(this.data.pageNo,this.data.pageSize)
      this.setData({
        // 拼接数据，页面展示
        list:this.data.list.concat(data)
      })
      // 关闭加载提示
       wx.hideLoading()
    }else{
    // 加载完成提示：“无更多数据”
      wx.showToast({
        icon:'error',
        title: '无更多数据',
      })
    }
  },

知らせ：

上記のロジックでは、async/await を使用してコールバックを減らし、コードの読み取りと書き込みを容易にします。
上記のロジックでリストの総数を取得するために使用される getListTotal では、count 関数を使用します。

function getListTotal() {
  const db = wx.cloud.database()
  return db.collection('memo').count()
}

指定された戻り値

実際の業務では、リストの小項目には多くの詳細が含まれることが多いですが、リストにはいくつかの重要な情報が表示されていればよいので、現時点では、リストに表示する必要があるフィールドをチェックし、戻り結果を指定するだけで済みます。必須フィールドがない場合は戻る必要はありませんので、フィールド達成をご利用ください。
例: 現在のリストには、タイトルフィールドのデータのみを表示する必要があります。

// 获取备忘录列表
function getMemoList(pageNo, pageSize) {
  const db = wx.cloud.database()
  return db.collection('memo')
    .field({
      title: true,
    })
    .get()
}

データリターン

実際のビジネスシナリオでは、通常、リストはすべてのデータをクエリしません。詳細をクリックすると、ID を介してすべてのデータがクエリされます。したがって、ID フィールドをリストページから詳細ページのパラメータに渡す最良の方法は、次のように渡すことです。リストをクリックしてオブジェクトの詳細ページに移動します。

要約する

今日学びましょう:

データベースの順序ソート条件による
拡張ライブラリ WeUI コンポーネントライブラリを使用する
データベースのクエリ条件
データベーススキップ、リミット、カウントの組み合わせによりページクエリを実現
データベースフィールドは返されるフィールドを指定します