微信小程序 -- (六) 小程序 云开发+自定义组件

云开发 小程序

概述

开发者可以使用腾讯提供的云服务来开发小程序、小游戏的服务端，而无需搭建服务器。

开发提供的基础能力有： 云数据库、云存储、云函数。

1. 云数据库

是一个既可以在小程序端操作，也可以在云函数中操作的json类型的非关系型数据库。

2. 云存储

云存储支持在小程序端直接上传下载云端文件。（替代了后端的nodejs）

3. 云函数

云函数是在小程序端声明，而后部署到云端后，在云端执行的函数。小程序端部署完毕后可在小程序直接调用

开通云开发服务

小程序开发工具==》 云开发==》 选择 资源均衡型-免费版即可

云数据库

关系型数据库和非关系型数据的区别：
关系型数据库： 关系型数据库的特点就是表与表之间有联系
非关系型数据库： 非关系型数据库常常以json的形式直接存储数据，并且对数据进行操作

[{
     id: 1,
     name: ‘zs’,
     gender: ‘m’,
     school: {
     	id:1, name:’XX学校’, loc: ‘长沙’, area: 800 }
},{  ......  },]

关系型数据库	非关系型数据库
数据表	集合
列、字段	字段、属性
行、记录	文档（doc）、记录、对象

云数据库的操作

云数据库操作的基本流程：

• 1.调用wx.cloud.init()方法初始化云环境

wx.cloud.init({
  env:”环境id”
})

• 2.调用wx.cloud.database()方法获取操作数据库的dabatase对象

let db = wx.cloud.databses();

• 3.调用db.collection()方法获取操作某个集合的collection对象

let coll = db.collection(‘testdb’);

• 4.调用collection.xxx()方法操作该集合即可

coll.doc()
coll.add()
coll.xxx()

创建新的云开发项目

1. 新建项目注意选择云开发模板
2. 云卡发项目的目录机构
   CloudFunctions 该目录中存储所有的云函数
   miniprogram 该目录中存储小程序源代码
   project.config.json 项目的主配置文件

插入数据操作

db.collection(‘testdb’).add({
  data:{},    //具体要保存的数据
  success: (res)=>{}    //插入成功的回调方法
});
db.collection(‘testdb’).add({
  data:{},    //具体要保存的数据
}).then(
  res=>{
  
}
);

该操作将会把data中声明对象的信息存入testdb集合中，成为一条记录。
返回新增记录的自增ID、。并且新增的记录中将会自动添加一个新的字段：_openid。该字段标识了当前这条记录属于哪一个用户，同一个用户访问该小程序时使用openid是不变的。即一个opedid对应一个小程序的用户。小程序也需要通过该openid完成数据库的权限管理。

查询操作

查询一条数据

db.collection(‘testdb’).doc(‘某记录的_id’).get({
  success: (res)=>{……}    //插入成功的回调方法
});
db.collection(‘testdb’).doc(‘某记录的_id’).get({
}).then(res=>{……});

若用户对集合进行查询操作时，将会在语句中自动加入当前用的openid作为查询条件，将会导致查不到别人 添加的数据。这是小程序数据库的默认权限管理机制导致的。

查询多条数据

db.collection('todos').where({
  _openid: 'user-open-id',
  done: false
})
.get({
  success: function(res) {
    // res.data 是包含以上定义的两条记录的数组
    console.log(res.data)
  }
})
db.collection('testdb').where({
    // married: false
    school:{
          name:"清华大学"
        }
      })
      .get()
      .then(
        res => {
          console.log(res.data);
        }
      );

删除数据

删除一条记录
返回的是记录record

db.collection('testdb').doc('14139e12614bfb870e959840273fced6').remove()

删除多条记录

要更新多个数据，需要在Serve端进行操作(云函数)
可通过 where 语句选取多条记录执行删除，只有有权限删除的记录会被删除。比如删除所有已完成的待办事项：

修改操作

Collection.updata()      //局部更新
Collection.set()       //直接替换

局部更新

使用 update 方法可以局部更新一个记录或一个集合中的记录，局部更新意味着只有指定的字段会得到更新，其他字段不受影响。

