目录
简介
简介
Ionic[aɪ'ɑnɪk] is the open source SDK that lets web developers build amazing mobile apps
- Hybrid = Web + Cordova
技术栈
编辑器
入门
安装
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 <ios|android|blackberry10|wp8> --project <directory> --plugin cordova-plugin-camera
关于更多plugman的使用可以参考Using Plugman to Manage Plugins
再进阶
Hot Code
This plugin provides functionality to perform automatic updates of the web based content in your application
Push Notification
ionic-introduction_03.png
Ionic View
小结
ionic-introduction_04.png
目录
编码
此编码(Encoding)非彼编码(Coding)也, 那么到底什么是此编码呢?
由于计算机没法直接处理文本, 它只和数字打交道
为了在计算机里用数字表示文本, 我们指定了一个从字符到数字的映射
这个映射就叫做编码(encoding)
知道了为什么会存在编码这种"东西", 那么开发中常见的编码方式有哪些呢?
ASCII
ASCII(American Standard Code for Information Interchange)顾名思义, 是美国人用的编码方式, 谁叫计算机最早是他们发明的呢
基础ASCII码, 使用7位二进制数来表示:
所有的大写和小写字母, 数字0 到9、标点符号, 以及在美式英语中使用的特殊控制字符
encoding-and-emoji-01.jpg
非ASCII
除了英语字母外, 还有中文、日文汉字这些非字母型语言
ASCII编码肯定是搞不定了, 大家自然要想办法搞一套自己的
作为一个中国人(这个前提还蛮重要的!), 我们大家编辑office时最常见的编码方式应该就是GB*了
即: 汉字内码扩展规范
这一系列标准不断扩大所包含的字符集, 发展过程如下
GB2312 -> GBK -> GB18030
encoding-and-emoji-02.png
Unicode
上述ASCII和非ASCII编码的缺点是显而易见的, 人们渴望:
有一种编码, 将世界上所有的符号都纳入其中
它就是今天的主角: Unicode
下面将要介绍Unicode中的一些概念, 如果觉得乏味可以跳过, 用到时再回来查阅
Unicode中每个符号对应的编号叫做”码点”(code point)
例如: 汉字'好'的码点就是U+597D
Unicode不是一次性定义的, 而是分区定义. 每个区可以存放65536个(2^16)字符，称为一个平面(plane)
1个基本平面(BMP): U+0000~U+FFFF
16个辅助平面(SMP): U+010000~U+10FFFF
例如: emoji表情'😀'的码点是U+1F600, 在辅助平面
Unicode只规定了每个字符的码点，到底用什么样的字节序表示这个码点，这就涉及到编码方法了
UTF(Unicode Transformation Format)
Unicode是标准, 典型的学院派; 而UTF是具体的实现, 即实干派
UTF具体的实现方式有很多种, 常见的有以下三种
UTF-32: 定长编码, 每个码点用四个字节表示, 且字节内容一一对应码点, 由于UTF-32编码效率不高, 所以实际应用不多
UTF-16: 变长编码, 基本平面的码点占用2个字节, 辅助平面的码点占用4个字节快, 且字节内容一一对应码点
UTF-8: 变长编码, 使用1~4个字节表示一个码点, 根据不同的码点而变化字节长度, 字节内容和码点不是一一对应
其中表示每个码点的编码单元叫做码元(Code Unit)
概念这么多, 一口气读完, 看得应该也是似懂非懂吧
没关系, 我们通过几个实例来更直观地认识Unicode和UTF
实例1: 汉字'好'
Unicode: U+597D
UTF-32: 0x 00 00 59 7D
UTF-16: 0x 59 7D
UTF-8: 0x E5 A5 BD
实例2: emoji'😀'
Unicode: U+1F600
UTF-32: 0x 00 01 F6 00
UTF-16: 0x 00 01 F6 00
UTF-8: 0x F0 9F 98 80
实例3: 对同样一段文字, 采取不同的UTF方案保存成文本文件
最后, 我们对比这三种UTF方案的文本文件大小如下
encoding-and-emoji-03.png
NSString
这里讨论的NSString是iOS开发中的知识, Android开发请跳过
说完了编码, 总算可以切入正题了
说好的正题呢? 难道不是emoji么? 怎么又跑来个NSString?
好吧, 其实这和介绍编码的目的是一样的
不明白编码, 谈emoji也是白谈, 不解释NSString与编码, 谈emoji也是空谈
凭啥叫空谈? 这是因为只有了解了NSString, 你才能上手实践emoji!
那NSString到底代表什么呢?
稍微了解点NSString的可能会知道, NSString其实是对CFString的封装
然并卵
既然今天讨论的是编码, 这里对NSSring的解释就是
NSString对象代表的其实是: 用UTF-16编码的码元(而不是字符)组成的数组
我去, 什么叫UTF-16编码的码元(翻回前面去)
说白了NSString的每个character都是一个两字节的unichar
不信? 我不是砖家, 我只是Apple Developer Documentation的搬运工
encoding-and-emoji-04.png
encoding-and-emoji-05.png
如果你理解了上面的解释, 那么下面实例的结果想必你肯定能答出来了
实例4:
NSString *s = nil;
NSLog(@"%lu %lu", sizeof(unichar), sizeof(char));
s = @"\U0000597D"; // 好, also can be s = @"\u597D";
NSLog(@"The length of %@ is %lu", s, [s length]);
s = @"\U0001F600"; // 😃
NSLog(@"The length of %@ is %lu", s, [s length]);
s = @"\U0001F596"; // 🖖
NSLog(@"The length of %@ is %lu", s, [s length]);
s = @"\U0001F596\U0001F3FF"; // 🖖🏿
NSLog(@"The length of %@ is %lu", s, [s length]);
在NSString的使用过程中, 有一个常见的与编码相关的方法是
-[NSString UTF8String]
请注意这里的返回值类型是char *, 而非unichar
NSString *s = nil;
s = @"\U0000597D"; // 好, also can be s = @"\u597D";
const char *cs = [s UTF8String];
for (int i = 0; i < strlen(cs); i++) {
NSLog(@"char is 0x%X of index %d\n", cs[i], i);
}
该段代码输出如下
char is 0xFFFFFFE5 of index 0
char is 0xFFFFFFA5 of index 1
char is 0xFFFFFFBD of index 2
emoji[emodʑi]
哎呀喂, 重量级的总是在后面
emoji兴起
emoji表情符号, 来自日语词汇"絵文字"(假名为"えもじ", 读音即emoji)
创造者是日本人栗田穰崇(Shigetaka Kurita)
自苹果公司发布的iOS 5输入法中加入了emoji后, 这种表情符号开始席卷全球
Unicode
emoji在Unicode编码中有规范的定义, 可以参考这里
encoding-and-emoji-06.png
emoji开发
那么在开发过程中, 我们要如何处理emoji呢?
处理emoji的方法就是不处理
我靠, 你耍人的吧, 我文章看到这里, 结果你就告诉我这个?
不要我忽悠你, 因为
iOS平台: UITextView, UITextField等系统控件支持emoji
Android平台: TextView, EditText等系统控件支持emoji
Server: MYSQL5.5.3+, 支持4字节UTF-8编码, 即支持emoji
不过既然都看到了这里, 我也不能让各位看官白看一场
通常情况下, 我们不仅要显示emoji, 可能还要处理超链接(如: 网址, 电话, 邮箱等)
移动端的方法分别如下
iOS平台: UITextView + TTTAttributedLabel
TTTAttributedLabel *tttlabel = [[TTTAttributedLabel alloc] initWithFrame:
CGRectMake(40.f, 200.f, 200.f, 100.f)];
tttlabel.numberOfLines = 0;
tttlabel.enabledTextCheckingTypes = NSTextCheckingTypeLink | NSTextCheckingTypePhoneNumber;
[tttlabel setText:@"TTTAttributedLabel😃TTTAttributedLabel😃www.baidu.com😃18052028104"];
[self.view addSubview:tttlabel];
效果是这样的
encoding-and-emoji-07.PNG
哎呀, 太简单了吧, 从此再也不用担心处理emoji, 超链接了
Android平台: TextView + Spannable (不过瘾? 好吧, 我是不打算细讲的, 关于Spannable请自行度娘谷哥, 前人写的很好很详细了)
Coding, QQ emoji方案
先提前说明下以免歧义, 这里的Coding指的是Coding公司的Coding-iOS客户端
iOS平台:
编辑、显示直接使用的是emoji
和Server交互时, 直接发送emoji; 接收到的string会转换成emoji
本地存储也是emoji
Android平台:
编辑、显示使用string对应的图片, 来做图文混排(TextView/EditView + Spannable)
和Server交互时, 发送、接收也都是string
本地存储仍然是string
如果上面的小结你没看明白的话, 这里还有更精简的总结, 一句话就是:
iOS都是emoji, Android都是string, 然后自己做图文混排以实现类似emoji的效果
这里有个小小的疑问, 其实Android本也可以不用这么大废周章, 也和iOS一样直接使用emoji好了
据我推测, Android要自己用图文混排方式实现emoji应该是由于版本碎片所致的无奈
因为许多emoji是后来(有的是近两年)才加入Unicode标准的, 而Android老版本肯定是不支持的, so不小心又触到Android开发的痛点了, 在此不深入讨论了
附录
参考:
unicode.org/emoji/charts/full-emoji-list.html#1f600
www.ruanyifeng.com/blog/2014/12/unicode.html
实例4的输出如下:
2 1
The length of 好 is 1
The length of 😀 is 2
The length of 🖖 is 2
The length of 🖖🏿 is 4
更多文章, 请支持我的个人博客
网友评论