适合ionic初学者的小项目

3,158 阅读2分钟

Note:此项目适合对 Angular 了解的 ionic 初学者

假如对Angular熟悉的朋友想尝试下移动端开发,我推荐 ionic ,基于Angular的UI框架,通过 cordova 打包,生成可以在Android运行的apk,iOS运行的ipa。

对了解Angular的小伙伴来说,写代码比较简单,难的就是打包。Android的话,通过 ionic cordova build android --prod 就可以生成debug.apk,假如需要签名,可以使用 Android Studio 运行打包后位于文件夹 platform/android 下的Android项目,然后签名。iOS的话,通过 ionic cordova build ios --prod,然后使用 Xcode 运行位于文件夹 platform/ios 的iOS项目。

上面都是废话,本文的主要目的是推荐下我写的 ionic 小项目 hw-basic。此项目看上去比较简单,但是包含了很多常用的功能。

  1. 屏幕适配
  2. 常用工具封装
  3. Tab图标替换
  4. 字体库替换
  5. 自定义通讯录
  6. 数据库
  7. 版本信息

屏幕适配没有使用大家熟悉的 flexible,而是使用了 vw 实现了一个scss函数rem() 来解决这个问题,很简单,但是很巧妙,原理具体如何,还是自己看代码吧。

Tab图标替换也是常用的功能,如何将底部的Tab替换成自己的,代码中把字部分注释了,但是不影响阅读。

有些APP需要提供通讯录的功能,主要的麻烦就是点击字母索引栏跳转到相对应的字母位置,项目中也实现了,唯一的缺点就是暂不支持字母栏的滑动。

借着实现通讯录的功能,也示例了如何通过插件使用原生数据库,如何解析数据库中返回的数据。

最后,还是来张截图吧,欢迎大家fork、 issue 和 star。