[转]WxEmojiView
本文转自:https://github.com/icindy/WxEmojiView
来源信息
- author: Di (微信小程序开发工程师)
- organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
垂直微信小程序开发交流社区
- github地址: https://github.com/icindy/WxEmojiView
- 作用: WxEmojiView-微信小程序Emoji展示输入组件
- detail :
- version:
alpha 0.1 非正式版
效果gif(加载慢.... 请等待...)
作用
- 用于展示带有emoji的文本信息
- 用于输入和带有emoji的输入框
使用
- 拷贝
WxEmojiView\
文件夹到开发目录下 - 替换
WxEmojiView
文件夹下的emojis
文件夹下的小表情图片 - 初始化表情
可以在
app.js
中进行配置,全局使用,也可单独配置使用
初始化函数
WxEmoji.init(reg,emojis)
reg: 分割符号 emojis: 配置表情key-value(名称和后面的必须一致,否则失效,没有写转化函数)使用代码
var WxEmoji = require('WxEmojiView/WxEmojiView.js');
App({
onLaunch: function () {
WxEmoji.init(":_/",{
"00":"00.gif",
"01":"01.gif",
"02":"02.gif",
"03":"03.gif",
"04":"04.gif",
"05":"05.gif",
....
});
}
})
引入到需要使用的地方 如在
index.js
中进行使用需要进行函数引入
var WxEmoji = require('../../WxEmojiView/WxEmojiView.js');
如在index.wxml中使用
<import src="../../WxEmojiView/WxEmojiView.wxml"/>
模版使用
- view对文本进行展示 使用模版
WxEmojiView
模版
<view style="text-align: center;margin: 20px;">wxEmojiView 静态图文</view>
- view对文本进行展示 使用模版
```
使用textarea进行输入展示 使用
WxEmojiTextarea
模版<view style="text-align: center;margin: 20px;">下面是WxEmojiTextarea 输入</view>
``` * textarea组件的focus,blur事件绑定,小图标的点击事件(仅用于textarea的时候)
WxEmojiTextareaFocus:function(e) {
var that = this;
WxEmoji.WxEmojiTextareaFocus(that,e);
},
WxEmojiTextareaBlur:function(e){
var that = this;
WxEmoji.WxEmojiTextareaBlur(that,e);
},
wxPreEmojiTap: function(e){
var that = this;
WxEmoji.wxPreEmojiTap(that,e);
}
问题
目前版本还存在很多问题,所以欢迎提交isssue
来源
本项目由微信小程序开发论坛-WeAppDev http://weappdev.com/ 会员编写
[转]WxEmojiView的更多相关文章
- 微信小程序源码推荐
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 微信小程序案例大全
微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...
- 微信小程序源码案例大全
微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...
- 微信小程序实例源码大全2
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 【h5标签转小程序标签】小程序使用wxParse解析html教程
一.先下载所需文件,下载地址:https://pan.baidu.com/s/1umZO9uI24zUTRd7VqaWbAg ,下载完毕后会得到一个wxParse文件夹,后面会用到: 二.先拷贝cs ...
- 微信小程序中使用wxParse展示HTML内容
wxParse的GitHub地址:https://github.com/icindy/wxParse 一.数据内容: 请求地址:https://m.quanchepin.com/index.php?a ...
- 微信小程序项目实例
目前为止最全的微信小程序项目实例 2018年03月20日 11:38:28 Happy王子乐 阅读数:4188 wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch ...
- 转:目前为止最全的微信小程序项目实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- Taro -- 原生微信小程序转taro
微信小程序转Taro (转发https://nervjs.github.io/taro/docs/taroize.html) Taro 可以将你的原生微信小程序应用转换为 Taro 代码,进而你可以 ...
随机推荐
- C# PowerPoint操作的基本用法。
代码using System;using System.Collections.Generic;using System.Linq;using System.Text;using OFFICECORE ...
- WPF WindowStyle为None
当WindwoStyle为None时 窗口会出现边框,不会完全覆盖窗口 修改办法: 使用AllowsTransparency="True"即可
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- css3动画水波纹、波浪
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- “全栈2019”Java第九十二章:外部类与内部类成员覆盖详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 打开SQL Server2000企业管理器时候提示“MMC 无法创建管理单元 ”
今天上午在打开SQL Server 2000 企业管理器时候提示“MMC 无法创建管理单元”错误.
- 为什么 React Elements 会有 $$typeof 这个属性?
简评:debug 的时候看到 element 对象中有 $$typeof 这属性,于是查了一下这到底干嘛的. 我们知道,通过 JSX 创建一个 React Elements 时: <marque ...
- js的window对象
js的window对象 1.子窗口方法 function testOpen(){ window.open('son.html','newwindow','height=400, width=600, ...
- vue封装插件并发布到npm上
vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...
- 2016级算法期末上机-E.中等·ModricWang's Fight with DDLs II
1125 ModricWang's Fight with DDLs II 思路 圆内被划分部分数的计算方式如下: 圆内部的每一个交点都使得总份数增加了一:除此之外,每一根直线段最后抵达圆周时,总份数也 ...