emoji聊天js emoji聊天复制

目录

• 前言
• 一、uniapp 实现点击复制某段文本
• 二、MySQL 数据库存储 emoji 表情
• 三、Layui 的富文本编辑器
• 四、谷歌 Java 二维码生成

• (1) 引入 MAVEN 依赖

• 五、微信体验版提交之后没有效果
• 六、uniapp 引入自定义图标（通过阿里图标库）
• 3、确定后进入项目。点击项目设置 ，对图标库进行一些设置。
• 4、项目名称和项目描述根据自己需求填写， fontClass 是图标的前缀 ，需要传入组件type属性，fontFamily 是图标集名称，需要传入组件custom-prefix 属性，字体格式可以只勾选 ttf
• 5、点击第 4 步的 save（确定）按钮后进入下图页面，在下图页面中点击【download code】把图片库下载到本地
• 6、将 iconfont.ttf、iconfont.css 放到项目根目录 static 下
• 7、打开 iconfont.css 文件，修改 @font-face 的 src 属性的值为刚刚添加的 ttf 文件的路径
• 8、使用自定义图标库的字体图标

前言

公司提供了新项目，下面罗列该项目的一些功能，和部分实现方法。

一、uniapp 实现点击复制某段文本

https://uniapp.dcloud.net.cn/api/system/clipboard.html#setclipboarddata 上面是官方文档。

uni.setClipboardData(OBJECT)

设置系统剪贴板内容。

uni.setClipboardData({
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

uni.getClipboardData(OBJECT)

获取系统剪贴板内容。

uni.getClipboardData({
	success: function (res) {
		console.log(res.data);
	}
});

二、MySQL 数据库存储 emoji 表情

三、Layui 的富文本编辑器

四、谷歌 Java 二维码生成

(1) 引入 MAVEN 依赖

<dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>core</artifactId>
            <version>3.3.0</version>
        </dependency>
        <dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>javase</artifactId>
            <version>3.3.0</version>
        </dependency>

五、微信体验版提交之后没有效果

做公司的项目，给微信小程序体验版添加了新的页面，提交测试的时候没有任何效果。上网搜索了解后，知道：若 pages.json 文件发生了变化，尤其是首页路径发生了变化。代码上传成功后，需要在后台手动设置一下首页路径，或者取消体验版，重新生成体验版二维码。

① 进入下图页面

六、uniapp 引入自定义图标（通过阿里图标库）

https://www.iconfont.cn/https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#api

1、访问阿里图标库，选择喜欢的图标，并加入购物车。

2、点击页面右上角【购物车】图标后会有弹框，在弹框中点击【添加至项目】

3、确定后进入项目。点击项目设置 ，对图标库进行一些设置。

4、项目名称和项目描述根据自己需求填写， fontClass 是图标的前缀 ，需要传入组件type属性，fontFamily 是图标集名称，需要传入组件custom-prefix 属性，字体格式可以只勾选 ttf

5、点击第 4 步的 save（确定）按钮后进入下图页面，在下图页面中点击【download code】把图片库下载到本地

6、将 iconfont.ttf、iconfont.css 放到项目根目录 static 下

7、打开 iconfont.css 文件，修改 @font-face 的 src 属性的值为刚刚添加的 ttf 文件的路径

@font-face {
  font-family: "iconfont"; /* Project id 3505657 */
  src: url('/static/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-security-fill:before {
  content: "\e78b";
}

通过上述操作 ，现在就获得一个可以自定义的图标库。

8、使用自定义图标库的字体图标

① 在项目根目录的 App.vue 文件中引入我们自己添加的 iconfont.css 文件。注意文件的存放路径。通过 @import 引入的外部样式需要写在 style 标签有效内容中的最前面。

<style>
	/* 引入自定义字体图标库 */
    @import url("@/static/iconfont.css");	
	
</style>

② 使用 custom-prefix 和 type 属性自定义图标

<template>
	<view class="content">
		<view class="wechat-security"> 
			 <uni-icons custom-prefix="iconfont" 
			 type="icon-security-fill" size="18"></uni-icons> 
			 此内容已通过微信安全认证
		</view>
	</view>
</template>

③ 如果报错说：unknown custom element（具体报错忘记了）需要按照一下 uni-icons 组件