微信小程序云开发入门

搭建环境

配置app.js

// app.js
App({
  // 小程序已启动就会执行
  onLaunch() {
    console.log("小程序启动了");
    //初始化数据库
    wx.cloud.init({
      env:'cloud1-9glb4hvj0bd0fcab'//云开发环境id
    })
  }
})

创建集合（相当于表）

添加记录

数据库权限管理

注意：如果权限不足会查询不到数据

数据库增删改查

基本查询get()

方法一：

//相当于获取了表
let goods = wx.cloud.database().collection('goods');
//查询操作
goods.get({
    //请求成功
    success: result => {
        console.log("请求成功",result);
        this.setData({
            list:result.data
        })
    },
    fail: error => {
        console.log("请求失败",error);
    }
})

方法二：

//相当于获取了表
let goods = wx.cloud.database().collection('goods');
// es6简洁写法
goods.get()
    .then(result=>{
    //请求成功
    console.log("es6方法请求成功",result);
    this.setData({
        list:result.data
    })
})
    .catch(error=>{
    //请求失败
    console.log("es6方法请求失败",error);
})

条件查询where()

// es6简洁写法
goods.where({
    //条件查询
    name:'苹果'
}).get()
    .then(result=>{
    //请求成功
    console.log("es6方法请求成功",result);
    this.setData({
        list:result.data
    })
})
    .catch(error=>{
    //请求失败
    console.log("es6方法请求失败",error);
})

根据id查询doc()

根据()条记录的。比如商品详情页。

//使用doc查询单条记录(根据id查询)
goods.doc('859059a5616c2e1f007a5d58779dadbb')
    .get()
    .then(result=>{
    console.log(result.data);
})
    .catch(error=>{
    console.log(error);
})

添加数据add()

//添加数据
addGoods(){
    let goods = wx.cloud.database().collection('goods');
    goods.add({
        data:{
            name:'荔枝',
            price:50
        }
    })
        .then(result=>{
        console.log(result)
    })
        .catch(error=>{
        console.log(error)
    })
}

注意：添加记录需要下面的权限，否则会添加失败

修改数据update()

updateGoods(){
    let goods=wx.cloud.database().collection('goods');
    //根据id修改数据
    goods
    .doc('859059a5616d14900092780f373db88e')
    .update({
        data:{
            price:45
        }
    })
    .then(result=>{
        console.log("修改成功",result);
    })
    .catch(error=>{
        console.log("修改失败",error);
    })
}

删除数据remove()

removeGoods(){
    let goods=wx.cloud.database().collection('goods');
    //根据id删除数据
    goods
        .doc('859059a5616c2e1f007a5d58779dadbb')
        .remove()
        .then(result=>{
        console.log("删除成功",result)
    })
        .catch(error=>{
        console.log("删除失败",error)
    })
}

注意：如果是手动添加的记录会删除失败，需要同一个_openid，手动添加的没有_openid

综合案例

需求

可以查看商品列表
可以动态添加商品
可以进入商品详情页
可以删除某个商品
可以修改某个商品的价格

步骤

1. 创建商品列表页和商品详情页

2. 初始化商品列表页和商品详情页

商品列表页

// pages/goods_list/goods_list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list:[]

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let goods=wx.cloud.database().collection('goods');
        goods
        .get()
        .then(result=>{
            console.log("获取成功",result);
            this.setData({
                list:result.data
            })
        })
        .catch(error=>{
            console.log("请求失败",error);
        })
    }
})

<!-- 商品列表页 -->
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="name">
    <view>商品名：{{item.name}}===商品价格：{{item.price}}</view>
</view>

商品详情页

// pages/goods_detail/goods_detail.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        good:{}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let goods = wx.cloud.database().collection('goods');
        goods
        .doc('859059a5616d14900092780f373db88e')
        .get()
        .then(result=>{
            console.log("商品详情页请求成功",result);
            this.setData({
                good:result.data
            })
        })
        .catch(error=>{
            console.log("商品详情页请求失败",result);
        })
    }
})

