本人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
})
})
},
})

最终结果输出