LeanCloud + Ionic3 迅速重构应用

作者：李宜栋

【 玩转 LeanCloud 】开发者经验分享：

学校有一个高考志愿填报的应用需要重构，之前的实现是通过构建 Laravel RESTful API + Ionic2 实现院校和分数线信息的检索，但是一个人前后端联调太麻烦了，加上平时课多，交活儿日期又近在眼前，所以考虑再三决定换成 Ionic3 + 后端云的方式来构建应用，这样不用花心思去搞后端的 CRUD，速度上应该能快不少。

在 Ionic 中应用的每个页面都可以做成封装好的组件，在 Page 中负责调用 Service (Provider) 进行数据请求与更新，获取到的数据注入到组件当中刷新显示数据或者冒泡到 Page 当中进行处理。主要的需求包括后端的数据存储、地图展示和绘制折线图表。

后两项需求并不难，正好以前接触过，显示地图用 Baidu Map SDK，绘制折线图用 Echarts 的 JavaScript SDK，在这个项目中主要就是在 TypeScript 的调用上注意一下。数据存储的后端云，其实最开始我没用 LeanCloud，用的别的。我本想把本地数据库的数据上传到云端，但发现那个云端的数据迁移功能根本不 work，我是免费用户，去给人家提个 issue 吧也不见得能多快就给修复，所以还是另辟蹊径吧。找着找着就看到了 LeanCloud，它家的数据迁移好用，这事儿也就这么定了。

数据迁移我从 DataGrip 导出数据到 CSV 格式，注意要设置选择用引号包围字段值来解决空值的问题，做好字段类型标注，导好的文件在 LeanCloud 控制台里一键上传就全 OK 啦。另外之前使用的别人家的 JavaScript SDK，现在换成 LeanCloud 的 SDK，要在 Ionic 项目的 www 目录下将 index.html 文件加入对应的 CDN 的 script 引用，代码中所有要调用 LeanCloud SDK 的地方都要加上 declare var AV; 对强迫症来说实在不友好，所以还是要 npm 一下之后配置一下 TypeScript 好。

初始化 SDK，设置 ID 和 Key：

然后就可以在 Service 中使用了，也能在 Page 中以 Promise 的方式调用了。

之后就可以开心地堆组件啦。

踩过一些坑，在这里提个醒：

1.contains 和 containedIn 不是一码事，contains 是字符串包含，containedIn 是数组包含，而且 contains 做模糊查询的时候条件关系要用 or。

2. Ionic 的数据强制刷新：由于 Ionic 的数据绑定与更新策略，有时取回数据时数据并不能引起页面的变更，这时候就需要强制刷新页面绑定的数据了。

3. 数字型数据：最初数据导入的时候为了方便，全部用的 string 类型，所以数字字段排序的时候…….你懂的。

这次重构差不多就用了四天的时间，写了 16 个 Page、17 个 Component、5 个 Provider，按时交活儿！希望本文可以在小应用的快速构建上给大家一个参考~