testado
negócios:
Recursos estáticos, como imagens, são carregados no armazenamento em nuvem do applet e a sintaxe original do applet é usada para chamar e exibir
Leitura e exibição geral do banco de dados
1. Dados de teste de simulação, teste de dados estáticos + configuração básica de desenvolvimento em nuvem
por exemplo:
Page({
data: {
schools:[{
name:'A',
addr:'a市',
imgUrl:'https://1.jpg'
},{
name:'B',
addr:'b市' ,
imgUrl: './images/3.jpg'
}]
}
})2. Use armazenamento em nuvem + banco de dados de configuração
1. Use o armazenamento em nuvem
Cloud development-storage-(new folder) school-upload 1.jpg, fileId será gerado neste momento, e o formato de fileId é [id de ambiente fixo+diretório de arquivo+nome de arquivo] por exemplo:
2. Configure o banco de dados
Cloud development-database-create collection-(digite o nome da coleção, ou seja, o nome da tabela) imgs e schools-clique na coleção correspondente-lista de registros adicionar registro-adicionar campo/tipo/valor-OK
Insira mais alguns de acordo com os dados do teste
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
})
});
}
})Defina a variável global fileEnvId para o endereço do ambiente de armazenamento em nuvem
//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>