我的環境名稱為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 () {
}
})
頁面效果