微信小程序入门笔记-使用云开发（4）

幸福没有标准 發表於 2020-2-16 16:58:00

微信小程序入门笔记-使用云开发（4）

<h2>1、云数据库</h2>
<h3>一、介绍</h3>
云开发提供了一个 JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。
关系型数据库和 JSON 数据库的概念对应关系如下表：
<div class="table-wrp">
<table>
<thead>
<tr><th>关系型</th><th>文档型</th></tr>
</thead>
<tbody>
<tr>
<td>数据库 database</td>
<td>数据库 database</td>
</tr>
<tr>
<td>表 table</td>
<td>集合 collection</td>
</tr>
<tr>
<td>行 row</td>
<td>记录 record / doc</td>
</tr>
<tr>
<td>列 column</td>
<td>字段 field</td>
</tr>
</tbody>
</table>
云开发数据库提供以下几种数据类型：
<ul>
<li>String：字符串</li>
<li>Number：数字</li>
<li>Object：对象</li>
<li>Array：数组</li>
<li>Bool：布尔值</li>
<li>Date：时间</li>
<li>Geo：多种地理位置类型，详见</li>
<li>Null</li>
</ul>
<h3> 二、使用</h3>
（1、使用之前把页面创建好（我创建了home和personal）：
<img src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216152533894-1594441430.png">
 
（2、配置app.json
<img src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216153611479-1651840758.png">
 
在“云开发”中点击数据库，创建user、image两个集合
<img src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216150722451-859004757.png">
personal.js
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_b0d08090-0df7-4b5a-a158-0824a91e50be" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_b0d08090-0df7-4b5a-a158-0824a91e50be" class="cnblogs_code_hide">
<pre>1 /**
2 * 初始化数据库
3 * 用evn属性可以切换属性
4 * database({evn:test})
5*/
6 const db = wx.cloud.database();
7 const user = db.collection("user");
8 // pages/personal/personal.js
9 Page({
 10 /**
 11 * 页面的初始数据
 12 */
 13 data: {
 14 images: []
 15 },
 16 /**
 17 * 插入数据
 18 */
 19 insert: function(){
 20 user.add({
 21 data: {
 22 name: 'hh',
 23 age: 20
 24 }
 25 }).then(res=>{
 26 // 回调函数
 27 console.log(res)
 28 wx.showToast({
 29 title: 'success',
 30 })
 31 }).catch(err=>{
 32 //抓取错误
 33 console.log(err)
 34 })
 35 },
 36 update: function(){
 37 // 根据云数据库 _id更新
 38 user.doc('1acf1de95e48f2f310877a982d2de27f').update({
 39 data: {
 40 age: 19,
 41 name: 'mm'
 42 }
 43 }).then(res => {
 44 console.log(res)
 45 console.log('success')
 46 }).catch(err => {
 47 console.log(err)
 48 })
 49 },
 50 select: function () {
 51 user.where({
 52 name: 'hh'
 53 }).get().then(res => {
 54 console.log(res)
 55 console.log('success')
 56 }).catch(err => {
 57 console.log(err)
 58 })
 59 },
 60 del: function(){
 61 user.doc('1acf1de95e48f2f310877a982d2de27f').remove()
 62 .then(res => {
 63 console.log(res)
 64 console.log('success')
 65 }).catch(err => {
 66 console.log(err)
 67 })
 68 },
 69 /**
 70 * 生命周期函数--监听页面加载
 71 */
 72 onLoad: function (options) {
 73
 74 },
 75
 76 /**
 77 * 生命周期函数--监听页面初次渲染完成
 78 */
 79 onReady: function () {
 80
 81 },
 82
 83 /**
 84 * 生命周期函数--监听页面显示
 85 */
 86 onShow: function () {
 87
 88 },
 89
 90 /**
 91 * 生命周期函数--监听页面隐藏
 92 */
 93 onHide: function () {
 94
 95 },
 96
 97 /**
 98 * 生命周期函数--监听页面卸载
 99 */
100 onUnload: function () {
101
102 },
103
104 /**
105 * 页面相关事件处理函数--监听用户下拉动作
106 */
107 onPullDownRefresh: function () {
108
109 },
110
111 /**
112 * 页面上拉触底事件的处理函数
113 */
114 onReachBottom: function () {
115
116 },
117
118 /**
119 * 用户点击右上角分享
120 */
121 onShareAppMessage: function () {
122
123 }
124 })</pre>
</div>
View Code</div>
personal.wxml
<div class="cnblogs_code"><img id="code_img_closed_f208026d-8b96-4cb1-b686-1fbc620f867a" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_f208026d-8b96-4cb1-b686-1fbc620f867a" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_f208026d-8b96-4cb1-b686-1fbc620f867a" class="cnblogs_code_hide">
<pre>1 <view>云数据库</view>
2 <button bindtap="insert">插入数据</button>
3 <button bindtap="update">更新数据</button>
4 <button bindtap="select">查询数据</button>
5 <button bindtap="del">删除数据</button></pre>
</div>
View Code</div>
<img alt="" data-src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216155108948-1309522621.png">
<h2>2、云函数</h2>
<h3> 一、介绍</h3>
云函数即在云端（服务器端）运行的函数。在物理设计上，一个云函数可由多个文件组成，占用一定量的 CPU 内存等计算资源；各云函数完全独立；可分别部署在不同的地区。开发者无需购买、搭建服务器，只需编写函数代码并部署到云端即可在小程序端调用，同时云函数之间也可互相调用。
一个云函数的写法与一个在本地定义的 JavaScript 方法无异，代码运行在云端 Node.js 中。当云函数被小程序端调用时，定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作，而且我们还可以通过云函数后端 SDK 搭配使用多种服务，比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作，这部分可参考数据库和存储后端 API 文档。
云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权，开发者可以直接使用该 openid。
<h3>二、使用</h3>
（1、安装nodejs环境
（2、创建云函数（我这里创建了3个云函数）
<img src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216162159150-691500690.png">
 
