微信小程序+云开发，实现对数据库表里的数据查询遍历在页面上

我的环境名称为tjn-k3u19，我的表名称为gold，字段情况name,address,_id,fo,tell

app.js里面配置环境

//数据库

const db = wx.cloud.database({

env: "tjnk3u19"

});

//数据库

 

wxml页面

<!-- 显示所有的登记信息 -->
<view class="div">
<text class="head">登记用户的信息</text>
<view  wx:for="{{list}}" wx:key="id">
 <view class="vw">
  <label for="" class="font14" class="cs">姓名</label>
    <label for="" class="font14" class="cs">{{item.name}}</label>
    </view>
    <view class="vw">
     <label for="" class="font14" class="cs">手机号码</label>
       <label for="" class="font14" class="cs">{{item.tell}}</label>
          </view>
    <view class="vw">
        <label for="" class="font14" class="cs">住址</label>
        <label for="" class="font14" class="cs">{{item.address}}</label>
           </view>
    <view class="vw">
         <label for="" class="font14" class="cs">佛语</label>
         <label for="" class="font14" class="cs">{{item.fo}}</label>
    </view>
    <view class='line'></view>
</view>
</view>
<!-- 显示所有的登记信息 -->

wxss页面

/* pages/query/query.wxss */
.head{
  font-size: 21px;
  margin-left: 78px;
}
.cs{
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line{
width: 100%;
height: 1rpx;
background-color:#ffd995;
margin-top:7px;
margin-bottom:7px;
}
.vw{
  margin-top: 5px;
}
/* 顶部返回的 */
.inaver._30f2b4d {
  box-sizing: border-box;
  padding-top: 44rpx;
  width: 100vw;
  height: 160rpx;
  display: flex;
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 0;
}
 
.inaver .left._30f2b4d {
  width: 100rpx;
  height: 100rpx;
  margin: 8rpx;
}
 
.inaver .left image.icon._30f2b4d {
  width: 60rpx;
  height: 60rpx;
  padding: 10rpx;
  margin: 10rpx;
}
 
.inaver .center._30f2b4d {
  height: 100rpx;
  line-height: 100rpx;
  flex: 1;
  margin: 8rpx;
}
 
.inaver .right._30f2b4d {
  width: 240rpx;
  height: 100rpx;
  margin: 8rpx;
}
 
.protect-inaver._30f2b4d {
  box-sizing: border-box;
  width: 100vw;
  height: 160rpx;
}

js页面

// pages/query/query.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   list:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    //1、引用数据库
    //const db = wx.cloud.database({ envs: "tjnk3u19"})
    const db = wx.cloud.database({});
    const cont = db.collection('gold');
    //2、开始查询数据了  news对应的是集合的名称
    cont.get({
      //如果查询成功的话
      success: res => {
        //这一步很重要，给ne赋值，没有这一步的话，前台就不会显示值
        this.setData({
          list: res.data
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  goBack:function(){
    wx.switchTab({
      url: '../index/index',//指定界面
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

页面效果