• 技术文档
  • 专业的网站建设公司
  • 020-39182790

技术文档

您现在的位置:首页 > 服务支持 > 技术文档
微信小程序云开发获取数据库数据渲染到列表和详情页上
作者:织晶客服部 发布于:2020/9/29 11:04:43 点击量: 来源:织晶网络

前提条件:创建微信小程序云开发数据表集合,把对应的数据添加到数据库里

1.     云开发获取数据库数据渲染到列表上的方法:

01. js代码:

const db = wx.cloud.database({}//连接数据库

Page({

 //生命周期函数--监听页面显示

 onShow: function() {

  var that=this;

   // case【渲染数据】 caselist是数据表,caseda是获取的数据

   db.collection('caselist').get({

    success:function(res){

      console.log(res.data);

      that.setData({

        caseda:res.data

      })

    }

  }

}

})

02. wxml代码:

<view class="case">

    <view class="casebox"  wx:for="{{caseda}}" >

    <navigator url="/pages/content/content-case/content-case?id={{item._id}}">

    <image  src="{{item.img}}">image>

    <text>{{item.title}}text>

   navigator>

    view>

    view>

这样数据就能渲染到前端列表上了

2.     app.json中,创建详情页文件content-case

{

    "pages": [

        "pages/index/index",

        "pages/content/content-case/content-case"

]

}

3.     云开发获取数据库数据渲染到详情页上的方法:

01. js代码:

const db = wx.cloud.database({}//连接数据库

Page({

   //生命周期函数--监听页面加载

  ////获取某一指定ID数据,渲染到详情页上,caselist为数据表集合

  onLoad: function (options) {

     console.log(options)

    db.collection('caselist').doc(options.id).get({

      success: res => {

        console.log(res.data)

        this.setData({

          caselist: res.data

        })

      }

    })

  }

})

02. wxml代码:

   <view class="contentca">

   <view class="contentca-list" >

    <view class="calist-tit"><text>{{caselist.title}}text>view>

     <view class="calist-img"><image  src="{{caselist.img}}"  bindload="imageLoaddata-index="{{ index }}

 style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;">image>view>

<navigator url="{{caselist.siteurl}}"> 

    <view class="calist-tit"><text style="font-size:28rpx;">{{caselist.siteurl}}text>view>

 navigator>   

      <view class="calist-text"><text>{{caselist.content}}text>view> 

    view>

    view>

这样数据就能渲染到指定ID前端详情页上了。

其他效果如wxss样式可自行修饰。



上一篇:Node.js特点与应用场景

下一篇:网页前端HTML、JS、CSS应用的主要知识点