微信小程序云开发读取数据库集合,显示到前端页面
开发一个小程序时,需要使用云开发的数据库,然……这是一个很“悲惨”故事。
不知什么原因Page里的生命周期函数onload()等函数一直无效,感觉是因为用了Component的原因,导致里面的Page周期函数都失效了。
中间省略很多很多次尝试…………
无奈之下,只能“曲线救国”,定义了一个全局变量,写在Page页的最前面,很快的数据库的集合能够调用了,还没高兴完,发现数据库的数据是获取了,但是用不了呀,Page定义的data在Page里面,在外面赋不了值,但是到里面又获取不了数据库的集合,心塞呀……this.setData()又一直不能赋值。
最终万般尝试之下,发现还是能够解决的,下面将解决过程简单记录一下,仅供参考(默默感慨一下,微信小程序开发工具是真的该开发下一版了,原来是一个域名半天搞不定,现在又数据库………)
一、在 app.js 中设定全局变量
globalData:{
ne:[
{
test:"ggggggggggg"
}
],
}
二、在需要使用数据库数据的 js 页面( xxx.js )中加载数据库数据
//获取应用实例
const app = getApp()
// 初始化 cloud
wx.cloud.init();
//1、引用数据库
const db = wx.cloud.database({
//这个是环境ID,不是环境名称
env: 'xxxxxx'
})
//2、开始查询数据了 yyyyy对应的是集合的名称
db.collection('yyyyy').get({
//如果查询成功的话
success(res) {
//将获得的数据集加入到原来的数据集中
app.globalData.ne.push(res.data)
//调试一下,是否加入
//这里需要多多注意一下,数据加入后都是在下标1里面的
console.log(app.globalData.ne)
},
})
Page({
/**
* 页面的初始数据
*/
data: {
//这里可以直接用全局变量赋值
ne: app.globalData.ne
},
//…………其他各个函数
})
三、在对应 wxml 页面中使用获取到的数据
<view>
<view wx:for='{{ne[1]}}' wx:key='{{index}}'>
<text>{{item.test}}\n</text>
<text>{{item.test2}}</text>
</view>
</view>
注意 wx:for 那里要写个 [1] ,之后调用就是一般的for循环与数组之间的关系,按照这里的示例是可以全部调用的,循环调用,如果需要调用指定个数或者内容可以自己再研究下,这个应该不是难点。
四、附数据库数据存储