U聊JSSDK接入文档

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

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

两种引入方式：jquery与zepto。由于后续会增加cordova接口，强烈建议使用线上的地址，不要把app.upchat.js放到本地。注意把domain换为自己域名，或者设置为相对地址。如果页面运行在https下面，请使用https地址。

建议在head区域引入javascript库文件。

jquery 需要引入jquery.js与app.upchat.js

<head>
......
<script src="./js/jquery-1.11.2.min.js"></script>
<script src="https://domain/public/scripts/app.upchat.js" ></script>
</head>

zepto 需要引入zepto.js与zepto.app.upchat.js

<head>
......
<script src="./js/zepto-1.2.0.min.js" ></script>
<script src="https://domain/public/scripts/zepto.app.upchat.js" ></script>
</head>

步骤二. 资源文件确认

能正常使用cordova接口，则必须保证资源文件的正确引用。app.upchat.js和zepto.app.upchat.js中引用了android、ios和electron的资源文件，为确保接口正常使用，应确保资源文件的正常引用。

确认资源文件是否正常引用的方法：app.upchat.js或zepto.app.upchat.js代码开头第一个函数中“PAGE_CONTEXT_URL:”后的地址+“/cordova/min/electron-min.js”，在浏览器中打开，查看是否能正确访问。

例如：文件第一个函数代码为(function(e){var n={URLS:{PAGE_CONTEXT_URL:"https://user.95516.com/upchatjs/unionpay"}};e.CONFIG=n})，那么检验资源文件是否正确引用的地址为：https://user.95516.com/upchatjs/unionpay/cordova/min/electron-min.js

同样，以此方法，可以自行修改资源文件引用的网络地址。例如：测试环境的网络不能访问生产网络，那么可以将“PAGE_CONTEXT_URL:”后的地址改为测试环境的地址，测试能正确引用资源文件即可。

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

接口的成功回调函数success()，都会统一返回status的值，若status=='0'，则表示结果正确，其他情况可以提示为服务器内部错误；接口的错误回调函数fail()，若是用户需下载最新版app，则iOS返回'版本不支持'，Android返回'Class not found'或者'Invalid action'，其他情况提示用户错误信息。

接口：UPCHAT.M.init(fn)
- 用途：注册监听器页面加载完成自动执行fn函数
- 参数：fn 初始化需要执行的函数名称
- 返回：无
接口：UPCHAT.M.NAPI.showWaitingView()
- 用途：显示等待界面（页面无法滑动）
- 参数：无，空json：{}
- 返回：无
接口：UPCHAT.M.NAPI.showLoadingView()
- 用途：显示加载中界面（页面可以滑动）
- 参数：无，空json：{}
- 返回：无
接口：UPCHAT.M.NAPI.showFlashInfo(msg)
- 用途：屏幕中间显示短暂的toast提醒消息字符串
- 参数：string，提醒消息字符串
- 返回：无
接口：UPCHAT.M.NAPI.showAlertView(opt)
- 用途：弹出alert对话框提醒
- 参数：json，{title:对话框标题, msg:提醒消息, ok:OK按钮文本, cancel:cancel按钮文本}
- 返回：无
接口：UPCHAT.M.NAPI.dismiss()
- 用途：隐藏弹出对话框、加载图示或者toast提醒
- 参数：无，空json：{}
- 返回：无
接口：UPCHAT.M.NAPI.startNewWebView(url, ext)
- 用途：打开webview
- 参数：{string} url 新页面的网址，{json} ext {color:标题栏颜色,sysid:服务号id}
- 返回：无
接口：UPCHAT.M.NAPI.closeWebView(url)
- 用途：关闭webview
- 参数：{string} url 要关闭的页面的网址
- 返回：无
接口：UPCHAT.M.NAPI.setBarStatus(opt)
- 用途：控制webview是否显示上下工具栏
- 参数：json，{shownavigationbar:是否显示title bar，取值yes/no，showtoolbar：是否显示tools bar，取值yes/no}
- 返回：无
接口：UPCHAT.M.NAPI.setNavigationBarTitle(title)
- 用途：设置WebView标题
- 参数：string，字符串WebView的标题
- 返回：无
接口：UPCHAT.M.NAPI.openFileChooser(success, fail)
- 用途：从客户端掉起native的相册和相机界面供前端使用
- 参数：success 成功回调函数 fail 失败回调函数
- 返回：success回调返回字段：
  - type:文件类型
  - content:文件数据
接口：UPCHAT.M.NAPI.choosePhoto(success, fail)
- 用途：从相册或者拍照选取图片
- 参数：success 成功回调函数 fail 失败回调函数
- 返回：success回调返回字段：
  - mode：图片来源，1拍照 2相册
  - type：图片类型，默认"image/jpeg"
  - latitude：纬度
  - longitude：经度
  - size：文件大小
  - content：文件数据,经过base64处理