修改各个云函数的index.js
batchDelete:
<div class="cnblogs_code">
<pre>// 云函数入口文件
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: 'hh'
}).remove();
}catch(e){
console.error(e)
}
}</pre>
</div>
login:
<div class="cnblogs_code">
<pre>// 云函数模板
// 部署：在 cloud-functions/login 文件夹右击选择 “上传并部署”

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

// 初始化 cloud
cloud.init({
// API 调用都保持和云函数当前所在环境一致
env: cloud.DYNAMIC_CURRENT_ENV
})

/**
* 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
*
* event 参数包含小程序端调用传入的 data
*
*/
exports.main = (event, context) => {
// 可执行其他自定义逻辑
// console.log 的内容可以在云开发云函数调用日志查看

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

return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
env: wxContext.ENV,
}
}</pre>
</div>
sum:
<div class="cnblogs_code">
<pre>// const cloud = require('wx-server-sdk')

// cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
return {
sum: event.a + event.b
}
}</pre>
</div>
然后把写完的函数都要上传云端（记住修改过云函数一定要同步到云端）
<img src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216162627208-99064458.png">
 <img src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216163739139-1429026873.png">
 
 
 页面代码：
personal.js
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_c5a080a3-9069-4453-a28f-3fc191e565c7" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_c5a080a3-9069-4453-a28f-3fc191e565c7" class="cnblogs_code_hide">
<pre>/**
* 初始化数据库
* 用evn属性可以切换属性
* database({evn:test})
*/
const db = wx.cloud.database();
const user = db.collection("user");
// pages/personal/personal.js
Page({
/**
* 页面的初始数据
*/
data: {
images: []
},
/**
* 插入数据
*/
insert: function(){
user.add({
 data: {
 name: 'hh',
 age: 20
 }
}).then(res=>{
 // 回调函数
 console.log(res)
 wx.showToast({
 title: 'success',
 })
}).catch(err=>{
 //抓取错误
 console.log(err)
})
},
update: function(){
// 根据云数据库 _id更新
user.doc('1acf1de95e48f2f310877a982d2de27f').update({
 data: {
 age: 19,
 name: 'mm'
 }
}).then(res => {
 console.log(res)
 console.log('success')
}).catch(err => {
 console.log(err)
})
},
select: function () {
user.where({
 name: 'hh'
}).get().then(res => {
 console.log(res)
 console.log('success')
}).catch(err => {
 console.log(err)
})
},
del: function(){
user.doc('1acf1de95e48f2f310877a982d2de27f').remove()
.then(res => {
 console.log(res)
 console.log('success')
}).catch(err => {
 console.log(err)
})
},
sum: function () {
wx.cloud.callFunction({
 name: 'sum',//云函数名
 data: {
 a: 2,
 b: 3
 }
}).then(res => {
 console.log(res)
}).catch(err => {
 console.log(err)
});
},
getOpenId: function () {
wx.cloud.callFunction({
 name: 'login'
}).then(res => {
 console.log(res)
}).catch(err => {
 console.log(err)
});
},
batchDel: function () {
wx.cloud.callFunction({
 name: 'batchDelete'
}).then(res => {
 console.log(res)
}).catch(err => {
 console.error(err)
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})</pre>
</div>
View Code</div>
personal.wxml
<div class="cnblogs_code"><img id="code_img_closed_e8174d2a-bea1-4177-8f5d-08440346c00a" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_e8174d2a-bea1-4177-8f5d-08440346c00a" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_e8174d2a-bea1-4177-8f5d-08440346c00a" class="cnblogs_code_hide">
<pre><view>云数据库</view>
<button bindtap="insert">插入数据</button>
<button bindtap="update">更新数据</button>
<button bindtap="select">查询数据</button>
<button bindtap="del">删除数据</button>
<view>云函数</view>
<button bindtap="sum">调用云函数sum</button>
<button bindtap="getOpenId">获取getOpenId</button>
<button bindtap="batchDel">批量删除</button></pre>
</div>
View Code</div>
<img alt="" data-src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216163042633-38067230.png">
 
<h2> 3、云存储</h2>
<h3>一、介绍</h3>
云存储提供高可用、高稳定、强安全的云端存储服务，支持任意数量和形式的非结构化数据存储，如视频和图片，并在控制台进行可视化管理。云存储包含以下功能：
<ul>
<li>存储管理：支持文件夹，方便文件归类。支持文件的上传、删除、移动、下载、搜索等，并可以查看文件的详情信息</li>
<li>权限设置：可以灵活设置哪些用户是否可以读写该文件夹中的文件，以保证业务的数据安全</li>
<li>上传管理：在这里可以查看文件上传历史、进度及状态</li>
<li>文件搜索：支持文件前缀名称及子目录文件的搜索</li>
<li>组件支持：支持在 <code>image</code>、<code>audio</code> 等组件中传入云文件 ID</li>
</ul>
<h3>二、使用</h3>
（1、文件上传流程：
<img src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216165202824-199480918.png">
 
 （2、代码：
personal.wxml
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_7c6136e8-cd12-43d4-83e2-af6e3b7dc34c" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_7c6136e8-cd12-43d4-83e2-af6e3b7dc34c" class="cnblogs_code_hide">
<pre><view>云数据库</view>
<button bindtap="insert">插入数据</button>
<button bindtap="update">更新数据</button>
<button bindtap="select">查询数据</button>
<button bindtap="del">删除数据</button>
<view>云函数</view>
<button bindtap="sum">调用云函数sum</button>
<button bindtap="getOpenId">获取getOpenId</button>
<button bindtap="batchDel">批量删除</button>
<view>云存储</view>
<button bindtap="uploadImg">上传图片</button>
<button bindtap="getImg">获取图片</button>
<block wx:for='{{images}}' wx:key='index'>
<image src="{{item.fileId}}"></image>
<button data-fileId="{{item.fileId}}" bindtap="downloadFile">文件下载</button>
</block></pre>
</div>
View Code</div>
personal.js
<div class="cnblogs_code"><img id="code_img_closed_35b9dc3c-f211-4bd8-a6db-ff8ee62edf98" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_35b9dc3c-f211-4bd8-a6db-ff8ee62edf98" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_35b9dc3c-f211-4bd8-a6db-ff8ee62edf98" class="cnblogs_code_hide">
<pre>/**
* 初始化数据库
* 用evn属性可以切换属性
* database({evn:test})
*/
const db = wx.cloud.database();
const user = db.collection("user");
const cloudImage = db.collection("image");
// pages/personal/personal.js
Page({
/**
* 页面的初始数据
*/
data: {
images: []
},
/**
* 插入数据
*/
insert: function () {
user.add({
 data: {
 name: 'hh',
 age: 20
 }
}).then(res => {
 // 回调函数
 console.log(res)
 wx.showToast({
 title: 'success',
 })
}).catch(err => {
 //抓取错误
 console.log(err)
})
},
update: function () {
user.doc('74b140b45e4513af0f0aab605928da00').update({
 data: {
 age: 19,
 name: 'mm'
 }
}).then(res => {
 console.log(res)
 console.log('success')
}).catch(err => {
 console.log(err)
})
},
del: function () {
user.doc('0ec685215e45122d0f0ad2e55bb2ee69').remove()
 .then(res => {
 console.log(res)
 console.log('success')
 }).catch(err => {
 console.log(err)
 })
},
select: function () {
user.where({
 name: 'hh'
}).get().then(res => {
 console.log(res)
 console.log('success')
}).catch(err => {
 console.log(err)
})
},
sum: function () {
wx.cloud.callFunction({
 name: 'sum',//云函数名
 data: {
 a: 2,
 b: 3
 }
}).then(res => {
 console.log(res)
}).catch(err => {
 console.log(err)
});
},
getOpenId: function () {
wx.cloud.callFunction({
 name: 'login'
}).then(res => {
 console.log(res)
}).catch(err => {
 console.log(err)
});
},
batchDel: function () {
wx.cloud.callFunction({
 name: 'batchDelete'
}).then(res => {
 console.log(res)
}).catch(err => {
 console.error(err)
});
},
//上传图片
uploadImg: function () {
wx.chooseImage({
 count: 1,
 sizeType: ['original', 'compressed'],
 sourceType: ['album', 'camera'],
 success(res) {
 // tempFilePath可以作为img标签的src属性显示图片
 const tempFilePaths = res.tempFilePaths;
 wx.cloud.uploadFile({
 cloudPath: new Date().getTime() + '.png', // 为了确保不重名
 filePath: tempFilePaths, // 文件路径，因为tempFilePaths是一个数组
 success: res => {
 // get resource ID
 console.log(res.fileID)
 //存储数据到云数据库
 cloudImage.add({
 data: {
 fileId: res.fileID
 }
 }).then(res => {
 console.log(res)
 }).catch(err => {
 console.error(err)
 })
 },
 fail: err => {
 // handle error
 }
 })
 }
})
},
// 获取图片
getImg: function () {
wx.cloud.callFunction({
 name: 'login'
}).then(res => {
 // 查询
 cloudImage.where({ _openid: res.result.openid })
 .get().then(res => {
 this.setData({
 images: res.data
 })
 })
}).catch(err => {
 console.log(err)
});
},
// 文件下载
downloadFile: function (event) {
/** event.target.dataset.fileid在wxml遍历数据时候设置的
* data-fileId="{{item.fileId}}"
*/
console.log(event.target.dataset.fileid)
wx.cloud.downloadFile({
 fileID: event.target.dataset.fileid,
 success: res => {
 // get temp file path
 console.log(res.tempFilePath)
 //res.tempFilePath是响应回来的零食路径
 wx.saveImageToPhotosAlbum({
 filePath: res.tempFilePath,
 success(res) {
 console.log(res)
 wx.showToast({
 title: '保存成功！',
 })
 },
 fail(err) {
 // 保存未授权
 console.error(err)
 if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
 // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
 wx.showModal({
 title: '提示',
 content: '需要您授权保存相册',
 showCancel: false,
 success: modalSuccess => {
 wx.openSetting({
 success(settingdata) {
 console.log("settingdata", settingdata)
 if (settingdata.authSetting['scope.writePhotosAlbum']) {
 wx.showModal({
 title: '提示',
 content: '获取权限成功,再次点击图片即可保存',
 showCancel: false,
 })
 } else {
 wx.showModal({
 title: '提示',
 content: '获取权限失败，将无法保存到相册哦~',
 showCancel: false,
 })
 }
 },
 fail(failData) {
 console.log("failData", failData)
 },
 complete(finishData) {
 console.log("finishData", finishData)
 }
 })
 }
 })
 }
 }
 })
 },
 fail: err => {
 // handle error
 }
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})</pre>
</div>
View Code</div>
<img alt="" data-src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216165620575-1549903213.png">
 <img src="https://img2018.cnblogs.com/i-beta/1406035/202002/1406035-20200216165928984-651408446.png">
 
 
 
 
 
 
</div> 
来源：https://www.cnblogs.com/hhmm99/p/12316872.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序入门笔记-使用云开发（4）