云数据库
云开发
一、环境初始化
1、登录微信公众平台注册
https://blog.csdn.net/qq_38912819/article/details/80664837
拿到AppID :wxdd885bd9be329e85
2、使用AppID登录微信开发者工具
3、开通云开发，找到环境ID： yunjisaun-5gscklsyde3525d6
4、清空index.html和index.js文件里的内容
5、修改project.config.json内容
6、更改app.js文件内容，
//第二行增加：
“cloudfunctionRoot”:“cloud”, //配置云开发的路径
7、新建文件夹为cloud
二、云数据库
1、增加操作
index.js
2、查询操作 —查所有数据
// app.js
App({
onLaunch() {
// 云开发环境初始化
wx.cloud.init({
env:“yunjisaun-5gscklsyde3525d6”
})
}
})
var name
var age
c
Page({
addName(e){
this.name=e.detail.value
},
addAge(e){
this.age=e.detail.value
},
addDate(){
DB.add({
data:{
name:“zhangsan”,
age:18
// name:this.name,
//age:this.age
},
},
success(res){
console.log(“添加成功”,res)
},
fail(res){
console.log(“添加失败”,res)
}
})
},
})
第二种写法
查询某一条数据
3、删除
index.html
index.js
第一种办法
getData(){
DB.get({
success(res){
console.log(“查询成功”,res)
},
fail(res){
console.log(“查询失败”,res)
}
})
},
getData(){
wx.cloud.database().collection(“list”).get()
.then(res => {
console.log(“查询成功”,res)
})
.catch(err =>{
console.log(“查询失败”,err)
})
},
wx.cloud.database().collection(“list”)
.where({
name:this.name
})
.get()
.then(res => {
console.log(“返回的数据”,res)
})
<input placeholder=“请输入ID” bindinput=“delDataInput”></input>
<button bindtap=“delData”>删除数据</button>
var id
delDataInput(e){
id=e.detail.value
},
delData(){
DB.doc(id).remove({
success(res){
console.log(“删除成功”,res)
},
fail(res){
第二种办法
4、更新
index.html
index.js
第一种办法
第二种办法
console.log(“删除失败”,res)
}
})
},
delData(){
wx.cloud.database().collection(“list”)
.doc(id).remove()
.then(res => {
console.log(“删除成功”,res)
})
.catch(err =>{
console.log(“删除失败”,err)
})
},
<!-- 更新数据 -->
<input placeholder=“请输入ID” bindinput=“updDataInput”></input>
<input placeholder=“请输入年龄” bindinput=“updAge”></input>
<button bindtap=“updData” type=“primary”>更新数据</button>
//更新数据
updDataInput(e){
id=e.detail.value
},
updAge(e){
age=e.detail.value
},
updData(){
DB.doc(id).update({
data:{
age:age
},
success(res){
console.log(“更新成功”,res)
},
fail(res){
console.log(“更新失败”,res)
}
})
},
updData(){
三、综合案例
1、商品列表页数据获取
效果图
//第二种办法
wx.cloud.database().collection(“list”)
.doc(id).update({
data:{
age:age
}
})
.then(res => {
console.log(“更新成功”,res)
})
.catch(err =>{
console.log(“更新失败”,err)
})
},
demo1.wxml
2、demo1.js
2、商品详情页
demo1-1.wxml
demo1-1.js
<view wx:for="{{list}}">
<view> 商品名：{{item.name}},价格:{{item.price}}</view>
</view>
// pages/demo1/demo1.js
Page({
onLoad(){
wx.cloud.database().collection(“goods”)
.get()
.then(res =>{
console.log(“商品列表请求成功”,res)
this.setData({
list:res.data
})
})
.catch(res=>{
console.log(“商品列表请求失败”,res)
})
},
})
<view> 商品名：{{good.name}},价格:{{good.price}}</view>
// pages/demo1-1/demo1-1.js
Page({
onLoad(){
wx.cloud.database().collection(“goods”)
.doc(“b00064a7609b87f016c9854a3d397552”)
.get()
.then(res =>{
console.log(“商品列表请求成功”,res)
this.setData({
good:res.data
})
})
3、点击列表中的商品，实现跳转
demo1.wxml
demo1.js
demo1-1.js–点击不同行出现不同的信息
4、添加商品
新建页面pages/demo-add/demo-add
demo-add.wxml
demo-add.js
.catch(res=>{
console.log(“商品列表请求失败”,res)
})
}
})
<view bindtap=“goDetail” data-id="{{item._id}}"> 商品名：{{item.name}},价格:
{{item.price}}</view>
goDetail(e){
console.log(‘点击了跳转商品详情’,e.currentTarget.dataset.id)
wx.navigateTo({
url: ‘/pages/demo1-1/demo1-1?id=’ + e.currentTarget.dataset.id,
})
},
onLoad(options){
var id=options.id
.doc(id)
}
<input placeholder=“请输入商品名” bindinput=“addName”></input>
<input placeholder=“请输入价格” bindinput=“addPrice”></input>
<button bindtap=“addDate” type=“primary”>添加商品</button>
// pages/demo-add/demo-add.js
const DB = wx.cloud.database().collection(“goods”)
var name
var price
var id
Page({
addName(e){
name=e.detail.value
},
addPrice(e){
price=e.detail.value
},
// 添加数据
demo1.wxml
demo1.js
需要自己完成的内容：
5、删除商品
1）新增加页面pages/demo-rem/demo-rem
-
demo1.wxml
-
demo1.js
addDate(){
if(name==null){ //商品为空时的提示
wx.showToast({
icon:‘none’,
title: ‘商品名空了’,
})
}else if(price==null){
wx.showToast({
icon:‘none’,
title: ‘价格空了’,
})
}else{
DB.add({
data:{
name:name,
price:price
},
success(res){
console.log(“添加成功”,res)
},
fail(res){
console.log(“添加失败”,res)
}
})
}
},
})
<view bindtap=“addGoods” class=“addprice”>添加商品</view>
addGoods(){
wx.navigateTo({
url: ‘/pages/demo-add/demo-add’,
})
},
<view bindtap=“remGoods” class=“price” >删除商品</view>
-
demo-rem.wxml
-
demo-rem.js
6、更新商品
1）新增加页面pages/demo-upd/demo-upd
-
demo1.wxml
-
demo1.js
-
demo-upd.wxml
-
demo.upd.js
remGoods(){
wx.navigateTo({
url: ‘/pages/demo-rem/demo-rem’,
})
},
<input placeholder=“请输入ID” bindinput=“delDataInput”></input>
<button bindtap=“delData” type=“primary”>删除数据</button>
var id
Page({
delDataInput(e){
id=e.detail.value
console.log(id)
},
delData(){
wx.cloud.database().collection(“goods”)
.doc(id).remove()
.then(res => {
console.log(“删除成功”,res)
})
.catch(err =>{
console.log(“删除失败”,err)
})
},
})
<view bindtap=“updGoods” class=“price” >更新商品</view>
updGoods(){
wx.navigateTo({
url: ‘/pages/demo-upd/demo-upd’,
})
},
<input placeholder=“请输入ID” bindinput=“updDataInput”></input>
<input placeholder=“请输入价格” bindinput=“updPrice”></input>
<button bindtap=“updData” type=“primary”>更新数据</button>
var id
var price
Page({
updDataInput(e){
id=e.detail.value
},
updPrice(e){
price=e.detail.value
},
updData(){
wx.cloud.database().collection(“goods”)
.doc(id).update({
data:{
price:price
}
})
.then(res => {
console.log(“更新成功”,res)
})
.catch(err =>{
console.log(“更新失败”,err)
})
},
})
强力驱动