学习笔记:小程序之云开发
推荐学习链接:石头哥 (啊婆主真的超级棒~~~ )
一、新建小程序项目
二、进入配置
详见云开发官方文档:云开发文档链接
- 首先
进入开发者工具来到下图:进入开通云开发
- 继续
对其配置
配置文件目录,后面的clound,这个名字可以自定义,定义完后,再在左侧建一个相同名字的文件目录。如小图:
- 云开发环境初始化
可得示例:
- 环境ID
app.js
最后 ctr + s 保存即可。
注意:成功的话,那个文件夹图标会变成一朵云.
三、简单练习
3.1 添加数据
先去定义一个表名:
引入数据库:
引入数据库,并指定我们创建好的一个集合(表):test
collection() 方法。
const db = wx.cloud.database().collection("test")
随便找个页面:(为了好看,我清空了里面的代码)
- wxml 中
<button bindtap="addData" type="primary" >点击添加数据</button>
- js 中
const db = wx.cloud.database().collection("test")
Page({
//添加数据
addData(){
db.add({
data:{
name: "华仔",
age: 18
},
success(res){
console.log("数据添加成功!",res)
},
fail(){
console.log("添加失败",res)
}
})
}
})
编译后,刷新查看:
3.2 获取云数据库数据并展示在页面上
先来到云数据库中查看数据:
现在,我们想把数据从云数据库中获取到,并展示在页面上:效果如下图
wxml 中
<button bindtap="getData">获取数据并展示在页面</button>
<!-- 云数据获取后返回在页面 -->
<view wx:for="{{datalist}}">
<!-- js中定义一个空的列表datalist -->
<view>{{item.name}}</view>
<view>{{item.age}}</view>
</view>
js 中
Page({
data: {
datalist: [] /* 与xml中的datalist对应 */
},
```//获取云数据库数据方法
getData() {
let that = this
wx.cloud.database().collection("test").get({
success(res) {
console.log("请求成功",res)
that.setData({
datalist:res.data
})
},
fail(res){
console.log("请求失败",res)
}
})
}
})
学习中…未完待续~~~