<!-- 商品详情页 -->
<view>商品名称：{{good.name}}</view>
<view>商品价格：{{good.price}}</view>

3. 实现由商品列表页跳转到商品详情页(携带上该商品的id)

<!-- 商品列表页 -->
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="name">
    <navigator url="/pages/goods_detail/goods_detail?_id={{item._id}}">
        <view>商品名：{{item.name}}===商品价格：{{item.price}}</view>
    </navigator>
</view>

4. 在商品详情页中获取商品id并展示该商品信息

onLoad: function (options) {
    //会自动匹配options下名为_id的值
    const {_id}=options;
    let goods = wx.cloud.database().collection('goods');
    goods
        .doc(_id)
        .get()
        .then(result=>{
        console.log("商品详情页请求成功",result);
        this.setData({
            good:result.data
        })
    })
        .catch(error=>{
        console.log("商品详情页请求失败",result);
    })
}

5. 添加商品

addGood(){
    let price=Number.parseFloat(this.data.price);
    if(this.data.name.length>0 && !isNaN(price)){
        let goods=wx.cloud.database().collection('goods');
        goods
            .add({
            data:{
                name:this.data.name,
                price:this.data.price
            }
        })
            .then(result=>{
            //添加成功后，清空输入框内的值
            this.setData({
                name:'',
                price:''
            })
            //提示添加成功
            wx.showToast({
                title:'添加成功',
                icon:'success'
            })
        })
            .catch(error=>{
            //提示添加失败
            wx.showToast({
                title: '添加失败',
                icon:'error'
            })
        })
    }
    else{
        //如果输入框内的值不合法，则提示不合法
        wx.showToast({
            title:'数据不合法',
            icon:'error'
        })
    }
}

6. 更新商品价格

updatePrice(){
    let price=Number.parseFloat(this.data.price);
    if(isNaN(price)){
        //如果输入值转化为NaN则清空输入框内容
        this.setData({
            price:''
        })
        //提示输入不合法
        wx.showToast({
            title: '数据不合法',
            icon: 'error'
        })
        return;
    }
    let goods = wx.cloud.database().collection('goods');
    goods.doc(this.data.goodId)
        .update({
        data:{
            //es6简洁写法等价于：price:price
            price
        }
    })
        .then(result=>{
        //当页面加载时已将商品id赋值给goodId
        //自定义方法getGoodById
        this.getGoodById(this.data.goodId);
        //修改成功后清空输入框内容
        this.setData({
            price:''
        })
        //提示修改成功
        wx.showToast({
            title: '修改成功',
            icon:'success'
        })
    })
        .catch(error=>{
        //提示修改失败
        wx.showToast({
            title: '修改失败',
            icon:'error'
        })
    })
}

7. 删除商品

//刪除商品
deleteGood(e) {
    //提示用户是否确认删除，防止手抖误删
    wx.showModal({
        title: '警告',
        content: '确认删除',
        confirmColor: '#ff0000',
        //点击确定执行的操作
        success: result => {
            //获取从前台传过来的id
            let {
                id
            } = e.target.dataset;
            let goods = wx.cloud.database().collection('goods');
            goods.doc(id).remove();
            this.setList();
        }
    })

}

8. 根据商品价格排序

//按照商品價格排序
sortByPrice(e){
    let goods=wx.cloud.database().collection('goods');
    //获取排序规则（升序/降序）
    let {sort}=e.target.dataset;
    //1升序排序，-1降序排序
    if(sort==="1"){
        goods.orderBy('price','asc').get()
            .then(result=>{
            let list=result.data;
            this.setData({
                list
            })
        })
    }
    else if(sort==="-1"){
        goods.orderBy('price','desc').get()
            .then(result=>{
            let list=result.data;
            this.setData({
                list
            })
        })
    }

}

去除冗余代码

