您需要登录后才可以操作登录 | 立即注册
关闭
关闭
产品技术文章6-App集成聊天输入框功能插件技巧实例 -
京京 | 2017/04/01 13:50:16


使用场景?

集成插件&调用API接口,相信对每个AppCan开发者而言不是难点,参考文档和示例能正常把uexChatKeyboard开放的接口调用起来不难。一套代码相对于Android来说,在细节处理方面,这里主要讲解一下2个细节,主要是针对输入框与键盘遮挡的问题处理、内容与键盘遮挡的问题。

很多App应用场景会有评论输入框、聊天输入框相关的功能,比如发个emoji@下好友啊等等 ,uexChatKeyboard插件接口可以满足这些公共需求。只需简单的widget配置即可实现自定义表情集。

 

效果图

                                             

用到的技术

1.使用最新的引擎版本和插件版本打包即可

2.调用的插件接口及聊天输入框功能插件uexChatKeyboard

3.html技术和android端开发细节插件API接口解析

整体思路

1. 项目页面实现插件功能,需在内容html页集成插件接口

2. 测试安卓功能时打包需要选择压缩模式打包,否则出现键盘遮挡

3. 改变webview的高度以适应弹出的键盘即前端细节处理

4.回调接口


代码解读

 


注意事项:

特别说明Tips: 在键盘弹出的时候,改变浮动窗口中内容div的高度,可以避免内容被键盘遮挡。对于Android的话,需要通过js来计算进行处理;而对于iOS的需要调用changeWebViewFrame这个接口来处理。

使用安卓版本插件时需要打包选择压缩模式,不适用于平移模式,如果个别页面需要使用平移模式,可以根据需要动态切换键盘模式,调用此设置键盘模式接口。

初始化插件

1、调用插件接口

在内容页面初始化中调用open方法。默认在appcan.ready(funCall)里编写

   appcan.ready(function () {

    if (!isAndroid) {

        appcan.initBounce();

    }

    var json;

    if (isAndroid) {

        json = {

            "emojicons": "res://emojicons/emojicons.xml",

            "shares": "res://shares/shares.xml",

            "textColor": "#FFF",

            "textSize": "15.5"

        };

    } else {

        json = {

            "emojicons": "res://emojicons/emojicons.xml",

            "shares": "res://shares/shares_ios.xml",

            "textColor": "#FFF",

            "textSize": "15.5"

        };

    }

    uexChatKeyboard.open(JSON.stringify(json));

………………..

………………..

});


 

2widget配置即可实现自定义表情集:

widget创建wgtRes目录

在项目里根目录里创建此文件夹,且命名wgtRes,自定义表情相关文件及图片资源都在此文件夹里。

配置文件:

1、 widgetwgtRes目录下创建emojicons目录; 2)、在emojicons目录中放入表情以及删除的图片资源,表情的默认命名格式: ace_emoji_1,删除的默认命名格式:ace_emoji_delete.png; 3)、在emojicons中创建emojicons.xml文件,格式如下:

 

<?xml version="1.0" encoding="utf-8"?>

<emojicons delete="ace_emoji_delete.png ">

   <key>[微笑]</key>

   <string> ace_emoji_1.png</string>

   <key>[憋嘴]</key>

   <string> ace_emoji_2.png</string>

</emojicons>

 

delete:删除对应的图片名;

key:表情对应的文字;

string:表情对应的图片名;

表情目录、图片名以及配置文件名都可以自定义命名,但是必须保 证配置文件中的图片名与资源图片对应.

 

2、1)、在widgetwgtRes目录下创建shares目录; 2)、在shares中放入分享选项的图片资源,图片的默认命名格式: ace_share_1; 3)、在shares中创建shares.xml文件,格式如下:

 

<?xml version="1.0" encoding="utf-8"?>

<shares>

<key>拍照</key>

<string>ace_share_1.png</string>

<key>图片</key>

<string>ace_share_2.png</string>

<key>位置</key>

<string>ace_share_3.png</string>

</shares>

 

key:分享选项显示的文字

string:分享选项对应的图片名说明;

分享目录、图片名以及配置文件名都可以自定义命名,但是必须保 证配置文件中的图片名与资源图片对应.

示例:

 

 效果图:

                                                               

细节处理

 

 

 

发送文本内容功onCommitJson,正常是在open方法调用之后开始支持此监听方法,

    uexChatKeyboard.onCommitJson = function (msg) {//发送文本内容时的的监听状态,成功失败

        var msg1 = msg.emojiconsText;

        if (msg1.trim() == '') {

            appcan.window.openToast("不能发送空格", 1500, 5);

        } else {

            var chatRightTpl = document.querySelector("#tpl_chat_right"),

                chatCon = chatRightTpl.content.querySelector('#chatText');

            chatCon.textContent = msg1;//添加发送的内容

            $("#huihuainfolist").append(chatRightTpl.innerHTML);

            chatListViewInstance.toDown();

        }

    }

键盘弹出或收起时的监听onKeyBoardShow

  1、正常是在open方法调用之后,开始调用此方法,正常思路里面最重要的方法要写在onKeyBoardShow监听里,

                 

前端大神已经给了具体的代码和处理方法,完美解决,非常感谢!

改变webview的高度以适应弹出的键盘

对于Android的话,changeWebViewFrame不适用,需要通过js来计算进行处理

部分代码如下:

  

注:即参考上述通过计算js高度的思路处理,实现以下最终解决后的效果:

这样整个程序就完成了,有点意思的栗子好玩!戳戳源码研究下吧>>>>

1812 浏览
1 收藏
2
0 评论
上一篇:极光推送使用方法 | 下一篇:没有了

最近访客

fjh322

2018/05/15

maohejunda

2018/05/04

shoal9

2018/04/28

glhwjwj

2018/04/23

zhuao

2018/04/23

幻音丶小涛

2018/04/20

雪飞扬

2018/04/05

梦dream

2018/03/14

碎岁

2018/03/09

小鱼123

2018/01/22

评论     facelist

您需要登录后才可以评论 登录 | 立即注册

全部评论