平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
云开发HTTP二次框架
强烈推荐使用async与await模式进行伪同步开发.
首次使用, 请到文件内修改测试与线上环境
let env = 'dev-xxx'
if(isRelease) env = 'res-yyy'
说明
提供增删改查, 即add remove update get四种基础函数,也可以在此基础上定制其他, 比如源码中的更新用户专用函数:
/**
* 改的专门用在用户上
*/
async updateUser(docID = '', data = {}, isSet) {
return await http.update('_USER', docID, data, isSet)
},
如上, 再次加工非常简单.
使用
main.js
import Vue from 'vue'
import http from './plugins/zz-http.js'
Vue.use(http)
示例
方括号为具体参数
/**
* 增
*/
async add(storeID) {
let res = await this.$add('_USER', [data])
}
/**
* 删
*/
async remove(storeID) {
let res = await this.$remove('_USER', [_id])
}
/**
* 改
*/
async update(storeID) {
let res = await this.$update('_USER', [_id], [data], [isSet])
}
/**
* 查
*/
async get(storeID) {
let res = await this.$get('_USER', [data])
}
核心函数
函数名同步小程序云开发名, 不用额外记忆.
let http = {
/**
* 增
*/
async add(collectionName, data = {}) {
if (arguments.length < 2) {
console.error('参数数量不足')
return
}
let result = null
await collection(collectionName).add({
// data 字段表示需新增的 JSON 数据
data,
}).then(res => {
result = res
}).catch(errHandle)
return result
},
/**
* 删, 只支持单个删除, 多个删除需要云函数处理
*/
async remove(collectionName, docID) {
if (arguments.length < 2) {
console.error('参数数量不足')
return
}
let result = null
await collection(collectionName).doc(docID).remove()
.then(res => result = res)
.catch(errHandle)
return result
},
/**
* 改, 理解顺序: 找到collection, 指定id, 然后更新数据(先找到再更新), 局部更新
* @param {string} docID 单个更新指定_id
* @param {boolean} isSet 是否替换, 与update不同在于, set是把指定的替换了, 而不是更新. 这里用来专门处理更新某个数据, 而不是更新其内部, 更新内部使用_.set
* @remind 多更新需要通过云函数处理, 这里无法操作
*/
async update(collectionName, docID = '', data = {}, isSet) {
if (arguments.length < 3) {
console.error('参数数量不足')
return
}
let result = null
if (isSet) {
await collection(collectionName).doc(docID).set({ data })
.then(res => result = res)
.catch(errHandle)
} else {
await collection(collectionName).doc(docID).update({ data })
.then(res => result = res)
.catch(errHandle)
}
return result
},
/**
* 查, 一次最多只有100条
* @param {object} whereData 多个查询的条件对象
* @param {string} docID 单个查询传入_id
*/
async get(collectionName, whereData, docID) {
if (arguments.length < 1) {
console.error('参数数量不足')
return
}
let result = null
if (whereData) {
await collection(collectionName).where(whereData).get()
.then(res => result = res)
.catch(errHandle)
} else if (docID) {
await collection(collectionName).doc(docID).get()
.then(res => result = res)
.catch(errHandle)
} else {
await collection(collectionName).get()
.then(res => result = res)
.catch(errHandle)
}
return result
},
}
另外, 云开发的command即_, 也同步至vue实例的this.$_
上.
其他
比如环境切换等, 都在该插件里面处理.