// pages/goods_list/goods_list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list: [],
        name: '',
        price: '',
        num:''
    },
    //获取指定数量的商品
    getGoodForNum(){
        let goods=this.getTable('goods');
        let num=parseInt(this.data.num);
        if(num>=0){
            goods.limit(num).get()
            .then(result=>{
                this.setData({
                    list:result.data
                })
            })
        }
        else{
            wx.showToast({
                title: '数据不合法',
                icon: 'error'
            })
        }
    },
    // 添加商品
    addGood() {
        let price = Number.parseFloat(this.data.price);
        let name=this.data.name;
        if (name.length > 0 && !isNaN(price)) {
            let goods = this.getTable('goods');
            goods
                .add({
                    data: {
                        name,
                        price
                    }
                })
                .then(result => {
                    this.flush();
                    this.setData({
                        name: '',
                        price: ''
                    })
                    wx.showToast({
                        title: '添加成功',
                        icon: 'success'
                    })
                })
                .catch(error => {
                    wx.showToast({
                        title: '添加失败',
                        icon: 'error'
                    })
                })
        } else {
            wx.showToast({
                title: '数据不合法',
                icon: 'error'
            })
        }
    },
    //删除商品
    deleteGood(e) {
        wx.showModal({
            title: '警告',
            content: '确认删除',
            confirmColor: '#ff0000',
            success: result => {
                if (result.confirm) {
                    let {
                        id
                    } = e.target.dataset;
                    this.goodRemove(id,'goods');
                    this.flush();
                }
            }
        })

    },
    //按照商品价格排序
    sortByPrice(e){
        let goods=wx.cloud.database().collection('goods');
        let {sort}=e.target.dataset;
        this.goodSort(sort,'price','goods');
    },
    //更新获取数据的条数
    updateNum(e){
        let {value}=e.detail;
        this.setData({
            num:value
        })
    },
    // 获取输入框内的名称
    getName(e) {
        let name = e.detail.value;
        this.setData({
            name
        })
    },
    // 获取输入框内的价格
    getPrice(e) {
        let price = e.detail.value;
        this.setData({
            price
        })
    },
    //根据id删除商品
    goodRemove(id,tableName){
        let table=this.getTable(tableName);
        table.doc(id).remove();
    },
    //商品排序
    goodSort(mode,attr,tableName){
        let sort;
        if(mode==='1'){
            sort='asc';
        }
        else if(mode==='-1'){
            sort='desc';
        }
        let goods=this.getTable(tableName);
        goods.orderBy(attr,sort).get()
        .then(result=>{
            let list=result.data;
            this.setData({
                list
            })
        })
    },
    getTable(tableName){
        let table=wx.cloud.database().collection(tableName);
        return table;
    },
    //刷新list(即重新从数据库中查询所有商品)
    flush() {
        let goods = this.getTable('goods');
        goods
            .get()
            .then(result => {
                this.setData({
                    list: result.data
                })
            })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.flush();
    },
    onShow: function () {
        this.flush();
    }
})

返回指定条数的数据limit

//获取指定数量的商品
getGoodForNum(){
    let goods=this.getTable('goods');
    let num=parseInt(this.data.num);
    if(num>=0){
        //返回指定条数的数据
        goods.limit(num).get()
            .then(result=>{
            this.setData({
                list:result.data
            })
        })
    }
    else{
        wx.showToast({
            title: '数据不合法',
            icon: 'error'
        })
    }
}

分页方法skip

let person=wx.cloud.database().collection('person');
person.skip(2).get()
.then(result=>console.log(result));

Command数据库操作符

gt查询大于指定值的数据

		//获取数据库引用
        let db=wx.cloud.database();
        //获取全部的人
        db.collection('person').get()
        .then(result=>console.log(result));
        //获取年龄大于20岁的人
        db.collection('person')
        .where({
            age:db.command.gt(20)
        }).get()
        .then(result=>console.log(result));

gte查询大于等于指定值的数据

		//查询大于等于20岁的人
        db.collection('person')
        .where({
            age:db.command.gte(20)
        }).get()
        .then(result=>console.log(result));

lt查询小于指定值的数据

		//查询小于20岁的人
        db.collection('person')
        .where({
            age:db.command.lt(20)
        }).get()
        .then(result=>console.log(result));

