效果图
项目中引入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小时内与您取得联系。