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，按时交活儿！但愿本文能够在小应用的快速构建上给你们一个参考~