小程序基础语法

基础知识的一些碎碎念...

数据绑定在.js的data里，用{{变量}}进行绑定

普通标签：<view>

图片标签：<image src=" ">

循环：wx:for

判断：wx:if

是否渲染可以使用wx:if和hidden。

区别：hidden不会将wxml内的元素删去，wx:if会。所以需要频繁切换的场景适合hidden，一次性渲染的场景适合wx:if。

添加事件：bind

事件的冒泡：当子元素发生事件时，事件会逐层向父元素进行传播。

阻止事件冒泡！使用catch代替bind进行事件绑定。

如何找到自定义的属性？为属性添加data-id标识。然后再事件对象中找到他！

事件对象：当组件绑定事件被触发时，向绑定的函数发送一个对象。

如何使用云数据库？

先在云开发控制台里创建新的集合，这里以user为例。

插入数据： 

我们用设置一个事件函数的方法来测试。这里在button上绑定一个insert方法来向数据库中插入数据

<button bindtap="insert">插入</button>

然后再.js中定义这个函数。用wx.cloud.database()方法新建一个数据库对象。

用db.collection()方法获取数据库中的集合，用add()方法向集合中添加新的数据。

const db = wx.cloud.database()
Page:({
    //...
  insert: function () {
    db.collection('user').add({
      data: {
        name: 'Faker',
        age: 23
      },
      success: (res) => {
        console.log(res)
      },
      fail: (err) => {
        console.log(err)
      }
    })
  },
    //...
})

这样就可以在数据库中插入"name:Faker age:23"，:)

使用collection，add来插入。同时利用回调函数返回正确/错误的信息。

这时候，在云开发控制台的user里就可以看到我们得数据啦

当然，用Promise来写也是可以的。就是那个.then .catch之类的东西。

更新数据

我们来展示如何更新数据。

接上条，我们使用doc方法更新数据库中的数据。参数为每条数据的id值。

注意这里用Promise来写。

  update: function () {
    db.collection('user').doc('4c86bd845fa7f435001377816ec04bb8').update({
      data: {
        age: 20
      }
    }).then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
  },

同样是创建一个button绑定该事件函数来测试。刷新数据库，李哥重回20岁了哦。

查找数据

和上面类似，查找数据使用where()方法，获取数据使用get()方法。具体使用方法如下。

  search: function () {
    db.collection('user').where({
      name: 'Faker'
    }).get().then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
  },

这样，我们成功找到了李哥。

在查找的时候，我们引入了一个新问题：数据库的权限问题。

在云开发控制台的“数据权限”，可以控制数据库的权限设置。

我们以一个简单的例子说明。

我们在云开发中“添加记录”手动建立一个Bang的数据。

 

我们可以注意到，手动建立的Bang这条数据是没有openid属性的。这是因为当前数据库的控制权限为“仅创建者可读写”，数据库会识别当前用户的openid属性，不满足当前openid属性的数据，在查询时会自动屏蔽。

如下，我们查询Bang时，不会返回任何值。

在我们将数据库权限修改为“所有用户可读”后，Bang可以被查到了。

 删除数据

和上面类似。就不多赘述了。

通过doc查找元素，然后用remove方法。 

  delete: function () {
    db.collection('user').doc('4c86bd845fa7f435001377816ec04bb8').remove().then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
  }

以上为删除单条数据。如果想批量删除，则可以使用云函数。

云函数

创建一个简单的云函数

要设置云函数，首先在为云函数文件夹添加环境。

然后在云函数文件夹中右键新建一个云函数。这里以一个两数相加的函数为例。

event指的是触发云函数的事件，当小程序端调用云函数时，event 就是小程序端调用云函数时传入的参数，外加后端自动注入的小程序用户的 openid和小程序的 appid。context 对象包含了此处调用的调用信息和运行状态，可以用它来了解服务运行的情况。

exports.main = async (event, context) => {
  return {
    sum: event.a + event.b
  }
}

在应用页面的.js中用.cloud.callFunction()函数引用云函数，这里用name属性找到相关函数。data里为传入云函数的相应参数。

  sum: function () {
    wx.cloud.callFunction({
      name: 'sum',
      data: {
        a: 1,
        b: 2
      }
    }).then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
  },

最后，右键将云函数上传到云端即可运行。

云函数的意义

云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权，开发者可以直接使用该 openid。

比如我们调用login函数时，可以直接返回openid。

使用云函数批量删除数据库中数据

先建几个cuzz的数据。

然后编写云函数

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

cloud.init()

const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  try {
    return await db.collection('user').where({
      name: 'cuzz'
    }).remove()
  } catch (e) {
    console.error(e);
  }
}

最后引用云函数

  batchDelete: function () {
    wx.cloud.callFunction({
      name: 'batchDelete'
    }).then((res) => {
      console.log(res)
    }).catch((err) => {
      console.error(err)
    })
  },

然后测试，发现我们的ICU选手已经被全被删除了。haha

 

云存储

云存储的过程如下

上传图片示例

现在我们按照上图所示的步骤完成图片的上传！

以上传图片为例。

这里先解释一下相关的API。

选择图片的API：

wx.chooseImage({
      count: 1,//图片上传数量
      sizeType: ['original', 'compressed'],//源文件或者压缩文件
      sourceType: ['album', 'camera'],//来自相册还是相机
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
      }
    })

然后加上将图片上传到云存储的API

uploadPic: function () {
    wx.chooseImage({
      count: 1,//图片上传数量
      sizeType: ['original', 'compressed'],//源文件或者压缩文件
      sourceType: ['album', 'camera'],//来自相册还是相机
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        wx.cloud.uploadFile({
          cloudPath: 'example.png',
          filePath: tempFilePaths[0], // 文件路径
          success: res => {
            // get resource ID
            console.log(res.fileID)
          },
          fail: err => {
            console.log(err)
            // handle error
          }
        })
      }
    })
  },

最后将图片的文件ID（fileID）添加到数据库以便我们通过userID对图片对每个用户的图片进行查找

  uploadPic: function () {
    wx.chooseImage({
      count: 1,//图片上传数量
      sizeType: ['original', 'compressed'],//源文件或者压缩文件
      sourceType: ['album', 'camera'],//来自相册还是相机
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        wx.cloud.uploadFile({
          cloudPath: 'example.png',
          filePath: tempFilePaths[0], // 文件路径
          success: res => {
            // get resource ID
            console.log(res.fileID)
            db.collection('image').add({
              data: {
                fileID: res.fileID
              }
            }).then((res) => {
              console.log(res)
            }).catch((err) => {
              console.error(err)
            })
          },
          fail: err => {
            console.log(err)
            // handle error
          }
        })
      }
    })
  },

完成。我们点击添加图片后，图片会保存到存储空间，相应的文件ID会储存到数据库。

PS：每次上传到云存储的文件名字不能相同，否则会覆盖之前的文件。

从云存储获取图片示例

想要让云存储中的图片在本地展示，只要获取fileID并在image标签中引用即可。

说白了，直接在数据库中查询就可以，根本不用考虑储存的东西。

上代码。

  downloadPic: function () {
    //
    wx.cloud.callFunction({
      name: 'login'
    }).then((res) => {
      db.collection('image').where({
        _openid: res.result.openid
      }).get().then((res1) => {
        console.log(res1.data)
        this.setData({
          images: res1.data
        })
      })
    }).catch((err) => {
      console.log(err)
    })
    //
  },

注意要在data中添加一个images:[] 的属性。用于保存我们的fileID

在wxml中这样引用。当然根据data的形式可以灵活变换，多张图片可以使用循环的形式展示。

<image src="{{images[0].fileID}}"></image>