最近用小程序的云開發(fā)功能寫了個小程序送火，發(fā)現(xiàn)云開發(fā)這個東西真的是前端開發(fā)者的福音拳话，因為你幾乎不需要懂任何后端的東西就可以把數(shù)據(jù)庫、接口全搞定
最重要的是現(xiàn)在免費种吸！不過以后就不知道了弃衍。
云開發(fā)個小程序，假裝自己是個“小程序全棧開發(fā)工程師”坚俗，哈哈镜盯，雖然跟真正的全棧開發(fā)還差得遠，但是也算邁出了一小步
云開發(fā)介紹
開發(fā)者可以使用云開發(fā)開發(fā)微信小程序猖败、小游戲速缆，無需搭建服務器，即可使用云端能力恩闻。
云開發(fā)為開發(fā)者提供完整的原生云端支持和微信服務支持艺糜，弱化后端和運維概念，無需搭建服務器幢尚，使用平臺提供的 API 進行核心業(yè)務開發(fā)破停，即可實現(xiàn)快速上線和迭代，同時這一能力尉剩，同開發(fā)者已經(jīng)使用的云服務相互兼容真慢，并不互斥。
云開發(fā)提供了幾大基礎能力支持：
| 能力 | 作用 | 說明 |
|---|---|---|
| 云函數(shù) | 無需自建服務器 | 在云端運行的代碼理茎，微信私有協(xié)議天然鑒權黑界，開發(fā)者只需編寫自身業(yè)務邏輯代碼 |
| 數(shù)據(jù)庫 | 無需自建數(shù)據(jù)庫 | 一個既可在小程序前端操作，也能在云函數(shù)中讀寫的 JSON 數(shù)據(jù)庫 |
| 存儲 | 無需自建存儲和 CDN | 在小程序前端直接上傳/下載云端文件皂林，在云開發(fā)控制臺可視化管理 |
| 云調(diào)用 | 原生微信服務集成 | 基于云函數(shù)免鑒權使用小程序開放接口的能力朗鸠，包括服務端調(diào)用、獲取開放數(shù)據(jù)等能力 |
起步
1. 新建云開發(fā)模板
新建項目選擇小程序·云開發(fā)（沒有這項就更新軟件）础倍，如果你選擇了這項則APPID必填且不能使用測試號童社。
點擊新建，你就得到了一個quickStart默認小程序
2. 開通云開發(fā)
在開發(fā)者工具工具欄左側(cè)著隆，點擊 “云開發(fā)” 根據(jù)提示開通云開發(fā)扰楼。默認配額下可以創(chuàng)建兩個環(huán)境呀癣，一般就是一個測試環(huán)境一個生產(chǎn)環(huán)境，名字創(chuàng)建完就不能修改了弦赖。
3. 云開發(fā)控制臺
點云開發(fā)按鈕進入云開發(fā)控制臺项栏，其提供以下能力：
- 運營分析：查看云開發(fā)監(jiān)控、配額使用量蹬竖、用戶訪問情況
- 數(shù)據(jù)庫：管理數(shù)據(jù)庫沼沈，可查看、增加币厕、更新列另、查找、刪除數(shù)據(jù)旦装、管理索引页衙、管理數(shù)據(jù)庫訪問權限等
- 存儲管理：查看和管理存儲空間
- 云函數(shù)：查看云函數(shù)列表、配置阴绢、日志
小程序前端開發(fā)
接下來你有兩個選擇：
- 小程序前端用原生編寫店乐，附上小程序框架參考文檔
- 用其他框架編寫
1. mpvue
之前一直習慣用vue的，美團家的mpvue是個不錯的選擇呻袭，雖然有些閹割眨八，但是大部分功能都是支持的，下面列舉一些不支持的特性：
- 不支持 純-HTML左电，小程序里所有的 BOM／DOM 都不能用廉侧，也就是說 v-html 指令不能用。
- 模板語法不支持部分復雜的 JavaScript 渲染表達式如：
<p>{{message.split('').reverse().join('') }}</p> - 不支持過濾器
- 不支持在 template 內(nèi)使用 methods 中的函數(shù)篓足。
- 不支持 官方文檔：Class 與 Style 綁定 中的
classObject和styleObject語法伏穆。 - 不支持在組件上使用 Class 與 Style 綁定
2. 把mpvue項目整合進小程序
首先初始化一個mpvue項目：
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴
$ cd my-project
$ npm install
這個時候可以先不啟動構(gòu)建，我們現(xiàn)在把之前創(chuàng)建的quickStart小程序根目錄/miniprogram/下的所有文件刪掉纷纫，然后把剛剛創(chuàng)建的mpvue項目目錄下的所有文件（不要忘記隱藏文件）復制到小程序根目錄/miniprogram/中，然后用編輯器打開小程序根目錄里的project.config.json陪腌，修改如下字段：
{
"miniprogramRoot": "miniprogram/dist/wx/"
}
現(xiàn)在cd進miniprogram/執(zhí)行npm run dev辱魁，run成功，在微信開發(fā)者工具就能看到mpvue的初始頁面了
然后初始化云函數(shù)诗鸭，修改main.js染簇，添加如下代碼
// /miniprogram/src/main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
// 初始化云函數(shù)
if (!wx.cloud) {
console.error('請使用 2.2.3 或以上的基礎庫以使用云能力')
} else {
wx.cloud.init()
}
const app = new Vue(App)
app.$mount()
接著隨便找一個頁面調(diào)用一下quickStart自帶的云函數(shù)，如果看到console中有輸出就大功告成了
// /miniprogram/src/pages/index/index.vue
created () {
wx.cloud.callFunction({
name: 'login',
data: {},
success: (res) => {
console.log(res)
}
})
}
云函數(shù)開發(fā)
云函數(shù)也是js的語法强岸，只不過其中穿插著一下數(shù)據(jù)庫的api锻弓，下面以一個獲取訂單列表的接口為例
1. 數(shù)據(jù)庫
打開云開發(fā)控制臺，先在數(shù)據(jù)庫中創(chuàng)建一個orders合集蝌箍，并添加幾條數(shù)據(jù)青灼，如果覺得麻煩也可以導入json或者CVS文件
復制下面代碼暴心，保存到一個json文件中導入數(shù)據(jù)庫，注意導入的json文件中不是一個數(shù)組杂拨，兩條數(shù)據(jù)也不是用逗號分隔专普，附上導入格式
{
"orderName": "xxx",
"orderDate": 1559700370215,
"done": 0,
"goodsList": [
{
"name": "xx",
"price": 200,
"last": 100
}
]
}
{
"orderName": "xxx1",
"orderDate": 1559700370215,
"done": 0,
"goodsList": [
{
"name": "xx",
"price": 200,
"last": 100
}
]
}
2. 云函數(shù)
在開發(fā)者工具的編輯器中右鍵cloudfunctions文件夾，新建一個云函數(shù)弹沽，輸入函數(shù)名比如getOrderList
打開其中的index.js文件檀夹，下面是一個帶分頁和排序的列表云函數(shù)
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init({
// 你剛才新建數(shù)據(jù)的環(huán)境的id
env: 'test-xxx'
})
// 獲取數(shù)據(jù)庫的引用
const db = cloud.database()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
/**
* @param orderBy [排序字段]
* @param dir [排序方向]
* @param page [分頁，從1開始]
* @param pageSize [每頁展示條數(shù)]
* @param mine [是否我的訂單]
*/
try {
const wxContext = cloud.getWXContext()
// 傳入的參數(shù)都在event中獲取
const { orderBy = 'orderDate', dir = 'desc', page = 1, pageSize = 20, mine } = event
const skip = (page - 1) * pageSize
const limit = skip + Number(pageSize)
const myOrder = mine ? { openid: wxContext.OPENID } : {}
// 獲取當前查詢條件下的總數(shù)
const count = await db.collection('orders').where(myOrder).count()
const res = await db.collection('orders')
.where(myOrder)
.orderBy(orderBy, dir)
.skip(skip)
.limit(limit)
.get()
return {
data: res.data,
total: count.total,
page,
pageSize,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
} catch (e) {
return e
}
}
3. 云函數(shù)的調(diào)試
你可能已經(jīng)發(fā)現(xiàn)了一個問題策橘，就是云函數(shù)中寫的console.log不會在開發(fā)者工具的控制臺打印炸渡，所以調(diào)試云函數(shù)的正確做法是：
- 在terminal中cd進你要調(diào)試的云函數(shù)文件夾并執(zhí)行
npm i - 在開發(fā)者工具中右鍵點擊云函數(shù)名，選擇本地調(diào)試
如果依賴安裝正確的話右上角那個“開啟本地調(diào)試”應該是默認勾選的丽已，最好把第二個也一起勾選蚌堵；你輸入的參數(shù)也可以保存起來留著下次用
點擊調(diào)用了，云函數(shù)中的console.log會在這個控制臺輸出
4. 云函數(shù)的調(diào)用
在調(diào)用之前記得在app啟動的時候初始化云能力促脉，傳入的環(huán)境id也要對應
mpvue云函數(shù)的初始化在上面辰斋，原生的就參考quickStart，在app.js中
// 調(diào)用云函數(shù)
wx.cloud.callFunction({
// 函數(shù)名
name: 'getOrderList',
data: {
page: 1,
pageSize: 20,
orderBy: 'orderDate',
dir: 'desc'
},
success: res => {
console.log(res.result.data)
},
fail: err => {
console.error(err)
}
})
小程序遇到的坑
小程序hidden不能用在自定義組件上
解決方案：在組件外面包一層view瘸味，把hidden寫在view上小程序的云函數(shù)每次修改完都要在微信開發(fā)者工具里手動右鍵宫仗，上傳并部署，不然不生效
給云函數(shù)接口傳參的時候不能有userInfo字段旁仿，因為他會默認傳遞同名字段把你傳的覆蓋掉藕夫，導致你獲取不到你想要的參數(shù)
vant weapp的van-dialog組件，在頁面的onshow方法中彈出時有時候會沒有后面的遮蓋層
解決方案：把頁面中的如下類名加一個樣式：
.transition-index--van-fade-leave-to {
opacity: 1;
}
van-field組件設置了type="textarea"枯冈，在彈出van-dialog的情況下仍能點擊彈出鍵盤
解決方案：在van-dialog彈出的時候給field組件設置disabledvan-swipe-cell組件的左右按鈕樣式需要自理毅贮。。組件默認無樣式尘奏，在頁面中添加如下樣式就跟官方的一樣了
/*van-swipe-cell*/
.van-swipe-cell__left, .van-swipe-cell__right {
display: inline-flex;
align-items: center;
justify-content: center;
width: 65px;
height: 48px;
font-size: 15px;
color: #fff;
text-align: center;
background-color: #f44;
}
.van-swipe-cell__left {
background-color: #07c160
}
小程序的page頁面沒有observers屬性
van-submit-bar組件在tabBar頁面中使用的時候不需要添加safe-area-inset-bottom屬性來兼容iPhoneX滩褥，加了反倒樣式錯亂
vant中的Dialog、Notify炫加、Toast組件使用的時候都要先在Page頁WXML中寫出對應標簽瑰煎，如果是component要用到，就要往上找到最近的Page并在WXML中定義
云函數(shù)環(huán)境變量切換問題
今天一看小程序文檔俗孝，發(fā)現(xiàn)更新了一些東西酒甸，環(huán)境變量切換的問題終于解決了，以后只需要修改app.js中wx.cloud.init()中的env赋铝，就可以同步切換云函數(shù)的環(huán)境變量了插勤，云函數(shù)中只需要這樣：
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
...
