詳解小程序云開發(fā)攻略(解決最棘手的問題)
背景
最近小程序非常的火,應(yīng)公司業(yè)務(wù)發(fā)展要求,開發(fā)維護(hù)了幾款小程序,公司開發(fā)的小程序都是由后端提供的接口,開發(fā)繁瑣而復(fù)雜,直到小程序出現(xiàn)了云開發(fā),仔細(xì)研讀了文檔之后,欣喜不已,于是我著手開發(fā)了本人的第一款小程序
- 小程序云開發(fā)教程地址 點(diǎn)我查看>>
分析
云開發(fā)為開發(fā)者提供完整的原生云端支持和微信服務(wù)支持,弱化后端和運(yùn)維概念,無需搭建服務(wù)器,使用平臺(tái)提供的 API 進(jìn)行核心業(yè)務(wù)開發(fā),即可實(shí)現(xiàn)快速上線和迭代,同時(shí)這一能力,同開發(fā)者已經(jīng)使用的云服務(wù)相互兼容,并不互斥。
優(yōu)勢
- 無需自建服務(wù)器,數(shù)據(jù)庫,無需自建存儲(chǔ)和CDN
- 數(shù)據(jù)庫模型很簡單,就是一個(gè)json形式的對(duì)象格式
- 調(diào)用服務(wù)端云函數(shù)自動(dòng)獲取openid,再也沒有繁瑣的授權(quán)登陸流程了,只要進(jìn)入小程序就是登陸狀態(tài),體驗(yàn)真的好
- 開發(fā)迅速,只需要前端就能搞定所有開發(fā)工作
需要解決的問題
數(shù)據(jù)庫切換問題
使用過云開發(fā)的人都發(fā)現(xiàn)云開發(fā)切換數(shù)據(jù)庫環(huán)境是最頭疼的,如果手動(dòng)去切換容易搞錯(cuò),不小心在當(dāng)前環(huán)境修改了線上數(shù)據(jù)庫數(shù)據(jù)
直到官方出了這個(gè)函數(shù)問題也就迎刃而解
cloud.updateConfig({
env: ENV === 'local' ? 'dev-aqijb' : ENV
});
我使用的是服務(wù)端云開發(fā)功能,為什么要這樣判斷,因?yàn)樵陂_發(fā)工具中ENV = 'local',所以這么判斷一下,保證開發(fā)工具中使用的是測試環(huán)境數(shù)據(jù)庫
使用taro多端開發(fā)框架,借助于webpack,還可以通過process.env.NODE_ENV值區(qū)分當(dāng)前代碼開發(fā)環(huán)境
await Taro.cloud.init({
env: `${process.env.NODE_ENV === 'development' ? 'dev-aqijb' : 'pro-hljv7'}`
/* env: 'pro-hljv7' */
});
這樣可以保證開發(fā)環(huán)境和線上環(huán)境可以使用對(duì)應(yīng)環(huán)境的數(shù)據(jù)庫
數(shù)據(jù)庫字段定義問題
因?yàn)镴S是弱類型語言,不能像typescript那樣靜態(tài)定義變量類型,這樣添加到數(shù)據(jù)庫的字段數(shù)量和字段類型都無法控制
我不想用typescript,能不能實(shí)現(xiàn)這樣的功能呢,可以用superstruct庫來實(shí)現(xiàn)這個(gè)功能
- superstruct git地址 點(diǎn)我查看>>
詳細(xì)使用案例見下方代碼
函數(shù)文件太多的問題
官方和他人教程的例子都是一個(gè)文件對(duì)應(yīng)一個(gè)云函數(shù),通過開發(fā)體驗(yàn)我發(fā)現(xiàn)這樣做并不好,當(dāng)項(xiàng)目有多個(gè)表的時(shí)候,找個(gè)函數(shù)文件真的太難了
我們可以將一個(gè)表的增刪改查函數(shù)全部寫入一個(gè)文件中
教程: 首先每個(gè)云函數(shù)文件中package.json引入superstruct
{
"dependencies": {
"wx-server-sdk": "latest",
"superstruct": "latest"
}
}
以下代碼是一個(gè)完整的云函數(shù)例子
const cloud = require('wx-server-sdk');
const { struct, superstruct } = require('superstruct');
cloud.init();
//小區(qū)信息
const Model = () => {
const db = cloud.database();
const _ = db.command;
const collection = db.collection('address');
return {
async add(data) {
try {
data = struct({
name: 'string', //名字
phone: 'string',
unit: 'number', //樓單元號(hào)
doorNumber: 'string', //門號(hào)
communityId: 'string', //小區(qū)id
_openid: 'string' //用戶的id
//isDefault: 'boolean' //是否默認(rèn)地址
})(data);
} catch (e) {
const { path, value, type } = e;
const key = path[0];
if (value === undefined) {
const error = new Error(`${key}_required`);
error.attribute = key;
throw error;
}
if (type === undefined) {
const error = new Error(`attribute_${key}_unknown`);
error.attribute = key;
throw error;
}
const error = new Error(`${key}_invalid`);
error.attribute = key;
error.value = value;
throw error;
}
let res = await this.getList({ _openid: data._openid });
if (res.data.length >= 1) {
return { msg: '當(dāng)前只支持保存一個(gè)地址' };
}
res = await collection.add({
data,
createTime: db.serverDate(),
updateTime: db.serverDate()
});
return res;
},
async getAdressById({ _openid, _id }) {
const user = await collection
.where({
_openid,
_id: _.eq(_id)
})
.get();
return user;
},
//更新指定的id 先判斷手機(jī)號(hào)修改沒,沒修改直接就改數(shù)據(jù),修改過判斷一下庫中有沒有這條數(shù)據(jù)
async update(data) {
//更新表的操作
},
//刪除指定id的shop
async remove({ _id, _openid }) {
//刪除表的操作
},
/**
* 獲取商列表
* @param {*} option {category 類別, pagenum 頁碼}
*/
async getList({ _openid }) {
const shopList = await collection
.where({
_openid
})
.get();
return shopList;
}
};
};
exports.main = async (event, context) => {
const { func, data } = event;
const { ENV, OPENID } = cloud.getWXContext();
// 更新默認(rèn)配置,將默認(rèn)訪問環(huán)境設(shè)為當(dāng)前云函數(shù)所在環(huán)境
console.log('ENV', ENV);
cloud.updateConfig({
env: ENV === 'local' ? 'dev-aqijb' : ENV
});
let res = await Model()[func]({ ...data, _openid: OPENID });
return {
ENV,
data: res
};
};
函數(shù)使用方式
wx.cloud.callFunction({
'address', //云函數(shù)文件名
data: {
func: 'add', //云函數(shù)中定義的方法
data: {} //需要上傳的數(shù)據(jù)
}
});
圖片 視頻等文件
直接打開云開發(fā)控制臺(tái)選擇存儲(chǔ)直接上傳文件,復(fù)制url地址就可以放到代碼中使用了
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript fullscreen全屏實(shí)現(xiàn)代碼
用了實(shí)現(xiàn)打開一個(gè)滿屏的代碼2009-04-04
BootStrap 動(dòng)態(tài)添加驗(yàn)證項(xiàng)和取消驗(yàn)證項(xiàng)的實(shí)現(xiàn)方法
這篇文章主要介紹了BootStrap 動(dòng)態(tài)添加驗(yàn)證項(xiàng)和取消驗(yàn)證項(xiàng)的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
javascript 上下banner替換具體實(shí)現(xiàn)
這篇文章介紹了javascript 上下banner替換具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-11-11
用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互
這篇文章主要介紹了用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互2006-10-10
JavaScript實(shí)現(xiàn)簡單的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01

