附录

附1. cordova调用客户端Native接口的JS代码范例

请联系U聊开发团队获取JS代码范例。

附2. 单图片消息和富文本消息格式定义

单图片消息格式

消息内容为json格式，将通过文件上传到U聊服务器获得的文件id填写到json中即可，格式如下：

[{"fileid":"2c908474468f588d01468f6a263b0000”}]

富文本消息格式定义

富文本消息格式分为两类：

单、多图文混排格式

{
    "cover" : "可选，如留空，按第一条消息cover显示，封面大图，imageid或url",
    "degist" : "可选，如留空，按第一条消息degist显示，封面图片摘要",
    "articleCount" : "图文消息数目，消息数目为1，则为单图文消息",
    "publishTime" : "发布时间，可选，如留空，服务器自动填写当前时间",
    "articles" : [
        {
            "title" : "图文消息标题",
            "degist" : "图文消息简介",
            "cover" : "图文消息图片，imageid或url",
            "url" : "原文连接"
        },
        {
            "title" : "图文消息标题",
            "degist" : "图文消息简介",
            "cover" : "图文消息图片，imageid或url",
            "url" : "原文连接"
        }
    ]
}

单图文消息展现示例:

多图文消息展现示例:

账单富文本消息格式

{
    "title" : "账单消息标题",
    "degist" : "账单消息摘要",
    "url" : "账单消息原文链接。如填空,消息下方无<详细>按钮，适合无需跳转场景",
    "publishTime" : "发布时间，可选，如留空，服务器自动填写当前时间",
    "styles" :  {
        "topColor" : "消息头标题栏颜色 如#ffc17d]",
        "style" : [
            {
                "range" : "样式适用范围，如{22,1}",
                "font" : "字体大小，s小号；m中号；xl大号",
                "color" : "文字颜色 如#ffc17d]",
            },
            {
                "range" : "样式适用范围, 如{30,5}",
                "font" : "字体大小，s小号；m中号；xl大号",
                "color" : "文字颜色 如#ffc17d]",
            }
        ]
    }
}

附3. U聊客户端嵌入微页面用户身份认证开发指南

当服务号通过接口将自己系统的微页面（适合于手机客户端展现的页面）推送到用户的U聊客户端时，嵌入的页面及后台系统需要通过一系列的方法来获取并验证用户的信息。

步骤一. 页面中引入必要的JavaScript库

app.upchat.js

在head区域引入。注意如果页面运行在https下面，请使用https地址 https://upchat.95516.net/public/scripts/app.upchat.js
u聊js sdk的基础依赖库

依赖库为jquery或者zepto

以下为http站点基础库为jquery的例子：

<head>
......
<script src="../js/jquery-1.11.2.min.js" ></script>
<script src="http://upchat.95516.net/public/scripts/app.upchat.js" ></script>
</head>

如有需要，可以联系U聊开发团队获取JavaScript类库。

步骤二. 了解U聊客户端native接口JavaScript调用函数

接口：UPCHAT.M.NAPI.init(fn)
- 用途：注册监听器页面加载完成自动执行fn函数
- 参数：fn 初始化需要执行的函数名称
- 返回：无
接口：UPCHAT.M.NAPI.showWaitingView()
- 用途：显示等待界面
- 参数：无，空json：{}
- 返回：无
接口：UPCHAT.M.NAPI.showLoadingView()
- 用途：显示加载中界面
- 参数：无，空json：{}
- 返回：无
接口：UPCHAT.M.NAPI.showFlashInfo(msg)
- 用途：屏幕中间显示短暂的toast提醒消息字符串
- 参数：msg-toast提醒消息字符串
- 返回：无
接口：UPCHAT.M.NAPI.showAlertView(opt)
- 用途：弹出alert对话框提醒
- 参数：json，{title:对话框标题, msg:提醒消息, ok:OK按钮文本, cancel:cancel按钮文本}
- 返回：无
接口：UPCHAT.M.NAPI.dismiss()
- 用途：隐藏弹出对话框、加载图示或者toast提醒
- 参数：无，空json：{}
- 返回：无
接口：UPCHAT.M.NAPI.setBarStatus(opt)
- 用途：控制webview是否显示上下工具栏
- 参数：json，{shownavigationbar:是否显示title bar，取值yes/no，showtoolbar：是否显示tools bar，取值yes/no}
- 返回：无
接口：UPCHAT.M.NAPI.setNavigationBarTitle(title)
- 用途：设置WebView标题
- 参数：字符串WebView的标题
- 返回：无
接口：UPCHAT.M.NAPI.getSecurity(success, fail)
- 用途：从客户端获取安全验证码，供嵌入微页面的后台系统提交到U聊接口checksecurity接口验证
- 参数：success 成功回调函数 fail 失败回调函数
- 返回：无

接口：UPCHAT.M.NAPI.openFileChooser(success, fail)

用途：从客户端掉起native的相册和相机界面供前端使用
参数：success 成功回调函数 fail 失败回调函数
返回：success回调返回字段：
- type:文件类型
- content:文件数据

代码使用样例：

UPCHAT.M.NAPI.openFileChooser(
  function(succ) {
    var cid = ++self.lastCid;
    var imgUrl = 'data:' + succ.type + ';base64,' + succ.content;
    self.files['cid-' + cid] = imgUrl;
    self.imgUrls.push({
      id:'cid-' + cid,
      url: imgUrl
    });
    if (self.imgUrls.length >= 9) {
      self.el_addPicBtn.hide();
    }
    dust.render('feed/postitem_pic', {
      cid: cid,
      imgUrl: imgUrl
    }, function(err, out) {
      self.el_picBox.prepend(out);
    });
  }, 

  function(fail) {
    util.showInfo('打开图片失败！');
  }
);

步骤三. 参考前端验证JavaScript代码，编写前端页面接口

// 安全验证码获取成功后的回调函数
// 这里成功后调用了后台checkcode的servlet校验安全码，此servlet说明见下节
function success_(result) {
    //AJAX验证效验码，此处接口和参数自行设计和约定
    $.post("checkcode", {json:result, param:param}, function(data) {
        if (parseInt(data)>0) {
            UPCHAT.M.NAPI.dismiss();
            // 校验通过，可以通过页面转跳或者异步局部加载来展现页面具体内容
            window.location.href="xxxx.jsp?data="+data;
        } else {
            UPCHAT.M.NAPI.dismiss();
        }
    });
}

// 安全验证码获取失败后的回调函数，注意参数格式
function fail_(fal) {
    UPCHAT.M.NAPI.showAlertView({
        title : "获取效验码失败",
        msg : fal,
        ok : "确定",
        cancel : ""
    });
    UPCHAT.M.NAPI.dismiss();
}

// 取验证安全码接口
function getCheckCode() {
    UPCHAT.M.NAPI.showWaitingView();
    UPCHAT.M.NAPI.getSecurity(success_, fail_);
}

// 注册监听器，启用插件调用获取验证安全码接口
$(function () {
    UPCHAT.M.init(getCheckCode);
});

步骤4. 参考后端Java Servlet代码，编写后端验证接口

....
public class CheckCodeServlet extends HttpServlet {

....
    public CheckCodeServlet() {
        super();
    }
....

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            String json = request.getParameter("json");
            String param = request.getParameter("param");
....
            // 调用U聊开放接口checksecurity验证安全码
            String check_result = HttpsRequest.validateCheckCode(sys.getApikey(), result.getSecurity());
            CheckSecurityResultBean check_result_bean = JSON.parseObject(check_result,CheckSecurityResultBean.class);
            if(check_result_bean.getStatus().equals("0")==true){
                // 返回验证通过的数据
                response.getWriter().write("success data");
            }
            else{
                // 返回验证不通过的数据
                response.getWriter().write("fail data");
            }
        } catch (Exception e) {
            log.error(e);
        }
    }

}

