【微信小程序】学习拾遗五（云开发、数据库、云函数、动态改变css样式）

云开发

使用微信开发工具内置的云开发功能，就不需要额外部署服务器及配置后台文件，只需要通过云开发功能，就可以使用数据库、云存储、云函数等组件。
使用云开发需要支付流量费用，相对服务器等还算是廉价服务，基本配置能够满足普通个人开发者学习使用。

数据库

链接：微信官方对数据库的说明信息
链接：微信官方数据库操作详细文档
操作数据库，需要在使用页的JS文件中，声明引入数据库。

//pages/index/index.js
const db = wx.cloud.database()

操作数据库，需要使用collection，指定数据库集合，然后通过其他命令，操作数据。

查询

从集合中查询数据，并全部获取，赋值给sinObj。

db.collection('singleKu').get().then(res=>{
      this.setData({
        sinObj:res.data
      })
 })

有条件查询

使用doc指定id查询，使用where指定特定字段查询。

const _ = db.command
db.collection('todos').where({
  // gt 方法用于指定一个 "大于" 条件，此处 _.gt(30) 是一个 "大于 30" 的条件
  progress: _.gt(30)
})
.get({
  success: function(res) {
    console.log(res.data)
  }
})

ES6的解构赋值

链接：菜鸟教程中ES6的解构赋值讲解
将获取到的集合数据中的各项数据，赋值给对应的变量。

fsub(e){
 var {title,author,content} = e.detail.value
console.log(title,author,content)
},

当要添加的是一个对象时，直接将对象赋值并上传。

fsub(e){
   let evl = e.detail.value  
  db.collection("questione").add({
     data:evl
   }).then(res=>{
     console.log(res)
   })
 },

更新数据

通过where指定字段查找，并使用update更新部分数据。

db.collection("questione").where({
      author:"yes"
    }).update({
      data:{
        author:"孙悟空"
      }
    }).then(res=>{
      console.log(res)
    })

使用doc指定id查找，并使用set方法替换整条数据。

db.collection("questione").doc("713dab6463a1af8b004a8e9a0ca12d09").set({
      data:{
        title:"花果山水帘洞"
      }
    }).then(res=>{
      console.log(res)
    })

删除数据

删除数据需要使用doc方法指定id。

delData(){
    db.collection("questione").doc("8655d51b638f2b1a016affec77e63fea")
    .remove()
    .then(res=>{
      console.log(res)
    })
  },

监听数据

使用watch方法，可以实时监听数据库表的变更并返回被变更的信息与变更后的信息。

db.collection('questione').watch({
      onChange:res=>{
        this.setData({
          sinObj:res.docs
        })
      },
      onError:err=>{
        console.log(err)
      }
    })

构建查询条件

通过使用多种可用方法，将数据有条件的查询与返回，可以节省时间和流量。
具体信息查阅官方文档。

db.collection("questione")
    .limit(3)   //共查询3条数据
    .skip(3)    //每条之间跳过3条
    .field({       title:true    }) //每条只返回title字段
    .orderBy("title","asc")//根据title排序，asc升序，desc降序
    .get()
    .then(res=>{
      console.log(res)
    })

Command操作符

链接：微信官方平台上Command操作符的详细说明
要使用数据库操作符，需要在引入数据库后声明。

const db = wx.cloud.database();
const _ = db.command;  //_为官方建议用法,可以自定义命名

云函数

链接：微信官方平台对云函数的说明
微信开发工具内置的云函数功能，能够代替服务端。
在“cloudfunctions”文件夹中新建“Node.js云函数”。
没有“cloudfunctions”文件夹，就需要在根目录下新建该文件夹。
新建云函数后，在其中进行修改。
修改完成后，需要“上传并部署（云端安装依赖）”或右击修改的JS文件，选择“增量更新”。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({ env: //每个人都不同的环境 }) // 使用当前云环境
const db = cloud.database();
// 云函数入口函数
exports.main = async (event, context) => {
  let {dataname,shownum,pagen} = event	//从项目中传入的数据
    return await db.collection(dataname).limit(shownum).skip(pagen)
    .get()		//return出获取到的数据
}

在项目文件中使用，不需要定义数据库，而需要引用云函数方法。

// pages/demo4/demo4.js/Page/
 getData(shownum=5,pagen=0){
    wx.cloud.callFunction({   //云函数方法
      name:"downData",		 //使用的云函数名称
      data:{				//需要传递给event的数据
        dataname:'questione',
        shownum:shownum,
        pagen:pagen
      }
    })
    .then(res=>{			//成功后返回的数据
      let oData = this.data.dataList
      let nData = oData.concat(res.result.data)
      this.setData({
        dataList:nData
      })
    })
  },

云函数具有更大的自由操作性和部署的便捷性。

列表渲染下点击单项改变css样式

1、在js文件中创建被渲染数组，并编写事件，获取数据。

// pages/demo5/demo5.js/Page/
data: {
    weekData:["周一","周二","周三","周四","周五","周六","周日"],
    numr:8
  },
  clickr(e){
    this.setData({
      numr:e.target.dataset.id
    })
  },

2、定义css选中样式。

/* pages/demo5/demo5.wxss */
.active{
  color:rgb(255, 0, 85);
  background-color: lightgreen;
}

view view {
  background-color: lightsalmon;
  font-size: 60rpx;
  border: 2rpx solid #ffffff;
  color: #ffffff;
}

3、创建页面渲染数据，并添加事件和事件数据。

<!--pages/demo5/demo5.wxml-->
<view>
<view wx:for="{{weekData}}" wx:key="index" bindtap="clickr" data-id="{{index}}"
  class="{{index==numr?'active':''}}"  
  <!-- 使用三元运算式对样式动态添加 -->
>{{item}}</view>
</view>

4、如此就可以做到让列表内对象在点击时进行样式改变。