接口：UPCHAT.M.NAPI.validateShare(success, fail, vdata)
- 用途：验证分享链接，跳转到相应的聊天窗口
- 参数：success 成功回调函数 fail 失败回调函数，{json}vdata{access_token:要跳转到的窗口的access_token} 注获取access_token需要业务系统后台向u聊后台获取
- 返回：无
接口：UPCHAT.M.NAPI.shareApp(success, fail, params)
- 用途：调用系统分享
- 参数：success 成功回调函数，fail 失败回调函数，{json}params{url:要分享的链接，title:要分享的题目，image:要分享的显示图}
- 返回：无
接口：UPCHAT.M.NAPI.getLocation(success, fail)
- 用途：获取地理位置一定要在开启定位的公众号打开
- 参数：success 成功回调函数，fail 失败回调函数
- 返回：无
接口：UPCHAT.M.NAPI.getSecurity(success, fail)
- 用途：从客户端获取安全验证码，供嵌入微页面的后台系统提交到U聊接口checksecurity接口验证
- 参数：success 成功回调函数 fail 失败回调函数
- 返回：success回调返回字段：
  - security 安全验证码
接口：UPCHAT.M.NAPI.getDomainSecurity(success, fail)
- 用途：从客户端获取安全验证码和域名，和accessToken一起供嵌入微页面的后台系统提交到U聊接口验证
- 参数：success 成功回调函数 fail 失败回调函数
- 返回：success回调返回字段：
  - security 安全验证码
  - domain 域名
接口：UPCHAT.M.NAPI.getGestureSecurity(success, fail)
- 用途：从客户端获取安全验证码和域名，和accessToken一起供嵌入微页面的后台系统提交到U聊接口验证
- 参数：success 成功回调函数 fail 失败回调函数
- 返回：success回调返回字段：
  - security 安全验证码
  - domain 域名
接口：UPCHAT.M.NAPI.openPublicChat(success, fail, params)
- 用途：打开公众号对话框
- 参数：success 成功回调函数 fail 失败回调函数，{json}params{sysid:要打开的公众号的sysid，nickname:要打开的公众号名称，domain:域名}
- 返回：无
接口：UPCHAT.M.NAPI.showPhotos(success, fail, params)
- 用途：展示图片
- 参数：success 成功回调函数 fail 失败回调函数，{json}params{photos:要打开的图片数组地址，index:默认展示第几个图片，从0开始算}
- 返回：无
接口：UPCHAT.M.NAPI.showMenu(success, fail, params)
- 用途：保存图片
- 参数：success 成功回调函数 fail 失败回调函数，{json}params{photoUrl:要保存的图片，url:要保存到的地址}
- 返回：无
接口：UPCHAT.M.NAPI.startCodeScanView(success, fail)
- 用途：二维码扫描
- 参数：success 成功回调函数 fail 失败回调函数
- 返回：无
接口：UPCHAT.M.NAPI.showWaterMark(success, fail)
- 用途：显示水印
- 参数：success 成功回调函数 fail 失败回调函数
- 返回：无
接口：UPCHAT.M.NAPI.hiddenWaterMark(success, fail)
- 用途：隐藏水印
- 参数：success 成功回调函数 fail 失败回调函数
- 返回：无

接口：UPCHAT.M.NAPI.getFileInfo(success, fail, url)
- 用途：获取文档信息
- 参数：success 成功回调函数，fail 失败回调函数，url为文档在本地的存储地址，可在saveFile之后，获得本地存储地址。
- 返回：无
接口：UPCHAT.M.NAPI.downloadFile(success, fail, url)
- 用途：下载文档
- 参数：success 成功回调函数，fail 失败回调函数，url为下载文档的地址
- 返回：success回调返回字段：
  - tempFilePath: 下载文件后的临时地址
接口：UPCHAT.M.NAPI.saveFile(success, fail, url)
- 用途：保存文档
- 参数：success 成功回调函数，fail 失败回调函数，url文件下载后的临时地址，因此一般saveFile是在downloadFile后使用。
- 返回：success回调返回字段：
  - savedFilePath: 文件保存后的地址，作为getFileInfo和openFile的地址参数使用
接口：UPCHAT.M.NAPI.openFile(success, fail, url)
- 用途：打开文档
- 参数：success 成功回调函数，fail 失败回调函数，url为文档在本地的存储地址，可在saveFile之后，获得本地存储地址。
- 返回：无

例子获取用户信息:

声明：以下示例代码仅供联调使用，上生产时请根据不同的异常情况自行处理

测试页面请在对应的公众号中打开