附录4：公众平台生成应用密钥步骤

系统对接模式，调用U聊对接网关应用需要使用应用密钥（即apikey），可以遵循以下步骤获取应用密钥，原通过签到接口获取应用密钥的方式已废弃，因尽快停用。

步骤一，使用【公众号管理员用户】登录新公众平台

http://upchat.95516.net/public/html

公众号管理员身份获取请联系U聊开发团队获取。

步骤二. 点击【开发模式】，查看应用密钥

步骤三. 如应用密钥为空或者已失效，点击重置获取最新的密钥

步骤四. 将获取到的最新的应用密钥配置到对接系统中，并作为每次调用的应用密钥

附录5：客户端菜单点击事件消息格式

新公众平台支持为所有公众号配置客户端菜单，效果如图：

当用户点击客户端菜单的某一项，根据菜单项配置的类型不同，U聊后台会给对接系统发送一条消息类型为7的事件消息，该事件消息也可由公众平台代为处理。

对于消息类型为7-客户端菜单点击事件的消息，消息体reply格式如下

{
    "CreateTime":1426841235979,
    "Event": "click",
    "EventKey": "xxxxxxxx"
}

CreateTime 菜单项点击时间
Event: 暂时支持click-用户触发点击事件；view-用户客户端直接转跳web url事件
EventKey: Event为click类型时，为一串系统自定义的key，系统可以按此key做个性化处理和应答；Event为view类型时，key为用户转跳的url

