目錄
簡介
簡介
Ionic[a?'ɑn?k] is the open source SDK that lets web developers build amazing mobile apps
- Hybrid = Web + Cordova
技術(shù)棧
編輯器
入門
安裝
npm install -g ionic cordova
新建
ionic start IoincDemo
ionic platform add android
ionic platform add browser
編譯
ionic build ios
ionic build android
運(yùn)行
ionic emulate ios
ionic emulate android
ionic serve
真機(jī)
ionic run ios --device
ionic run android --device
iOS真機(jī)調(diào)試需要安裝如下依賴: (1) xcode-select --install (2) npm install -g ios-deploy
進(jìn)階
調(diào)試
- chrome瀏覽器中打開如下地址, 效果如下
chrome://inspect/#devices
- inspect設(shè)備即可調(diào)試, 效果如下
持久化
- 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
關(guān)于更多持久化的介紹可以參考Storage
插件管理
npm install -g plugman
plugman -help
plugman install --platform <ios|android|blackberry10|wp8> --project <directory> --plugin cordova-plugin-camera
關(guān)于更多plugman的使用可以參考Using Plugman to Manage Plugins
再進(jìn)階
Hot Code
This plugin provides functionality to perform automatic updates of the web based content in your application
Push Notification
Ionic View
小結(jié)
目錄
編碼
此編碼(Encoding)非彼編碼(Coding)也, 那么到底什么是此編碼呢?
由于計(jì)算機(jī)沒法直接處理文本, 它只和數(shù)字打交道
為了在計(jì)算機(jī)里用數(shù)字表示文本, 我們指定了一個從字符到數(shù)字的映射
這個映射就叫做編碼(encoding)
知道了為什么會存在編碼這種"東西", 那么開發(fā)中常見的編碼方式有哪些呢?
ASCII
ASCII(American Standard Code for Information Interchange)顧名思義, 是美國人用的編碼方式, 誰叫計(jì)算機(jī)最早是他們發(fā)明的呢
基礎(chǔ)ASCII碼, 使用7位二進(jìn)制數(shù)來表示:
所有的大寫和小寫字母, 數(shù)字0 到9底挫、標(biāo)點(diǎn)符號, 以及在美式英語中使用的特殊控制字符
非ASCII
除了英語字母外, 還有中文玄柏、日文漢字這些非字母型語言
ASCII編碼肯定是搞不定了, 大家自然要想辦法搞一套自己的
作為一個中國人(這個前提還蠻重要的!), 我們大家編輯office時(shí)最常見的編碼方式應(yīng)該就是GB*了
即: 漢字內(nèi)碼擴(kuò)展規(guī)范
這一系列標(biāo)準(zhǔn)不斷擴(kuò)大所包含的字符集, 發(fā)展過程如下
GB2312 -> GBK -> GB18030
Unicode
上述ASCII和非ASCII編碼的缺點(diǎn)是顯而易見的, 人們渴望:
有一種編碼, 將世界上所有的符號都納入其中
它就是今天的主角: Unicode
下面將要介紹Unicode中的一些概念, 如果覺得乏味可以跳過, 用到時(shí)再回來查閱
Unicode中每個符號對應(yīng)的編號叫做”碼點(diǎn)”(code point)
例如: 漢字'好'的碼點(diǎn)就是U+597D
Unicode不是一次性定義的, 而是分區(qū)定義. 每個區(qū)可以存放65536個(2^16)字符官地，稱為一個平面(plane)
1個基本平面(BMP): U+0000~U+FFFF
16個輔助平面(SMP): U+010000~U+10FFFF
例如: emoji表情'??'的碼點(diǎn)是U+1F600, 在輔助平面
Unicode只規(guī)定了每個字符的碼點(diǎn)堂飞，到底用什么樣的字節(jié)序表示這個碼點(diǎn)猾浦，這就涉及到編碼方法了
UTF(Unicode Transformation Format)
Unicode是標(biāo)準(zhǔn), 典型的學(xué)院派; 而UTF是具體的實(shí)現(xiàn), 即實(shí)干派
UTF具體的實(shí)現(xiàn)方式有很多種, 常見的有以下三種
UTF-32: 定長編碼, 每個碼點(diǎn)用四個字節(jié)表示, 且字節(jié)內(nèi)容一一對應(yīng)碼點(diǎn), 由于UTF-32編碼效率不高, 所以實(shí)際應(yīng)用不多
UTF-16: 變長編碼, 基本平面的碼點(diǎn)占用2個字節(jié), 輔助平面的碼點(diǎn)占用4個字節(jié)快, 且字節(jié)內(nèi)容一一對應(yīng)碼點(diǎn)
UTF-8: 變長編碼, 使用1~4個字節(jié)表示一個碼點(diǎn), 根據(jù)不同的碼點(diǎn)而變化字節(jié)長度, 字節(jié)內(nèi)容和碼點(diǎn)不是一一對應(yīng)
其中表示每個碼點(diǎn)的編碼單元叫做碼元(Code Unit)
概念這么多, 一口氣讀完, 看得應(yīng)該也是似懂非懂吧
沒關(guān)系, 我們通過幾個實(shí)例來更直觀地認(rèn)識Unicode和UTF
實(shí)例1: 漢字'好'
Unicode: U+597D
UTF-32: 0x 00 00 59 7D
UTF-16: 0x 59 7D
UTF-8: 0x E5 A5 BD
實(shí)例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
實(shí)例3: 對同樣一段文字, 采取不同的UTF方案保存成文本文件
最后, 我們對比這三種UTF方案的文本文件大小如下
NSString
這里討論的NSString是iOS開發(fā)中的知識, Android開發(fā)請?zhí)^
說完了編碼, 總算可以切入正題了
說好的正題呢? 難道不是emoji么? 怎么又跑來個NSString?
好吧, 其實(shí)這和介紹編碼的目的是一樣的
不明白編碼, 談emoji也是白談, 不解釋NSString與編碼, 談emoji也是空談
憑啥叫空談? 這是因?yàn)橹挥辛私饬薔SString, 你才能上手實(shí)踐emoji!
那NSString到底代表什么呢?
稍微了解點(diǎn)NSString的可能會知道, NSString其實(shí)是對CFString的封裝
然并卵
既然今天討論的是編碼, 這里對NSSring的解釋就是
NSString對象代表的其實(shí)是: 用UTF-16編碼的碼元(而不是字符)組成的數(shù)組
我去, 什么叫UTF-16編碼的碼元(翻回前面去)
說白了NSString的每個character都是一個兩字節(jié)的unichar
不信? 我不是磚家, 我只是Apple Developer Documentation的搬運(yùn)工
如果你理解了上面的解釋, 那么下面實(shí)例的結(jié)果想必你肯定能答出來了
實(shí)例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的使用過程中, 有一個常見的與編碼相關(guān)的方法是
-[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)
創(chuàng)造者是日本人栗田穰崇(Shigetaka Kurita)
自蘋果公司發(fā)布的iOS 5輸入法中加入了emoji后, 這種表情符號開始席卷全球
Unicode
emoji在Unicode編碼中有規(guī)范的定義, 可以參考這里
emoji開發(fā)
那么在開發(fā)過程中, 我們要如何處理emoji呢?
處理emoji的方法就是不處理
我靠, 你耍人的吧, 我文章看到這里, 結(jié)果你就告訴我這個?
不要我忽悠你, 因?yàn)?/p>
iOS平臺: UITextView, UITextField等系統(tǒng)控件支持emoji
Android平臺: TextView, EditText等系統(tǒng)控件支持emoji
Server: MYSQL5.5.3+, 支持4字節(jié)UTF-8編碼, 即支持emoji
不過既然都看到了這里, 我也不能讓各位看官白看一場
通常情況下, 我們不僅要顯示emoji, 可能還要處理超鏈接(如: 網(wǎng)址, 電話, 郵箱等)
移動端的方法分別如下
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];
效果是這樣的
哎呀, 太簡單了吧, 從此再也不用擔(dān)心處理emoji, 超鏈接了
Android平臺: TextView + Spannable (不過癮? 好吧, 我是不打算細(xì)講的, 關(guān)于Spannable請自行度娘谷哥, 前人寫的很好很詳細(xì)了)
Coding, QQ emoji方案
先提前說明下以免歧義, 這里的Coding指的是Coding公司的Coding-iOS客戶端
iOS平臺:
編輯、顯示直接使用的是emoji
和Server交互時(shí), 直接發(fā)送emoji; 接收到的string會轉(zhuǎn)換成emoji
本地存儲也是emoji
Android平臺:
編輯丹壕、顯示使用string對應(yīng)的圖片, 來做圖文混排(TextView/EditView + Spannable)
和Server交互時(shí), 發(fā)送缺菌、接收也都是string
本地存儲仍然是string
如果上面的小結(jié)你沒看明白的話, 這里還有更精簡的總結(jié), 一句話就是:
iOS都是emoji, Android都是string, 然后自己做圖文混排以實(shí)現(xiàn)類似emoji的效果
這里有個小小的疑問, 其實(shí)Android本也可以不用這么大廢周章, 也和iOS一樣直接使用emoji好了
據(jù)我推測, Android要自己用圖文混排方式實(shí)現(xiàn)emoji應(yīng)該是由于版本碎片所致的無奈
因?yàn)樵S多emoji是后來(有的是近兩年)才加入U(xiǎn)nicode標(biāo)準(zhǔn)的, 而Android老版本肯定是不支持的, so不小心又觸到Android開發(fā)的痛點(diǎn)了, 在此不深入討論了
附錄
參考:
unicode.org/emoji/charts/full-emoji-list.html#1f600
www.ruanyifeng.com/blog/2014/12/unicode.html
實(shí)例4的輸出如下:
2 1
The length of 好 is 1
The length of ?? is 2
The length of ?? is 2
The length of ???? is 4
更多文章, 請支持我的個人博客