getsecurity 获取校验码
- 注意调用UPCHAT.M.NAPI.getSecurity之前需要判断是否在U聊中，并且在init方法中调用，如果不在U聊中提示用户使用U聊打开。
- UPCHAT.M.NAPI.getSecurity失败的回调函数中需要判断该接口U聊是否支持，fal == '版本不支持' || fal == 'Class not found' || fal == 'Invalid action'则提示用户升级U聊，其他情况代表接口调用失败
- UPCHAT.M.NAPI.getSecurity成功的回调函数需要根据返回的状态码，判断是否拿到了security，为0代表成功，否则代表参数有问题或者服务器内部错误
前端传递校验码到对接系统后台
- 根据返回的值判断是否拿到用户信息，U聊后台返回码："0", "成功"; "99", "非法请求" 代表用户没权限，或者公众号配置有问题; "100","登录已失效，请重新登录"
对接系统后台请求U聊后台获取用户信息
- 前端根据对接系统返回码判断是否拿到了用户信息。

/**
* getUserInfo 根据校验码获取用户信息
* 声明：以下示例代码仅供联调使用，上生产时请根据不同的异常情况自行处理
*/
var getUserInfo = function() {
   var url = '/upchat-public-demo/api/page/checkSecurity';
   //成功后回调函数 代表流程是正常的，但是还需要判断result.status
   //这里成功后调用了后台checkcode的servlet校验安全码
   var _success = function (result) {
       // 验证校验码
       // AJAX验证校验码，此处接口和参数自行设计和约定
       UPCHAT.M.NAPI.dismiss();
       alert('验证校验码' + result.security);
       /**
        * status 为0 代表服务器返回的值是正确的
        * 其他情况 可以提示为服务器内部错误
        */
       if (result.status == '0') {
           var data = {
               code: result.security
           };
           /**
            * 
            * 拿到验证码后，分为以下几步：
            * 1、去对接系统后台checkSecurity，
            * 2、对接系统的后台会去U聊后台checkSecurity, 
            *      根据返回的值判断是否拿到用户信息，U聊后台返回码：
            *      "0", "成功"
            *      "99", "非法请求" 代表用户没权限，或者公众号配置有问题
            *      "100", "登录已失效，请重新登录"
            *   对接系统自行处理，为0代表拿到用户信息，其他代表未拿到，例如用户没有权限，后台就会返回99
            * 3、前端根据对接系统的返回值，展示给用户
            *   例如："0" 代表成功 "99"代表用户无权限
            */
           $.post(url, data, function (ret) {
               if (ret.status == '0') {
                   alert('用户信息：' + JSON.stringify(ret.content));
               } else if (ret.status == '99') {
                   alert('用户无权限')
               } else {
                   alert('服务器内部错误');
               }
           });
       } else {
           alert(JSON.stringify(result));
           alert('服务器内部错误');
       }
   };

   //失败后回调函数 代表客户端失败，或者服务器给客户端返回500之类的错误
   var _fail = function (fal) {
       UPCHAT.M.NAPI.dismiss();
       /**
        * ios: 
        * fal '版本不支持', 则提示用户去下载最新版U聊
        * android
        * fal 'Class not found'或者'Invalid action' ,则提示用户去下载最新版U聊
        * toNewApp()
        * 其他情况，提示用户错误信息
        */
       if (fal == '版本不支持'  || fal == 'Class not found' || fal == 'Invalid action') {
           toNewApp();
       } else {
           alert(fal);
       }
   };
   UPCHAT.M.NAPI.showLoadingView();
   UPCHAT.M.NAPI.getSecurity(_success, _fail);
}

/**
* 监听用户信息
* 声明：以下示例代码仅供联调使用，上生产时请根据不同的异常情况自行处理
*/
$('#getSecurity').on('click', function(){
   if (UPCHAT.M.isNative()) {
       UPCHAT.M.init(getUserInfo);
   } else {
       // 不在U聊中打开提示用户在U聊中打开
       toApp();
   }
});

// 非U聊客户端打开
// 声明：以下示例代码仅供联调使用，上生产时请根据不同的异常情况自行处理
var toApp = function () {
   $(".upapi-container").css("display", "block");
   var html = '<label>请用爽爽办公客户端打开该界面</label><br />' +
           '<a href="http://upchat.95516.net/app/">爽爽办公客户端下载</a>';
   $(".upapi-container").html(html);
};

// U聊老客户端打开
// 声明：以下示例代码仅供联调使用，上生产时请根据不同的异常情况自行处理
var toNewApp = function () {
   $(".upapi-container").css("display", "block");
   var html = '<label>请用最新版爽爽办公客户端打开该界面</label><br />' +
           '<a href="http://upchat.95516.net/app/">爽爽办公客户端下载</a>';
   $(".upapi-container").html(html);
};

详细信息可以查看jssdk示例代码

jssdk接入文档

U聊JSSDK接入文档

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

步骤二. 资源文件确认

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

例子获取用户信息:

results matching ""

No results matching ""

U聊JSSDK接入文档

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

步骤二. 资源文件确认

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

例子 获取用户信息:

results matching ""

No results matching ""

例子获取用户信息: