LeanCloud + Ionic3 迅速重构应用

geekidentity 发布于2019-06-21 16:11 / 1554人阅读

摘要：的数据强制刷新由于的数据绑定与更新策略，有时取回数据时数据并不能引起页面的变更，这时候就需要强制刷新页面绑定的数据了。这次重构差不多就用了四天的时间，写了个个个，按时交活儿希望本文可以在小应用的快速构建上给大家一个参考

作者：李宜栋

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/10980.html

搭建公众号自动回复功能

摘要：今天的主角是如何搭建一个公众号自动回复功能。对于大网站或者项目来说，找一家如阿里云腾讯云等云服务平台，但对于个人只是想简单的搭建一个公众号管理自动回复功能，终究有些大材小用了结合使用相得映彰，而且可以根据需要升级扩展。程序员爱炫技，写个公众号文章，都想拿点技术整整【自动回复】；程序员爱偷懒，什么都想做个【自动化】，最好所有事情系统都给做了，点点手指头就能达到目标。今天的主角是如何搭...

MobService 2019-08-20 18:15 评论0 收藏0
使用Ionic3框架开始第一个混合开发APP

摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。什么是混合开发？简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。什么是Ionic3框架？ Ionic3框架是一个混合开发...

wangshijun 2019-08-02 15:57 评论0 收藏0
使用Ionic3框架开始第一个混合开发APP

摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。什么是混合开发？简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。什么是Ionic3框架？ Ionic3框架是一个混合开发...

Mr_houzi 2019-08-21 11:54 评论0 收藏0