小程序开发之从数据库获取数据显示在页面

由于才开始学习，只是做个案例，格式什么的就随便写了下

效果如下：

testQuery.wxml

<view class="guide">
    <text class="headline"></text>
    <text class="p"></text>
    <text class="p"></text>
    <text class="p"> 点击查询按钮</text>
    <button size="mini" type="default" bindtap="onQuery">查询记录</button>
    <view class="table">
        <view class="tr">
            <view class="th" style="width:10%">姓名</view>
            <view class="th" style="width:10%">性别</view>
            <view class="th" style="width:30%">身份证</view>
            <view class="th" style="width:10%">身高</view>
            <view class="th" style="width:30%">出生地</view>
        </view>
    </view>
<view class="tr" wx:for="{{ne}}">
    <view class="td" style="width:5%">{{item.userName}}</view>
    <view class="td" style="width:10%">{{item.sex}}</view>
    <view class="td" style="width:23%">{{item.idcard}}</view>
    <view class="td" style="width:10%">{{item.hight}}</view>
    <view class="td" style="width:30%">{{item.birthplace}}</view>
</view>
  </view>

testQuery.js

Page({

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

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },
    

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

    },
    onQuery: function() {
        const db = wx.cloud.database()
        // 查询当前用户所有的 counters
        db.collection('test').where({
          _openid: this.data.openid
        }).get({
          success: res => {
            this.setData({
              queryResult: JSON.stringify(res.data, null, 2),
              ne: res.data
            })
            console.log('[数据库] [查询记录] 成功: ', res)
          },
          fail: err => {
            wx.showToast({
              icon: 'none',
              title: '查询记录失败'
            })
            console.error('[数据库] [查询记录] 失败：', err)
          }
        })
      },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

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

    },

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

    },

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

    },

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

    },

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

    }
})

testQuery.wxss

.table{
    border-right: 0;
    border-bottom: 0;
    /* width: 70%; */
    border: 1px solid #dadada
    }
    .tr{
       display: flex;
      justify-content: space-between
    }
    
    .td {
    padding: 10px;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    text-align: center;
    font-size-adjust: 0.1 ;
    width:100%;
    text-overflow:ellipsis;
    word-break: keep-all;word-wrap: break-word;white-space: pre-line;
    
    /* overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; */
  
      }
    
    .th {
    font-weight: 100;
     background-color: #13921a;  
     text-align: center;
    
    }