附录6: 公众号消息附加交换数据payload格式

根据不同的payload_type, payload格式如下：

零钱转账交易状态payload_type=00

{
    "tn":"1426841235979"
}

附录7: 文件附件格式消息报文体content格式

文件附件报文体为json格式，各字段如下

fileid 调用upload接口将文件上传后获取文件id
filetype 文件类型，同文件上传调用upload接口时的类型取值
filename 文件名称，如“会议纪要.doc”
filesize 文件大小字节数

格式示例：

{
    "fileid": "25455-2124-1121212",
    "filetype": "excel",
    "filename": "交易简报0227.xls",
    "filesize": 65535421,
    "key": "xxxxxxxxxx"
}

附录8: 互动型消息报文体content格式

说明：

支持互动型消息，用户可直接在消息气泡上进行操作。
对互动型消息，支持使用变更类回执修改气泡样式，包括但不限于新增字段、修改背景、修改某字段等。

互动型消息报文体为json格式，各字段如下

格式示例：

{
    "url" : "消息原文链接，供整体跳转。界面无需出现<详细>跳转按钮",
    "covertype" : "可选，1：imageid;2:url",
    "cover" : "可选，imageid或url。如留空表示无图片",
    "title" : {
      "content" : "消息标题", //正文
      "color" : "#ffc17d", //可选。颜色
      "font" : "m"        //可选。字体，s-小，m-中，l-大    
    },
    "body" : {
      "content" : "消息标题", //正文
      "color" : "#ffc17d", //可选。颜色
      "font" : "m"        //可选。字体，s-小，m-中，l-大   
    }
    "status" :
    {
        //1--该区域放action，对应btns字段，此时text无效 
        //2--放文字，对应text字段，此时btns无效
        "type" : "1", 
        "text" : {
            "content" : "消息标题", //正文
            "color" : "#ffc17d", //可选。颜色
            "font" : "m"        //可选。字体，s-小，m-中，l-大    
        }
        "btns": [
        {
              "name": "一个按钮",
            //click-点击事件，此时url为key； 
            //view-跳转，跳转至url；
            //open-本地调用，此时url为本地调用串
              "type": "view", 
              "url": "https://www.taobao.com", // 参见type取值说明
              "color": "#ffc17d", //可选。颜色
              "font" : "m"        //可选。字体，s-小，m-中，l-大    
            },
           {
              "name": "两个按钮",
              "type": "view",
              "url": "https://www.taobao.com",
              "color": "#ffc17d", //可选。颜色
              "font" : "m"        //可选。字体，s-小，m-中，l-大   
            }
        ]    
         } 
    "styles" :  {
        "statusBtnsVertical": "1", // 0-横排 1-竖排
        "bgColor" : "消息气泡底色 如#ffc17d]",
    }
}

互动型消息展现示例:

附录9: 互动型消息回执报文体content格式

回执报文体为json格式，各字段如下

格式示例：

{
    "referedMsgId": "1234567890",//指定针对哪一条消息（该消息的msgID）进行回执
    "status":{
        "type" : "2",//1--该区域放action 2--放文字    
        "text" : {
          "t" : "中间状态或终极状态", //正文
          "c" : "#ffc17d", //可选。颜色
          "f" : "m"        //可选。字体，s-小，m-中，l-大    
        }
      },
    "styles" :  {
        "bgColor" : "消息气泡底色 如#ffc17d",
         "statusBtnsVertical": "1", // 0-横排 1-竖排
    }
}

附录

附录

附1. cordova调用客户端Native接口的JS代码范例

附2. 单图片消息和富文本消息格式定义

单图片消息格式

富文本消息格式定义

附3. U聊客户端嵌入微页面用户身份认证开发指南

步骤一. 页面中引入必要的JavaScript库

步骤二. 了解U聊客户端native接口JavaScript调用函数

步骤三. 参考前端验证JavaScript代码，编写前端页面接口

步骤4. 参考后端Java Servlet代码，编写后端验证接口

附录4：公众平台生成应用密钥步骤

步骤一，使用【公众号管理员用户】登录新公众平台

步骤二. 点击【开发模式】，查看应用密钥

步骤三. 如应用密钥为空或者已失效，点击重置获取最新的密钥

步骤四. 将获取到的最新的应用密钥配置到对接系统中，并作为每次调用的应用密钥

附录5：客户端菜单点击事件消息格式

附录6: 公众号消息附加交换数据payload格式

零钱转账交易状态payload_type=00

附录7: 文件附件格式消息报文体content格式

附录8: 互动型消息报文体content格式

附录9: 互动型消息回执报文体content格式

results matching ""

No results matching ""