V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LeanCloud
V2EX  ›  推广

LeanCloud + Ionic3 迅速重构应用

  •  
  •   LeanCloud · 2017-12-20 22:24:47 +08:00 · 1773 次点击
    这是一个创建于 2561 天前的主题,其中的信息可能已经有所发展或是发生改变。

    [ 玩转 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,按时交活儿!希望本文可以在小应用的快速构建上给大家一个参考~

    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1061 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:28 · PVG 03:28 · LAX 11:28 · JFK 14:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.