微信小程序可以做不少事情，比起开发一个APP还是简单很多的，个人感觉比用HTML5开发APP还容易。这次我想开发一个幼儿学英语单词的微信小程序。功能大概如下：
- 按Book、Unit组织单词
- 有预定义Book、Unit和单词
- 单词除了拼写外，还有图片、发音
- 也可以自己上传单词（包含图片、录音）
- 可以手写单词，检查是否拼写正确
- 可以录音，检查发音是否正确
增加单词和图片的功能需要用到后台服务，一直想用一把LeanCloud的服务，这次终于派上用场了；拼写和发音检查可以用百度AI。这次先介绍LeanCloud，后面再介绍百度AI。代码参见GitHub。
LeanCloud官方有介绍在微信小程序中使用 LeanCloud，不过这里面用到的JS库有400多K，相对于微信2M的大小限制来说还是太大了，所以这里就介绍如何调用LeanCloud的REST API。
关于小程序的开发我就不介绍了，官方文档和例子很详细了，可以自行学习。如果你对小程序的内部原理很有兴趣，可以看腾讯前端专家渠宏伟的介绍：微信小程序架构解析、一起脱去小程序的外套和内衣 - 微信小程序架构解析
先看看对LeanCloud的REST API的封装utils/leancloud.js，有4个方法：
- request 调用Leancloud REST方法
/**
* 调用Leancloud REST方法
* @param {Object} options 选项
* {
* url: 'class/Hello', // url路径
* data: { key: value }, // 参数
* method: 'GET', // HTTP请求的method，默认值为'GET'
* success: function (data) { }, // REST方法调用成功时的回调函数
* fail: function (error) { } // REST方法调用失败时的回调函数
* }
*/
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('调用失败');
options.fail && options.fail(error);
},
complete: function () {
wx.hideLoading();
}
});
};
- invoke 调用Leancloud云引擎方法
/**
* 调用Leancloud云引擎方法
* @param {Object} options 选项
* {
* func: 'hello', // 方法名
* data: { key: value }, // 参数
* success: function (data) { }, // 云引擎方法调用成功时的回调函数
* fail: function (error) { } // 云引擎方法调用失败时的回调函数
* }
*/
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) { }, // 上传文件成功时的回调函数
* fail: function (error) { } // 上传文件失败时的回调函数
* }
*/
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('调用失败');
options.fail && options.fail(error);
}
});
};
- deleteFile 删除文件
/**
* 删除文件
* @param {Object} options 选项
* {
* id: '596ddfd2570c35005b50d63c', // 文件对象的ObjectId
* success: function (data) { }, // 上传文件成功时的回调函数
* fail: function (error) { } // 上传文件失败时的回调函数
* }
*/
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#创建对象
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();
}
}
});
},
开发单词录音功能时遇到不少麻烦，微信小程序不能直接播放远程录音文件，必须下载到本地。微信小程序也不支持读取文件内容，后面用百度AI也会比较麻烦。LeanCloud的文件是存在七牛云上的，微信小程序下载文件必须用HTTPS的方式，暂时还不知道如何让LeanCloud绑定自己的域名，后面想直接用七牛云的服务存文件。另外从七牛云上通过HTTPS下载文件必须绑定自己的域名，域名需要备案，半个月了还没下来，我也是醉了，还是国外域名好。
