开发一个可以查询并显示数据库内容的微信小程序

使用微信开发者工具可以创建云数据库，并通过代码可以查询并在客户端显示数据库的内容。

附：小程序一个功能页面有wxml(客户端呈现)，js(功能函数)，json，wxss(个性化处理)，这些是局部的文件。还有全局的文件如app.js和project.config.json。以上这些文件都需要用到。

一、创建云数据库

1. 在微信开发者的左上角点击“云开发”，如图1。

图1

2. 在弹出的界面中选择“数据库”，如图2。

图2

3.点击“+”后会按照箭头顺序出现集合名(自己命名,如ccwl.)和记录ID(系统命名)，如图3。

图3

4.在创建好数据库后，点击右上角的“设置”，如图4。

图4

5. 在弹出的窗口中，要记住环境ID(如“exchange-nigx4”)和刚才自己命名的集合名，如图5。

图5

二、客户端显示(wxml文件)

代码和注释：

<view><button bindtap="getData" type='primary'>查询数据</button></view> //建立名为getData的bingtap按钮，用以查询和返回数据。
<view>
  <view wx:for="{{ne}}">      //将存储数据库返回值的ne输出
   <view>{{item.name}}</view> //item.name表示姓名
   <view>{{item.age}}</view>  //item.age表示年龄
   //可以根据自己的喜欢在数据库中加入自己喜欢的类别。
  </view>
</view>
//这里的view插件并没有个性化，可以使用class和wxss文件进行个性化。

三、后台控制(页面的js文件、app.js和project.config.json)

3.1 页面的js文件的代码和注释：

const DB = wx.cloud.database().collection("ccwl")  //声明调用的数据库名称，将刚在自己命名的数据库名写入(如ccwl)
Page({
  //添加数据，开发者完成
  addData() {
    DB.add({
      data: {
        name: "chenchao",  //数据库的内容
        age: 25,
        ne: []
      },
      success(res) {
        console.log("添加成功", res)  //调试界面可以看到是否添加成功
      },
      fail(res) {
        console.log("添加失败", res)
      }
    })
  },
  //查询数据，用户使用
  getData() {
    DB.get({
      success: res => {
        console.log(res.data)
        this.setData({    //收集数据到ne中并返回
          ne: res.data
        })
      },
      fail(res) {
        console.log("查询失败", res)
      }
    })
  }
})

3.2 app.js的代码和注释：

App({
  onLaunch: function () {
    //云开发环境初始化
    wx.cloud.init({
      env: "exchange-nigx4"    //初始化云服务，并将刚才的环境ID写入，如“exchange-nigx4”
    })
  }
})

3.3 project.config.json的代码和注释：

{
  "description": "项目配置文件",  //开发工具原有代码
  "cloudfunctionRoot": "cloud/",  //添加的代码，作用是调用云服务。
  ***还有其它的代码***
  ***由于篇幅原因***
  ***不予以展示***
  }

四、效果展示

在3.1 页面的js文件中，我们将“chenchao”和“25”写入，在点击“查询数据”后会显示。注意: 这里我加入了自己的个性化(背景色),可以在wxss文件中修改。

五、视频演示

B站视频链接：

https://www.bilibili.com/video/BV1ti4y1t7Qh/

六、往期内容

使用微信开发者工具制作小程序的基本方法

七、参考文献

[1] 微信官方文档 《上手云数据库》

[2] weixin_30622181《微信小程序-获取云数据库某集合数据并显示在页面》 来源：CSDN

[3] 编程小石头 《3小时零基础入门微信小程序云开发，摆脱后台自己实现小程序后台服务器》 来源：哔哩哔哩