评论

【学习心得】小程序云端开发——数据库连接

小程序云端开发的第一堂课程,应该学会如何连接数据库并展示数据。

本人UI设计师一枚,熟悉HTML和CSS,为开发小程序大小小小基础,之前也学习好一阵子的JS,摸了摸nodejs,感觉非常迷茫,最近无意中发现微信小程序是基于js开发,内心狂喜,终于有检验学习成果的工具了,决心做一款简单的类新闻发布应用试试水。

界面UI设计和布局基本没难度,只要懂HTML和CSS,对应的文件分别是【index.wxml - index.html】,【index.wxss - style.css】,重要的是处理逻辑功能的index.js文件,可以说是开发微信小程序的核心。

学习过程没什么难的,主要是注意代码结构,括号一多起来容易乱,幸好右键代码块可以格式化。

回归正传,微信小程序开发平台提供一个非常方便前端开发者的工具——云开发,如何使用并且读取数据库数据,是学习后台操作的入门课程。首先注册开发者账号这些不必说,拥有openid才能建立有云开发功能的小程序,点击开发工具左上角的云开发。

弹出如下界面

右边显示当前环境xxxxx,这个相当于独立的一个数据库,数据库内可以创建数据表,和关系型数据库不同,这里的数据如下图打比方

通过创建数据库之后,我们需要在app端来读取数据库的数值,这里展示如何读取books这张表里的数据,在读取数据之前,我们有必要先修改一下数据表的权限,要不然无法读取成功。

文件结构按照默认的即可

具体代码如下

<!–index.wxml–>
<view>Database Test</view>
<view>
<block wx:for="{{books}}" wx:key="{{index}}">
<view>{{item.name}} - {{item.author}} - {{item.price}}</view>
</block>
</view>

<view>标签相当于html中的div,用于块状地显示内容,<block>相当于隐藏版的div,这里用来循环获取到的数据,并且将循环到的数据显示出来。

//index.js
// 初始化环境
wx.cloud.init({
env: ‘xbgczj’
});
// 实例化数据库
const db = wx.cloud.database({});
Page({
data: {
books: [], // 定义一个books空数组,用于存储数据
blnShow: true
},
// 使用onShow或者onLoad函数执行代码,抓取数据
onShow: function () {
// 实例化数据表
var _books = db.collection(“books”);
// 声明
var that = this;
// 将获取到到数据,保存到books[]数组中
_books.get().then(res => {
that.setData({
books: res.data,
blnShow: false
})
})
},
})

最终结果输出

最后一次编辑于  2019-06-11  
点赞 4
收藏
评论

2 个评论

  • 凯杰
    凯杰
    2019-06-14

    用=>可减少此类麻烦

    2019-06-14
    赞同
    回复
  • wang li
    wang li
    2019-06-12

    新手前来支持

    一直搞不懂为什么要用var that = this;

    2019-06-12
    赞同
    回复 1
    • 少孟
      少孟
      2019-06-13

      this 指的是当前的对象,举个简单例子就明白了

      onLoad: function() {

          var that = this;

          onShow: function() {

          that.setData();//这里指向的就是父级的this,如果用this就是当前的

          }

      }

      2019-06-13
      1
      回复
登录 后发表内容