テスト済み
仕事：
写真などの静的リソースはアプレットのクラウド ストレージにアップロードされ、元のアプレット構文を使用して呼び出しと表示が行われます。
一般的なデータベースの読み取りと表示
1. シミュレーションテストデータ、静的データテスト＋クラウド開発基本構成
例えば：
Page({
data: {
schools:[{
name:'A',
addr:'a市',
imgUrl:'https://1.jpg'
},{
name:'B',
addr:'b市' ,
imgUrl: './images/3.jpg'
}]
}
})2. クラウドストレージ + 構成データベースを使用する
1. クラウドストレージを利用する
クラウド開発-ストレージ-(新しいフォルダー) 学校-アップロード 1.jpg、この時点で fileId が生成されます。fileId の形式は [固定環境 ID+ファイル ディレクトリ +ファイル名]例:
2. データベースを構成する
クラウド開発-データベース-コレクションの作成-(コレクション名、つまりテーブル名を入力) imgsとschools-対応するコレクションをクリック-レコードリスト追加レコード-フィールド/タイプ/値を追加-OK
テストデータに従ってさらにいくつか入力します
3.js+wxml
js>
Page({
data: {
schools:[]
},
onLoad: function (options) {
const db = wx.cloud.database();
const _ = db.command;
db.collection("imgs").where({
purpose: 'swiper'
}).get().then(res => {
this.setData({
imgs: res.data
})
});
db.collection('schools').orderBy('name', 'desc').where({
addr: _.neq("b市"),
}).get().then(res => {
this.setData({
schools: res.data
})
});
}
})グローバル変数 fileEnvId をクラウド ストレージ環境のアドレスに設定します。
//app.js
App({
globalData: {
fileEnvId:'cloud://cloud1-sdfaasdd.547a-cloud1-dfaasdd-156499'
},wxml>
<view>
<block wx:for="{
{schools}}" wx:key="index" wx:for-item="school">
<view class="school" bindtap="navigate" data-addr='{
{school.addr}}' ">
<image class="school-img" src="{
{fileEnvId}}{
{school.imgUrl}}"></image>
<view class="school-name">{
{school.name}}</view>
</block>
</view>