效果圖
項目中引入emoji-2.2.6.min.js,其中emoji.d.ts 跟其放在相同目錄,不需要導入
<script src="./assets/jslib/emoji-2.2.6.min.js"></script>
js文件下載地址
http://qny0.top/jslib.zip
創建一個公共的服務,寫表情相關的方法
import { Injectable } from '@angular/core'; @Injectable() export class EmojiService { constructor() { this.emojiInit(); } // 表情包功能 // 初始化相應的服務模塊 public emojiInit() { RongIMLib.RongIMEmoji.init(); } /** * 表情庫基本使用方法 */ // Emoji 轉名稱 emojiToSymbol(sym) { return RongIMLib.RongIMEmoji.emojiToSymbol(sym); } // 名稱轉 Emoji symbolToEmoji(sym) { return RongIMLib.RongIMEmoji.symbolToEmoji(sym); } // Emoji 轉 HTML emojiToHTML(sym) { return RongIMLib.RongIMEmoji.emojiToHTML(sym); } // 名稱轉 HTML symbolToHTML(sym) { return RongIMLib.RongIMEmoji.symbolToHTML(sym); } // 獲取表情庫列表 getEmoji() { return RongIMLib.RongIMEmoji.list.map((data)=> { return data.node; }); } }
在使用表情的頁面導入表情服務,初始化方法中調用獲取表情包方法
ionViewDidEnter() { this.emojis=this.emoji.getEmoji(); }
前端頁面中使用表情
<ion-item class="container-emoji" *ngIf="isShowEmojiList"> <ion-row class="emojisty"> <ion-col class="emoji-fontsize" *ngFor="let emoji of emojis" (click)="pushEmojiToTextarea(emoji.innerText)" col-1> {{emoji.innerText}}</ion-col> </ion-row> </ion-item>
將表情添加到輸入框
管可以說是互聯網上最有趣的地方,你可以在這里找到任何你感興趣的東西。這里也是學習和探索編程世界的絕佳方式。有趣又有才華的技術博主非常多,隨時隨地都可以與全世界的開發者交流學習。 我們整理了一些在編程領域有影響力的博主,希望能給大家的編程之路帶來啟發。
粉絲:165萬
主頁:https://www.youtube.com/c/TheCodingTrain
Coding Train 是由程序員 Daniel Schiffman 主持的一個受歡迎且有趣的頻道。該頻道的創意編碼課程涵蓋了廣泛的主題,例如游戲開發、機器學習、模擬、JavaScript、框架等。Schiffman 的算法藝術、生成詩歌和 Discord 機器人教程展示了他的多學科理解,他還同時擁有哲學、藝術、數學與文學學士學位。
粉絲:133萬
主頁:https://www.youtube.com/c/TheNetNinja/about
Net Ninja 的 YouTube 頻道是學習 Web 開發和編程的頂級在線資源之一。它由曼徹斯特大學校友 Shaun Pelling 主持,于 2015 年成立,那里有超過一千個編程教程,復雜程度從初級到中級不等。
粉絲:90.6萬
主頁:https://www.youtube.com/@developedbyed
從初學者到專業人士,每個Web開發者都可以在這里找到你需要的課程或靈感。
4、Traversy Media
粉絲:219萬
主頁:https://www.youtube.com/@TraversyMedia
Traversy Media 上的視頻對作為 Web 開發人員具有一定專業知識的個人更有幫助,盡管即使是初學者也可以學到一些東西。他們的視頻講座比典型的要長一些,因為 Traversy Media 花時間仔細解釋概念并詳細說明細節。流行的語言和框架包括 Vue、JavaScript、HTML、CSS、Angular 等等。
粉絲:86.7萬
主頁:https://www.youtube.com/@KevinPowell
Kevin Powell 每兩周發布一個新視頻,提供有關如何改善 CSS 編碼體驗的建議,包括不該做什么。他的頻道內容從入門指南、專業課程到專家訪談。他的教程不僅涵蓋基礎知識,而且還重點關注更高級的主題,例如克隆設計和奇怪的 CSS 效果。
粉絲:267萬
主頁:https://www.youtube.com/user/thenewboston/about
The New Boston 是 YouTube 上最受歡迎的網絡開發頻道之一。它為那些希望學習如何建立網站的人提供了各種信息。還有在 Python 3.4 和網絡管理等主題的課程。
粉絲:172萬
主頁:https://www.youtube.com/c/ProgrammingKnowledge/about
一個關于前端和后端的技術頻道。它的一些可成非常適合那些剛剛開始學習編程的人,例如 Java、Python、React、Bootstrap、ASP.NET,它是培養網絡編程技能的最佳 YouTube 頻道之一。
粉絲:392萬
主頁:https://www.youtube.com/c/edurekaIN/about
2012年成立的頻道,大部分課程都是由印度人教授。在這里您可以找到當今許多熱門主題的教學課程詳細信息,例如大數據、Web 開發、DevOps、機器學習、云計算認證……但是,有一點遺憾,一些講師說英語有點難懂。
粉絲:127萬
主頁:https://www.youtube.com/c/derekbanas/about
一個非常流行的 Youtube 頻道,您可以在其中學習語言的基礎知識。在一個視頻中快速編程一些東西。此外,它還提供前端和后端的全方位Web開發技術教程。對于那些熱衷于 Javascript 的人來說,是一門非常好的課程,教授如何在 Web 開發實踐中應用 Javascript。
粉絲:192萬
主頁:https://www.youtube.com/c/CSDojo/about YK Sugi 在谷歌任職期間是一名程序員。因此,他為有抱負的谷歌軟件工程師提供指南也就不足為奇了。 主要內容包括算法、數據結構和創造性的問題解決。它已經使用編程語言 Python 制作了幾部電影。他的視頻集包含有關數據科學、ML、Django 和其他Web 開發框架。
粉絲:192萬
主頁:https://www.youtube.com/@Fireship
頻道內容涵蓋高強度的代碼教程和技術新聞,這些內容將鼓舞人心,因為您學到的內容每天都會有所幫助。在某些視頻結束時,您肯定會看到編碼效率的變化。請記住,在觀看此頻道之前需要具備基本知識,因為不能浪費時間,
粉絲:192萬
主頁:https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw
Web Dev Simplified的大多數教程都很適合初學者。如果你喜歡基于項目的教程,那么看看他的頻道,從構建Whatsapp Clone到Zoom,到Rock PaperScissor游戲,再到使用Javascript的Snake游戲。
粉絲:192萬
主頁:https://www.youtube.com/channel/UCqrILQNl5Ed9Dz6CGMyvMTQ
由Rafeh Qazi創建的Clever Programmer,為用戶提供了最好的Web開發課程。從可視化、可實踐的網站案例操作入手,該頻道涵蓋了網站開發的所有內容。
14、Programmingwithmosh
粉絲:372萬
主頁:https://www.youtube.com/c/programmingwithmosh/about programming with Mosh
是由一位名叫 Mosh Hamedani 的作者創建的頻道,主要的編程語言是 Python、Javascript 和 C#。此外,本頻道還提供了一些詳細的Web編程前端、后端視頻教程,以及一些為新程序員解答編程中以及日常生活中遇到的常見問題。
粉絲:109萬
主頁:https://www.youtube.com/c/DesignCourse/about
DesignCourse 是一個 Youtube 頻道,您可以在這里學習有關網頁設計的所有知識,并分享在開發網站界面時解決問題的經驗。這個頻道還提供了一些適合初學者的優質課程比如 HTML、CSS、Angular、Ionic、Vue… 或者一些視頻分享經驗比如如何提高 UI/UX 能力、布局“破”的時候如何處理…這個頻道的優點是內容總是定期更新,這將幫助我們掌握當前的設計趨勢,您可以將其應用到您的工作中并改進您的設計我們的網站變得更好。
粉絲:236萬
主頁:https://www.youtube.com/user/Computerphile
我最喜歡的頻道之一!它涵蓋非常廣泛的技術概念,比如數據庫和信息安全等。
粉絲:898萬
主頁:https://www.youtube.com/c/Freecodecamp/about
freeCodeCamp.org是一個非盈利組織網站,其目的是幫助人們學習代碼,完全免費。這個Youtube頻道的建立是為了通過實際例子進一步支持您的編程技能的技術提高。它充滿了大多數人當前流行的Web技術或編程語言的教學課程,例如React,Docker,Javascript,API,NodeJS,Laravel......此外,您還可以通過視頻分享經驗向世界上許多優秀的程序員學習更多內容,在 30 天內看到某種網絡技術或與他們合作開展一系列項目……
粉絲:126萬
主頁:https://www.youtube.com/@coreyms
頻道涵蓋 Python、Git、開發環境、終端命令、SQL、編程術語、JavaScript、計算機科學基礎知識等主題,以及許多其他肯定會有所幫助的技巧。他為不同技能水平的軟件開發人員、程序員和工程師提供深入的教程和演練,因此您一定會在這里找到有用的東西!
粉絲:126萬
主頁:https://www.youtube.com/channel/UC4JX40jDee_tINbkjycV4Sg
頻道由 Tim Ruscica 主持,是學習任何技術(從編程到軟件工程和機器學習)的絕佳渠道。Tim 專攻 Python 和 JavaScript,擁有許多適合初學者到中級學習者的資源。
、安裝開發環境
1、安裝Node.js
2、安裝Cordova、Ionic
$ npm install -g cordova ionic
3、安裝 android sdk
百度 android studio 即可找到,下載安裝,首次打開的時候需要更新SDK,由于google的網站無法打開,會導致android studio無法啟動,所以需要更新 http下載配置文件
D:\Program Files\Android\Android Studio\bin\idea.properties
配置文件末尾添加:disable.android.first.run=true
進入初始化頁面:
單獨啟動SDK Manager,
mirrors.neusoft.edu.cn
80
如此即可完成下載更新SDK了。
國內鏡像地址:http://www.cnblogs.com/zhuyp1015/p/4558978.html
Android SDK Manager:
關閉 Manager,進入文件夾:D:\Users\Administrator\AppData\Local\Android\sdk\temp
解壓 tools_r25.1.7-windows.zip,將tools_r25.1.7-windows\tools下的文件全部復制到 sdk\tools 下,全部覆蓋。
問題就應該解決了,應該是 ADT的使用沖突的原因。
參考解決:http://www.shangxueba.com/jingyan/1863377.html
4、創建ionic app demo:
>ionic start myApp tabs
>cd myApp
# 如果ionic platform add android 執行 失敗報錯:Failed to install 'cordova-plugin-console':Error: cmd: Command failed with exit code ENOENT
# 檢查環境變量Path中是否有:C:\Windows\System32,沒有的話,配置上,重新打開cmd命令窗口執行即可。
>ionic platform add android
>ionic build android
編譯的時間比較長,因為需要下載構建工具gradle,一個小時左右吧!網比較次,直到cmd窗口顯示
build successful,表示編譯成功。
>ionic emulate android
啟動模擬器,報錯了:
沒找到 模擬器的鏡像文件,需要創建一個鏡像才行。
用 android studio來安裝 AVD 報錯
解決參見:http://www.cnblogs.com/yizuochengchi2012/p/5405650.html、
前面歷經的磨難暫時不說了,就這個CPU acceleration status:HAXM must be updated(version 1.1.1<6.0.1) 折騰了我很久,我機子上是1.4的as,運行模擬器 一直給我報這個錯。家里的是2.0的沒報錯。還以為是版本低的問題 于是 更新sdk。HAXM 也安裝了 就是找不到 后來,http://stackoverflow.com/ 搜索一下 發現 :
1.在as上 打開sdk 安裝sdk的extras的 HAXM加速器
2. D:\workspace\androidstudio\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager(這是我的as sdk所在的目錄) 雙擊intelhaxm-android.exe 安裝即可。
安裝之后還是報錯,fuck,還有第二步
D:\Users\Administrator\AppData\Local\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager目錄下,
雙擊安裝,OK!可用了。
參考:http://www.cnblogs.com/woodk/p/5215652.html
參考http://ionicframework.com/getting-started/
關注微信公眾號:jiagouyanjin
*請認真填寫需求信息,我們會在24小時內與您取得聯系。