投票アプレットはクラウド データベースに接続し、候補者のリストを読み取ります。
1. まず、クラウド開発コンソールのデータベースに voteWorks コレクションを作成します。
2. voteWorks データ コレクションで、テーブルのデータ構造を設計します。
3. データアクセス許可を構成します。
4. アプレット側でクラウド データベースに接続し、選択した文字のリストを読み取ります。
キーコードは次のとおりです。
// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const voteWorks = db.collection('voteWorks');
// 数据库操作符
const _ = db.command;
// 显示 loading 提示框
wx.showLoading({
title: '拼命加载中'
});
// 数据库集合的聚合操作实例
voteWorks
.where({
_id: _.exists(true)
})
.orderBy('name', 'desc')
.get()
.then(res => {
// 获取集合数据，或获取根据查询条件筛选后的集合数据。
let data = res.data || [];
// 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
this.setData({
participantList:data
});
// 隐藏 loading 提示框
wx.hideLoading();
})
5. インターフェースを通じてデータベースの実データを取得した後、this.setData()を通じてロジック層からビュー層にデータを送信し、平たく言えばデータを更新してページに表示することです。
ページのレンダリング効果:
6. ユーザーエクスペリエンスを向上させるために、通常、データをリクエストするときに wx.showLoading() を使用して読み込みプロンプトボックスを表示しますが、その目的は、現在のステータスがデータをリクエストしていることをユーザーに伝え、ユーザーに辛抱強く待ってもらうことです。
7. ページのレンダリングが完了したら、wx.hideLoading を積極的に呼び出してプロンプト ボックスを閉じ、ロードが完了したことを示す必要があります。
投票アプレットからクラウド データベースへの移行、候補者リストの読み取り、ページのレンダリングまでのプロセス全体は、おおよそ次のようになります。