脚本之家

WxEmojiView-微信小程序Emoji展示输入组件alpha 0.1

上一篇
微信小程序单图片的自适应计算
下一篇
微信小程序增加ES6的promise特性支持(Bluebird)

首先看下具体的微信小程序里的效果gif(加载慢.... 请等待...)


WxEmojiView-微信小程序Emoji展示输入组件


作用

用于展示带有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;background-color: #ddd;">WxEmojiView 静态图文</view><template is="WxEmojiView" data="{{WxEmojiObjs}}"/>

使用textarea进行输入展示 使用WxEmojiTextarea模版

<view style="text-align: center;margin: 20px;background-color: #ddd;">下面是WxEmojiTextarea 输入</view>
<template is="WxEmojiTextarea" data="{{WxEmojiObjs}}" />

* 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

来源信息


以上就是WxEmojiView-微信小程序Emoji展示输入组件alpha 0.1的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

WxEmojiView-微信小程序Emoji展示输入组件alpha 0.1 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
微信小程序单图片的自适应计算
下一篇
微信小程序增加ES6的promise特性支持(Bluebird)

您可能感兴趣的小程序组件教程

小程序组件

微信小程序中使用redux

当然小程序中使用redux不是必须的,如果你的程序逻辑不是很复杂,无需用这个东西,redux就是管理全局状态的,如果你刚好很熟悉redux,并且很有必要使用这东西的话,那就非常好可以使用,作者集成插件到微信小程序中的