微信小程序云开发

微信小程序云开发使用腾讯提供的服务器，基于Serverless架构开发。测试号无云开发功能，因此在开发之前需要准备小程序的AppID一枚，完整源码位于GitHub 。

创建模板

使用小程序开发工具创建官方模板，删除index.js，index.wxml中的内容保留基础框架。

初始化

• 请注意在云开发中创建环境与数据库表：
  
• 初始化云开发需要在工程的app.js文件中编写wx.cloud.init函数：

  App({
    onLaunch:function(){
      wx.cloud.init({
        env:'raincorn-lo6kz' //云开发的环境ID
      })
    }
  })

• 初始化数据库，在index.js中编写：

  const DB=wx.cloud.database().collection("list")
  Page({
  
  })

• 注意当存在多个云环境时，云函数需要指定指定环境，同时需要在cloud.init()中指定。
  

  数据库操作

  增

• 在index.wxml中添加按钮：

  <input placeholder="输入名字" bindinput="addName"></input>
  <input placeholder="输入年龄" bindinput="addAge"></input>
  <button bindtap="addData" type="primary">添加数据</button>

• 在index.js中绑定按钮，编写数据库增加操作：

  const DB = wx.cloud.database().collection("list")
  Page({
      addName(event) {
          name = event.detail.value
      },
      addAge(event) {
          age = event.detail.value
      },
      addData() {
          DB.add({
              data: {
                  name: "hu",
                  age: 10
              },
              success(res) {
                  console.log("SUCCESS !", res)
              },
              fail(res) {
                  console.log("FAILED !", res)
              }
          })
      }
  })

删

• 在index.wxml中添加文本框与按钮

  <input placeholder="输入删除ID" bindinput="delDataInput"></input>
  <button bindtap="delData" type="primary">删除数据</button>

• 在index.js中配置后端

  delDataInput(event) {
          id = event.detail.value
      },
  delData() {
      DB.doc(id).remove({
          success(res) {
              console.log("数据库数据删除成功", res)
          },
          fail(res) {
              console.log("数据库数据删除失败", res)
          }
      })
  }

改

• 在index.wxml中配置输入

  <input placeholder="输入需要修改的ID" bindinput="udpDataInput"></input>
  <input placeholder="输入需要修改的名字" bindinput="udpName"></input>
  <button bindtap="udpData" type="primary">更新数据</button>

• 在index.js中配置后端

udpName(event) {
        name = event.detail.value
    },
    udpDataInput(event) {
        id = event.detail.value
    },
udpData() {
    DB.doc(id).update({
        data: {
            name: name
        },
        success(res) {
            console.log("数据库数据修改成功", res)
        },
        fail(res) {
            console.log("数据库数据修改失败", res)
        }
    })
}

查

getData() {
    DB.get({
        success(res) {
            console.log("数据库数据查询成功", res)
        },
        fail(res) {
            console.log("数据库数据查询失败", res)
        }
    })
}

云函数

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

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
	let a=event.a
   let b=event.b
   return a+b
 }

getsum() {
        wx.cloud.callFunction({
            name: "add",
            data: {
                a: 1,
                b: 2
            },
            success(res) {
                console.log("云函数----加法运行成功,结果为:",res.result)
            },
            fail(res) {
                console.log("云函数----加法运行失败",res.result)
            }
        })
    }

云储存

• 前后端数据绑定

  <button bindtap="upload">上传图片</button>
  <image src="{{imgUrl}}"></image>

• 后端逻辑

  data: {
          imgUrl: ""
      },
  upload() {
          wx.chooseImage({
              success: chooseResult => {
                  wx.cloud.uploadFile({
                      cloudPath: new Date().getTime() + '.png', //使用时间戳唯一命名图片
                      filePath: chooseResult.tempFilePaths[0],
                      success: res => {
                          console.log('上传成功', res)
                          this.setData({
                              imgUrl: res.fileID
                          })
                      },
                      fail: res => {
                          console.log('上传失败', res)
                      }
                  })
              }
          })
      }

  示例如下：