云开发
一、环境初始化
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
2) demo1.wxml
3) 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>
4) demo-rem.wxml
5) demo-rem.js
6
、更新商品
1
）新增加页面
pages/demo-upd/demo-upd
2) demo1.wxml
3) demo1.js
4) demo-upd.wxml
5) 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)
})
},
})
扫一扫
3188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