lte查询小于等于指定值的数据

		//查询小于等于20岁的人
        db.collection('person')
        .where({
            age:db.command.lte(20)
        }).get()
        .then(result=>console.log(result));

and同时满足多个条件的查询

		//查询年龄大于20小于25的人
        db.collection('person')
        .where(db.command.and([
            {age:db.command.gt(20)},
            {age:db.command.lt(25)}
        ])).get()
        .then(result=>console.log(result));

云函数

初始化云函数的环境

创建一个文件夹cloud（与pages目录平级）

在project.config.json里面配置云函数所在目录为cloud

"cloudfunctionRoot":"/cloud",

当cloud文件的样式改变了，就表示我们的初始化成功了

新建一个云函数

云函数的调用

		//云函数的调用
        wx.cloud.callFunction({
            name:'getData'
        })
        .then(result=>console.log('调用成功',result))
        .catch(error=>console.log('调用失败',error));

云函数获取数据

注意：云函数更新后，必须重新上传并部署云函数，否则不生效

如果只更新了index.js可以右键点击更新，如下图所示：

如果有两个云端环境，可以如下所示初始化云函数环境，否则可能会出现错误：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
    //动态初始化当前环境
    env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
    //获取数据库中表的引用
    let person=cloud.database().collection('person');
    //将表中的数据返回
    return person.get();
}

云函数与方法中获取数据的区别

云函数一次最多获取100条数据，普通函数一次最多获取20条数据

批量导入数据

创建一个json文件

注意：每个对象的键需要和数据库里面的字段一一对应

将创建的json文件导入数据库

根据id获取person

// 云函数入口函数
exports.main = async (event, context) => {
    //由调用云函数的对象传入
    let id=event.id;
    let person=cloud.database().collection('person');
    return person.doc(id).get();
}

调用云函数并传入参数

修改person

// 云函数入口函数
exports.main = async (event, context) => {
    //由调用云函数的对象传入
    let id=event.id;
    let attr=event.attr;
    let newValue=event.newValue;
    //动态生成json对象
    let data={};
    data[attr]=newValue;
    let person=cloud.database().collection('person');
    person
    .doc(id)
    .update({
        data
    });
    //调用根据id获取person的云函数
    return cloud.callFunction({
        name:'getPersonById',
        data:{
            id
        }
    });
}

调用云函数并传入参数

注意：不是本人创建的记录(即openid不一致)普通数据库函数不能修改(即增删改)，云函数可以修改

根据id删除person

// 云函数入口函数
exports.main = async (event, context) => {
    let {id}=event;
    let person=cloud.database().collection('person');
    return person.doc(id).remove()
}

云存储

posted @ 2021-10-20 22:40 (x²+y²-1)³=x²y³ 阅读(98) 评论(0) 编辑收藏举报

刷新页面返回顶部

(x²+y²-1)³=x²y³

微信小程序云开发入门

微信小程序云开发入门

搭建环境

数据库权限管理

数据库增删改查

基本查询get()

条件查询where()

根据id查询doc()

添加数据add()

修改数据update()

删除数据remove()

综合案例

需求

步骤

1. 创建商品列表页和商品详情页

2. 初始化商品列表页和商品详情页

3. 实现由商品列表页跳转到商品详情页(携带上该商品的id)

4. 在商品详情页中获取商品id并展示该商品信息

5. 添加商品

6. 更新商品价格

7. 删除商品

8. 根据商品价格排序

去除冗余代码

返回指定条数的数据limit

分页方法skip

Command数据库操作符

gt查询大于指定值的数据

gte查询大于等于指定值的数据

lt查询小于指定值的数据

lte查询小于等于指定值的数据

and同时满足多个条件的查询

云函数

初始化云函数的环境

新建一个云函数

云函数的调用

云函数获取数据

批量导入数据

创建一个json文件

将创建的json文件导入数据库

根据id获取person

修改person

根据id删除person

云存储

公告