微信小程序可以做不少事情，比起開發(fā)一個APP還是簡單很多的，個人感覺比用HTML5開發(fā)APP還容易。這次我想開發(fā)一個幼兒學(xué)英語單詞的微信小程序。功能大概如下：
- 按Book、Unit組織單詞
- 有預(yù)定義Book、Unit和單詞
- 單詞除了拼寫外，還有圖片、發(fā)音
- 也可以自己上傳單詞（包含圖片、錄音）
- 可以手寫單詞，檢查是否拼寫正確
- 可以錄音，檢查發(fā)音是否正確
增加單詞和圖片的功能需要用到后臺服務(wù)，一直想用一把LeanCloud的服務(wù)，這次終于派上用場了；拼寫和發(fā)音檢查可以用百度AI。這次先介紹LeanCloud，后面再介紹百度AI。代碼參見GitHub。
LeanCloud官方有介紹在微信小程序中使用 LeanCloud，不過這里面用到的JS庫有400多K，相對于微信2M的大小限制來說還是太大了，所以這里就介紹如何調(diào)用LeanCloud的REST API。
關(guān)于小程序的開發(fā)我就不介紹了，官方文檔和例子很詳細(xì)了，可以自行學(xué)習(xí)。如果你對小程序的內(nèi)部原理很有興趣，可以看騰訊前端專家渠宏偉的介紹：微信小程序架構(gòu)解析、一起脫去小程序的外套和內(nèi)衣 - 微信小程序架構(gòu)解析
先看看對LeanCloud的REST API的封裝utils/leancloud.js，有4個方法：
- request 調(diào)用Leancloud REST方法
/**
* 調(diào)用Leancloud REST方法
* @param {Object} options 選項
* {
* url: 'class/Hello', // url路徑
* data: { key: value }, // 參數(shù)
* method: 'GET', // HTTP請求的method，默認(rèn)值為'GET'
* success: function (data) { }, // REST方法調(diào)用成功時的回調(diào)函數(shù)
* fail: function (error) { } // REST方法調(diào)用失敗時的回調(diào)函數(shù)
* }
*/
var request = exports.request = function (options) {
// https://leancloud.cn/docs/rest_api.html#請求格式
wx.showLoading({
title: '加載中',
});
wx.request({
url: URL_PREFIX + options.url,
data: options.data,
header: {
'X-LC-Id': exports.APP_ID,
'X-LC-Key': exports.APP_KEY,
'content-type': 'application/json; charset=utf-8'
},
method: options.method || 'GET',
success: function (res) {
options.success && options.success(res.data);
},
fail: function (error) {
console.log(error);
util.showFail('調(diào)用失敗');
options.fail && options.fail(error);
},
complete: function () {
wx.hideLoading();
}
});
};
- invoke 調(diào)用Leancloud云引擎方法
/**
* 調(diào)用Leancloud云引擎方法
* @param {Object} options 選項
* {
* func: 'hello', // 方法名
* data: { key: value }, // 參數(shù)
* success: function (data) { }, // 云引擎方法調(diào)用成功時的回調(diào)函數(shù)
* fail: function (error) { } // 云引擎方法調(diào)用失敗時的回調(diào)函數(shù)
* }
*/
exports.invoke = function (options) {
// https://leancloud.cn/docs/leanengine-rest-api.html
request({
url: 'functions/' + options.func,
data: options.data,
method: 'POST',
success: options.success,
fail: options.fail
});
};
- uploadFile 上傳文件
/**
* 上傳文件
* @param {Object} options 選項
* {
* fileName: 'test.png', // 文件名
* filePath: '', // 文件路徑
* success: function (data) { }, // 上傳文件成功時的回調(diào)函數(shù)
* fail: function (error) { } // 上傳文件失敗時的回調(diào)函數(shù)
* }
*/
exports.uploadFile = function (options) {
// https://leancloud.cn/docs/rest_api.html#上傳文件
wx.uploadFile({
url: URL_PREFIX + 'files/' + options.fileName,
filePath: options.filePath,
name: 'file',
header: {
'X-LC-Id': exports.APP_ID,
'X-LC-Key': exports.APP_KEY
},
success: function (res) {
options.success && options.success(JSON.parse(res.data));
},
fail: function (error) {
console.log(error);
util.showFail('調(diào)用失敗');
options.fail && options.fail(error);
}
});
};
- deleteFile 刪除文件
/**
* 刪除文件
* @param {Object} options 選項
* {
* id: '596ddfd2570c35005b50d63c', // 文件對象的ObjectId
* success: function (data) { }, // 上傳文件成功時的回調(diào)函數(shù)
* fail: function (error) { } // 上傳文件失敗時的回調(diào)函數(shù)
* }
*/
exports.deleteFile = function (options) {
// https://leancloud.cn/docs/rest_api.html#刪除文件
request({
url: 'files/' + options.id,
method: 'DELETE',
success: options.success,
fail: options.fail
});
};
再來看如何使用pages/index/index.js：
- 查詢單詞列表
refresh: function () {
var self = this;
// https://leancloud.cn/docs/rest_api.html#遍歷_Class
leancloud.request({
url: 'classes/Words',
success: function (res) {
var words = res.results || [];
words.push({ name: '' });
self.setData({
words: words,
word: ''
});
}
});
},
- 增加單詞
addWord: function (filePath) {
var self = this;
leancloud.uploadFile({
fileName: util.getFileName(filePath),
filePath: filePath,
success: function (data) {
// https://leancloud.cn/docs/rest_api.html#創(chuàng)建對象
leancloud.request({
url: 'classes/Words',
method: 'POST',
data: {
name: self.data.word,
imgUrl: data.url,
imgObjectId: data.objectId
},
success: function () {
self.refresh();
}
});
}
});
}
- 刪除單詞
deleteWord: function () {
var self = this;
var word = self.data.words[self.data.current];
// https://leancloud.cn/docs/rest_api.html#刪除對象
leancloud.request({
url: 'classes/Words/' + word.objectId,
method: 'DELETE',
success: function (res) {
if (word.imgUrl) {
leancloud.deleteFile({
id: word.imgObjectId,
success: function () {
self.refresh();
}
});
} else {
self.refresh();
}
}
});
},
開發(fā)單詞錄音功能時遇到不少麻煩，微信小程序不能直接播放遠(yuǎn)程錄音文件，必須下載到本地。微信小程序也不支持讀取文件內(nèi)容，后面用百度AI也會比較麻煩。LeanCloud的文件是存在七牛云上的，微信小程序下載文件必須用HTTPS的方式，暫時還不知道如何讓LeanCloud綁定自己的域名，后面想直接用七牛云的服務(wù)存文件。另外從七牛云上通過HTTPS下載文件必須綁定自己的域名，域名需要備案，半個月了還沒下來，我也是醉了，還是國外域名好。
