移动开发中的Ionic研究

目录

• 简介

  • 简介

  • 技术栈

  • 编辑器

• 入门

  • 安装

  • 新建

  • 编译

  • 运行

  • 真机

  • 调试

• 进阶

  • 持久化

  • 插件管理

  • Hot-Code

• 再进阶

  • Ionic-Creator

  • Ionic-Cloud

  • Ionic-Market

• 小结

• 参考

简介

简介

Ionic[aɪ'ɑnɪk] is the open source SDK that lets web developers build amazing mobile apps

• Hybrid = Web + Cordova

技术栈

• JavaScript

• CSS Components

• Cordova - Mobile apps with HTML, CSS & JS, Target multiple platforms with one code base

ionic-introduction-07.png

• Angular - Superheroic JavaScript MVW Framework

ionic-introduction-06.png

编辑器

• Ionic Lab

• Brackets

入门

安装

npm install -g ionic cordova

新建

ionic start IoincDemo

ionic platform add android

ionic platform add browser

编译

ionic build ios

ionic build android

运行

ionic emulate ios

ionic emulate android

ionic serve

真机

ionic run ios --device

ionic run android --device

iOS真机调试需要安装如下依赖: (1) xcode-select --install (2) npm install -g ios-deploy

调试

• chrome浏览器中打开如下地址, 效果如下

chrome://inspect/#devices

ionic-introduction_01.png

• inspect设备即可调试, 效果如下

ionic-introduction_02.png

进阶

持久化

• LocalStorage

var storage = window.localStorage;

var value = storage.getItem(key); // Pass a key name to get its value.

storage.setItem(key, value) // Pass a key name and its value to add or update that key.

storage.removeItem(key) // Pass a key name to remove that key from storage.

• WebSQL

var db = window.openDatabase(name, version, displayName, estimatedSize);

db.transaction(function (tx) {

    tx.executeSql(sqlStatement, valueArray, function (tx, result) {

        console.log(result);

    }, function (error) {

        console.log(error);
    });
    
});

• Plugin-Based Options: Cordova-sqlite-storage

关于更多持久化的介绍可以参考Storage

插件管理

npm install -g plugman

plugman -help

plugman install --platform  --project  --plugin cordova-plugin-camera

关于更多plugman的使用可以参考Using Plugman to Manage Plugins

Hot Code

cordova-hot-code-push

This plugin provides functionality to perform automatic updates of the web based content in your application

再进阶

Ionic Creator

Ionic Creator

A simple drag-&-drop interface buiding tools for creating real ionic apps with a click of the mouse

ionic-introduction-05.png

Ionic Cloud

Ionic Cloud

Focus on your app, not complex infrastructure. Instantly add push notifications, live updating, user auth, analytics, and more

ionic-introduction_03.png

Ionic Market

Ionic Market

Find all the best community-made resources you need to jumpstart your ionic app development

小结

ionic-introduction_04.png

参考

• Cordova

• Ionic

• Awesome-Ionic

更多文章, 请支持我的个人博客