db.collection('testdb').doc('cd045e75614be8f710482a52698e4eee')
  .update({
    data: {
      name: '亮亮',  married: true
}
})

• 更新多个需在Serve端进行操作(云函数)

替换更新

db.collection('testdb').doc('8937eaa9614bfb870d3fab722527bd31').set({
  data: {
    content:'这个电影一点也不好看'
  }
})

id为8937eaa9614bfb870d3fab722527bd31 只会有_id字段和content字段

collection常用API

let col = db.collection(“testdb”);

• add() 添加
• doc()
• where //条件判断 where({ hobby: …条件… })
• fileld //查询需要的字段 .fileld({ 字段名:true, …: true,…… }) ,必须都为true或者false
• skip() //跳过前几条 skip(2) 跳过前条 从第三条开始
• .limit() //显示 读取几条数据 limit(2) 读两条。 一般使用： skip(M).limit(N)
• orderBy(“字段”,”asc/desc”) // 排序
• get()

添加：

db.collection(‘testdb’).add({
  data:{},    //具体要保存的数据
  success: (res)=>{}    //插入成功的回调方法
});

查询：

db.collection('testdb')            //查询testdb集合
  .where({                     //添加筛选条件
    hobby: _.in(["游泳"]),         // 按照查询指定筛选
  })      
  .field({         //指定查询结果的字段
    name: true,
    age: true,
    married: true
  })
  // .skip(1)                      //条件前几条查询语句
  // .limit(1)                     //按当前记录先后查询几条条记录
  .orderBy("married","desc")      //先按married字段排序
  .orderBy("age","asc")           // 在按age字段排序
  .get()                        、、发送请求请求查询结果

查询指定

查看文档

API提供了查询指令

• where
• eq 等于
• neq 不等于
• lt 小于
• lte 小于或等于
• gt 大于
• gte 大于或等于
• in 字段值在给定数组中
• nin 字段值不在给定数组中

删除

打开授权设置页：

 wx.openSetting({
            withSubscriptions: true,
          })

小程序的自定义组件

查看文档

自定义组件的本质就是自己设计一个新的组件，拥有独立的外观样式，独立的功能，独立的组件名称。当需要使用时，可以直接通过类似以下代码：

Component({ … … … })

组件的属性列表

<my-button 
color=”red” 
type=”round” 
value=”按钮文本”
  bind:doubletap=”doubletapEvent”
>
</my-button>

编写一个自定义组件

1. 新建组件四件套
2. 在组件的json配置文件中声明：我是组件
3. 编写组件的基础外观wxml wxss
4. 使用它时，需要先在page.json中声明组件引用
5. 在页面中直接使用新的自定义组件名，引用该组件即可

• 若需要为组件设置自定义属性，则需要以下几步：

1.在comonent.js里的properties中声明定义属性名

properties: {
    color: {
      type: String,
      value: '#36D'
},
}

2.在wxml中使用该属性，定义组件内容

<view class="btn"
  style="background-color: {{color}};"
></view>

3. 使用该组件是，指定自定义属性值即可

<my-button class="mybtn"
 color="red"
></my-button>

若为组件设置自定义事件，需要以下几步

1. 在子组件中为相关元素绑定事件。来监听基础事件，。根据这些基础事件的运行过程，捕获到自定义事件的触发时机，而后调用triggerEvent 方法通知父组件自定义父事件的产生。

bindtap="tapEvent"
tapEvent(){
      // 判断当前点击是否触发了双击的场景
      let now = new Date().getTime();
      let last = this.data.last;
      if(now-last<350) {
        // 触发了双击
        //通知父组件 doubletap可以开始执行了
        this.triggerEvent("doubletap",{id: …,”传参”:’’});
        now = 0;
      }
      this.data.last = now;
    }
  }

2. 自定义事件 doubletap 一旦被触发，将会执行父组件中声明的事件处理函数。

bind:doubletap = "doubletapEvent"
doubletapEvent(e){
e.detail; //  {id:””}  获取父组件传递过来的参数
    console.log("双击了");
  },