请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
67
帖子
0
勋章
974
Y币

hintChatBox (输入框)模块试用分享

[复制链接]
发表于 2018-11-26 09:57:15
本帖最后由 uoaccw 于 2018-11-26 09:57 编辑

hintChatBox 是一个聊天输入框模块,集成了表情,从相册选取图片的功能。开发者可自定义表情集,只需简单配置即可实现自定义表情和添加点击事件。开发者可自定义快捷输入面板,用户可选择快捷输入。
模块文档地址

先看模块效果:


说明:
1. 模块背景色和图标图片可以通过模块参数配置。开发者可以根据UI需求进行灵活调整。
2. 左边按钮(leftButton参数),对应快捷文字面板。如果不需要这个功能,可以不传这个参数,则不显示输入框左边按钮。

注意事项:
1. 模块参数较多,写代码输入时注意不要输入中文冒号/中文逗号,导致代码运行报错。
2. setInputFieldListener (监听输入框高度/模块面板高度接口)应在模块打开成功后调用。
3. 配置键盘弹出方式:
  1. <preference name="softInputMode" value="resize"/>
复制代码

open接口示例代码:
  1. var hintChatBox = api.require('hintChatBox');
  2.         hintChatBox.open({
  3.             bgColor: "#F00",
  4.             lineColor: "#F00",
  5.             borderColor: "rgba(0,0,0,0)",
  6.             fileBgColor: "#eee", //输入框背景色
  7.             switchButton: {
  8.                 faceNormal: 'widget://image/face.png',
  9.                 faceHighlight: "widget://image/face1.png",
  10.                 keyboardNormal: 'widget://image/key1.png',
  11.                 keyboardHighlight: "widget://image/key2.png",
  12.                 addNormal: 'widget://image/append.png',
  13.                 addHighlight: "widget://image/append1.png",
  14.             },
  15.             addButtons: [{
  16.                 normal: 'widget://image/image.png',
  17.                 highlight: "widget://image/image1.png",
  18.                 title: '相册',
  19.                 titleSize: 12
  20.             }, {
  21.                 normal: 'widget://image/packet.png',
  22.                 highlight: 'widget://image/packet1.png',
  23.                 title: '钱包',
  24.                 titleSize: 12
  25.             }],
  26.             pageControl: {
  27.                 normalColor: "#333",
  28.                 highlightColor: "#f00"
  29.             },
  30.             sourcePath: 'widget://image/emotion',
  31.             placeholder: "请输入。。。",
  32.             maxLines: 2,
  33.             leftButton: {
  34.                 hint: { //快捷文字提示面板设置,不可为空
  35.                     bg: "#fff", //(可选项)面板背景设置,支持 rgb,rgba,#,img,默认白色
  36.                     buttons: [{ //提示面板导航按钮组成的数组
  37.                         normal: "widget://image/btntxt.png", //按钮常态下的背景图片
  38.                         selected: "widget://image/btntxt.png" //点击后背景图片
  39.                     }, { //提示面板导航按钮组成的数组
  40.                         normal: "widget://image/btntxt1.png", //按钮常态下的背景图片
  41.                         selected: "widget://image/btntxt1.png" //点击后背景图片
  42.                     }],
  43.                     hints: [{ //快捷提示文面板设置,数组对象,与buttons按序一一对应
  44.                         size: 12, //(可选项)快捷文字大小,数字类型,默认12
  45.                         color: "#0f0", //(可选项)快捷文字颜色,默认黑色,支持 rgb,rgba,#
  46.                         contents: ["早上好!", "bye!"], //快捷文字内容组成的数组,数组对象
  47.                         normal: "widget://image/txt.png", //快捷提示文字开头标注图标,支持widget,fs,等本地路径
  48.                         selected: "widget://image/txt.png" //快捷提示文字开头选中标注图标,支持widget,fs,等本地路径
  49.                     }, { //快捷提示文面板设置,数组对象,与buttons按序一一对应
  50.                         size: 12, //(可选项)快捷文字大小,数字类型,默认12
  51.                         color: "#0f0", //(可选项)快捷文字颜色,默认黑色,支持 rgb,rgba,#
  52.                         contents: ["您好!", "Hello!"], //快捷文字内容组成的数组,数组对象
  53.                         normal: "widget://image/txt.png", //快捷提示文字开头标注图标,支持widget,fs,等本地路径
  54.                         selected: "widget://image/txt.png" //快捷提示文字开头选中标注图标,支持widget,fs,等本地路径
  55.                     }],
  56.                     activeBtn: 0 //数字类型;leftBtn显示的当前活跃按钮的索引,小于buttons数组元素总数;默认值为0
  57.                 }
  58.             }
  59.         }, function(ret, err) {
  60.             if (ret) {
  61.                 console.log(JSON.stringify(ret));

  62.             } else {
  63.                 console.log(JSON.stringify(err));
  64.             }
  65.         });
复制代码

FAQ:
1. Android open 提示json解析错误或IO错误,是什么原因?
   可能原因1:表情包文件及json文件不符合规范。可参考附件代码包中的资源。
                 2:sourcePath路径填写错误。
                 3:资源未同步到手机上。WiFi全量同步后测试。




本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
220
帖子
2
勋章
6911
Y币
hintChatBox 没有适配iPhoneX全面屏,下面被遮挡了
3
帖子
0
勋章
22
Y币
点击发送按钮,打印错误:  "status":false,"msg":"视图已存在" 请教老师这是怎么回事?
2
帖子
0
勋章
9
Y币
sourcePath路径填写错误  什么情况哦  这问题想不通  就是一直报错  全量也不行 代码检查啦 一模一样没问题
请指导一下 这个路径问题
9
帖子
0
勋章
222
Y币
请问 设置哪个 默认点开是 表情那块 我在文档中没有找到具体操作的说明
您需要登录后才可以回帖 登录

本版积分规则