微信小程序云开发读取数据库集合，显示到前端页面

àì夳堔傛蜴生んèń 2022-02-18 19:37 782阅读 0赞

开发一个小程序时，需要使用云开发的数据库，然……这是一个很“悲惨”故事。

不知什么原因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** 页面中使用获取到的数据

**注意 wx:for 那里要写个 \[1\]** ，之后调用就是一般的for循环与数组之间的关系，按照这里的示例是可以全部调用的，循环调用，如果需要调用指定个数或者内容可以自己再研究下，这个应该不是难点。

四、附数据库数据存储

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]: /images/20220218/0c18f892232f4413a1c5284063bf77b8.png