1. 名称:
    WxEmojiView
  2. 作者:
    站长老左
  3. 来源:
  4. 浏览:
    9191
  5. 下载:
    4041
  6. 最新更新:
    2016-11-15
  7. 收藏0

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

blob.png

作用

  • 用于展示带有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 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}}" />
    • view对文本进行展示 使用模版WxEmojiView模版

  • 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);
  }



共0 条评论
  1. 加载评论

评论内容:

发表评论
  1. 全部组件分类
  2. 瀑布流
  3. 示例
  4. 提示组件(ToolTip)
  5. 下拉刷新、上拉加载
  6. Toast
  7. 选项卡(tab)
  8. 图表
  9. 卡片切换
  10. 菜单
  11. 筛选
  12. 星级评分
  13. 选择器
  14. 滑动删除
  15. 手势密码
  16. Switch
  17. 搜索
  18. 游戏
  19. 弹幕
  20. 懒加载
  21. 布局
  22. 应用模仿
  23. Emoji
  24. 转盘抽奖
  25. 插件
  26. UI库
  27. 动画
  28. 下拉列表
  29. SnackBar
  30. HTML解析
  31. 日历
  32. 点餐小程序
  33. 购物效果
  34. 框架
  35. 渲染引擎
  36. 商城
  37. 吸顶停留
  38. 会议
  39. 分享
  40. 其他
最新评论