微信小程序-云开发

一、上传图片

1. 上传图片页面（WXML文件）

<!-- 上传图片 -->
<view class="uploader">
<view class="uploader-text" bindtap="doUpload">
<text>上传图片</text>
</view>
</view>

• 绑定了一个 doUpload 处理函数

2. 对应的 JS 处理页面

// 上传图片
doUpload: function () {
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
//显示一个转圈圈的样式
wx.showLoading({
title: '上传中',
})

//获取文件的链接
const filePath = res.tempFilePaths[0]

// 上传图片
const cloudPath = 'upload/my-image' + filePath.match(/\.[^.]+?$/)[0]
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
console.log('[上传文件] 成功：', res)

//保存文件的相关信息，为后续页面做数据展示
getApp().globalData.fileID = res.fileID
getApp().globalData.cloudPath = cloudPath
getApp().globalData.imagePath = filePath

//跳转到数据展示页面
wx.navigateTo({
url: '../storageConsole/storageConsole'
})
},
fail: e => {
console.error('[上传文件] 失败：', e)
wx.showToast({
icon: 'none',
title: '上传失败',
})
},
complete: () => {
wx.hideLoading()
}
})

},
fail: e => {
console.error(e)
}
})
},

})

3. 上传成功后 数据展示页面

• JS 文件

const app = getApp()

Page({

data: {
fileID: '',
cloudPath: '',
imagePath: '',
},

//监听页面加载事件
onLoad: function (options) {
const {
fileID,
cloudPath,
imagePath,
} = app.globalData
//设值
this.setData({
fileID,
cloudPath,
imagePath,
})
})

• WXML 文件

<view class="list">
<view class="list-item" bindtap="testCgi">
<text class="black">上传成功</text>
</view>
<view class="list-item">
<text class="request-text">文件 ID：{{fileID}}</text>
</view>
<view class="list-item">
<text class="request-text">云文件路径：{{cloudPath}}</text>
</view>
<view class="list-item">
<image class="image1" src="{{imagePath}}" mode="aspectFit"></image>
</view>
</view>

二、获取 用户唯一标识

1. WXML 页面

<view>
<button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openid</button>
</view>

2. 对应的 JS 处理页面

onGetOpenid: function() {
// 调用云函数
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[云函数] [login] user openid: ', res.result.openid)
app.globalData.openid = res.result.openid
wx.navigateTo({
url: '../userConsole/userConsole',
})
},
fail: err => {
console.error('[云函数] [login] 调用失败', err)
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
}
})
},

• 其中引用的云函数：

const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init()

/**
* event 参数包含小程序端调用传入的 data
*/
exports.main = (event, context) => {

// 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）
const wxContext = cloud.getWXContext()

return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}

3. 获取成功后 数据展示页面

• JS 文件

Page({

data: {
openid: ''
},

onLoad: function (options) {
this.setData({
openid: getApp().globalData.openid
})
}
})

• WXML 文件

<view class="list">
<view class="list-item" bindtap="testCgi">
<text class="request-text">用户 openid 获取成功</text>
</view>
<view class="list-item" bindtap="testCgi">
<text class="request-text">{{openid}}</text>
</view>
</view>

三、简单操作云端数据库

// 云函数入口文件

const cloud = require('wx-server-sdk')

// 初始化

cloud.init()

1. 增加数据

onAdd: function () {
const db = wx.cloud.database()
db.collection('counters').add({
data: {
count: 1
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
this.setData({
counterId: res._id,
count: 1
})
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败：', err)
}
})
},

2.删除数据

onRemove: function() {
if (this.data.counterId) {
const db = wx.cloud.database()
//this.data.counterId 为用户唯一标识
db.collection('counters').doc(this.data.counterId).remove({
success: res => {
wx.showToast({
title: '删除成功',
})
},
fail: err => {
wx.showToast({
icon: 'none',
title: '删除失败',
})
console.error('[数据库] [删除记录] 失败：', err)
}
})
} else {
wx.showToast({
title: '无记录可删，请见创建一个记录',
})
}
},

3.修改数据

onUpdate: function() {
const db = wx.cloud.database()
const newCount = this.data.count + 1
//this.data.counterId 为用户唯一标识
db.collection('counters').doc(this.data.counterId).update({
data: {
count: newCount
},
success: res => {
this.setData({
count: newCount
})
},
fail: err => {
icon: 'none',
console.error('[数据库] [更新记录] 失败：', err)
}
})
},

4. 查询数据

onQuery: function() {
const db = wx.cloud.database()
// 查询当前用户所有的 counters
db.collection('counters').where({
_openid: this.data.openid
}).get({
success: res => {
this.setData({
queryResult: JSON.stringify(res.data, null, 2)
})
console.log('[数据库] [查询记录] 成功: ', res)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '查询记录失败'
})
console.error('[数据库] [查询记录] 失败：', err)
}
})
}

四、补充

其它相关操作详情，请参照微信小程序-官方开发文档

官方开发文档地址