tested
business:
Static resources such as pictures are uploaded to the applet cloud storage, and the original applet syntax is used to call and display
General database reading and display
1. Simulation test data, static data test + cloud development basic configuration
eg:
Page({
data: {
schools:[{
name:'A',
addr:'a市',
imgUrl:'https://1.jpg'
},{
name:'B',
addr:'b市' ,
imgUrl: './images/3.jpg'
}]
}
})2. Use cloud storage + configuration database
1. Use cloud storage
Cloud development-storage-(new folder) school-upload 1.jpg, fileId will be generated at this time, and the format of fileId is [fixed environment Id+file directory+file name]eg:
2. Configure the database
Cloud development-database-create collection-(enter the collection name, that is, the table name) imgs and schools-click the corresponding collection-record list add record-add field/type/value-OK
Enter a few more according to the test data
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
})
});
}
})Set the global variable fileEnvId to the address of the cloud storage environment
//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>