微信小程序开发历程（一）：和LeanCloud结合

微信小程序可以做不少事情，比起开发一个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下载文件必须绑定自己的域名，域名需要备案，半个月了还没下来，我也是醉了，还是国外域名好。