APICloud开发者进阶之路 | UIPickerView 模块示例demo

本文出自APICloud官方论坛

rongCloud2  3.2.8 版本更新后添加了发送小视频接口,发送文件接口。

rongCloud2  概述

融云是国内首家专业的即时通讯云服务提供商,专注为互联网、移动互联网开发者提供即时通讯基础能力和云端服务。通过融云平台,开发者不必搭建服务端硬件环境,就可以将即时通讯、实时网络能力快速集成至应用中。
rongCloud2 封装了融云即时通讯能力库 IMLib SDK 的 API,对融云的相关接口做了一一对应的封装,功能详情可参考目录。
使用 rongCloud2 模块之前,请先 注册 融云的开发者帐号并申请创建 App,创建 App 后,可以在 开发者后台 获取 App Key 和 App Secret 用于开发。开发前请先认真阅读相关的 融云开发文档和视频。(请在PC端打开)
由于 (Android )融云sdk 不支持中文路径,需要处理一下,用fs 模块 调用rename接口重命名一下,为了不影响原文件需要先复制一下再进行处理。方法不唯一,提供参考
所用 模块  rongcloud2、fs 模块、fileBrowser 模块以下是页面源码 包括简易登陆获取token页面主功能页面。
一、

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">

      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

      <title>title</title>

      <link rel="stylesheet" type="text/css" href="../css/api.css"/>

      <style>

          body{

          }

          .form{

            width: 100%;

            height: 200px;

            margin-top: 100px;

            text-align: center;

          }

          input{

            width: 80%;

            height: 60px;

            text-align: center;

            font-size: 35px;

            border-radius: 5px;

            border: 1px solid #b23;

          }

          button{

            width: 100px;

            height: 50px;

            margin-left: 100px;

            background-color: green;

            color: #fff;

          }
</style>

  </head>

  <body>

<div class="form">

id:<input id="uid" type="text" name="" value="">

name:<input id="uname" type="text" name="" value="">

</div>

<button type="button" name="button">登陆</button>

<button type="button" name="button">发送</button>

  </body>

  <script type="text/javascript" src="../script/api.js"></script>

  <script type="text/javascript" src="../script/sha1.js"></script>

  <script type="text/javascript">

  var rong = ‘‘;

      apiready = function(){

        rong = api.require("rongCloud2");

      };

      function login() {

        var uid = $api.byId(‘uid‘).value;

        var uname = $api.byId(‘uname‘).value;

        var portraitUri = ‘lll‘; //会员头像

        var appKey = "*********";

        var appSecret = "***********";

        var nonce = Math.floor(Math.random() * 1000000);//随机数

        var timestamp = Date.now(); //时间戳

        var signature = SHA1("" + appSecret + nonce + timestamp);//数据签名(通过哈希加密计算)

        api.ajax({

                url : "http://api.cn.ronghub.com/user/getToken.json",

                method : "post",

                headers : {

                        "RC-App-Key" : appKey,

                        "RC-Nonce" : "" + nonce,

                        "RC-Timestamp" : "" + timestamp,

                        "RC-Signature" : "" + signature,

                        "Content-Type" : "application/x-www-form-urlencoded"

                },

                data : {

                        values : {

                                userId : uid,

                                name : uname,

                                portraitUri : portraitUri

                        }

                }

        }, function(ret, err) {

                if (ret) {

                        $api.setStorage(‘token‘, ret.token);//将token存储到本地

                        api.alert({

                            title: ‘testtitle‘,

                            msg: ‘以获取token‘,

                        }, function(ret, err){

                            if( ret ){

                                 api.openWin({

                                     name: ‘rong2‘,

                                     url: ‘./rong2.html‘,

                                     pageParam: {

                                         name: ‘test‘

                                     }

                                 });

                            }else{

                                 alert( JSON.stringify( err ) );

                            }

                        });

                } else {

                        alert("获取token失败")

                }

        });

      }

      function sendEv() {

        api.sendEvent({

            name: ‘myEvent‘,

            extra: {

                key1: ‘value1‘,

                key2: ‘value2‘

            }

        });

        api.openWin({

            name: ‘page1‘,

            url: ‘widget://index.html‘,

            pageParam: {

                name: ‘test‘

            }

        });

      }
</script>

  </html>

复制代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

    <title>title</title>

    <link rel="stylesheet" type="text/css" href="../css/api.css" />

    <style>

        body {}

        .main {

            position: absolute;

            bottom: 0;

            width: 100%;

            height: 200px;

            text-align: center;

            border-top: 1px solid #b23;

        }

        button {

            margin-top: 5px;

            margin-left: 10px;

            width: 90px;

            height: 50px;

        }

        .msg {

            width: 100%;

            height: 300px;

            margin-top: 100px;

        }

        input {

            width: 90%;

            height: 50px;

            border: 1px solid #b33;

            text-align: center;

        }

        .msg button {

            width: 100px;

            height: 50px;

            background-color: green;

            color: #fff;

            border-radius: 5px;

        }
</style>

</head>

<body>

    <div class="msg">

        <input id="sendtxt" type="text" name="" value="" placeholder="发送文本内容">

        <input id="uid" type="text" name="" value="" placeholder="接收者id">

        <button type="button" name="button">发送</button>

        <button type="button" name="button">发文件</button>

        <button type="button" name="button">发视频</button>

    </div>

    <div id="evbtn">

    </div>

</body>

<script type="text/javascript" src="../script/api.js"></script>

<script type="text/javascript">

    var token = ‘‘;

    var oldPath = ‘‘;

    var fileName = ‘‘;

    var type = ‘‘;  //按钮

    //初始化模块

    var rong = null;

    var fs = null;

    var fileBrowser = null;

    apiready = function() {

      //初始化模块

        rong = api.require(‘rongCloud2‘);

        fs = api.require(‘fs‘);

        fileBrowser = api.require(‘fileBrowser‘);

        //登陆

        setTimeout(function() {

            getToken();

            msglisten();

            addlistenSta();

            toCon();

        }, 2000);

    };

    //获取缓存token

    function getToken() {

        token = $api.getStorage(‘token‘);

        if (token) {

            toInit();

        } else {

            api.openWin({

                name: ‘page1‘,

                url: ‘./token.html‘,

                pageParam: {

                    name: ‘test‘

                }

            });

        }

    }

    //初始化融云

    function toInit() {

        rong.init(function(ret, err) {

            if (ret) {

                console.log(‘init---ok‘);

            }

        });

    }

    //添加状态监听

    function addlistenSta() {

        rong.setConnectionStatusListener(function(ret, err) {

            if (ret) {

                console.log(‘监听开启---‘);

            }

        });

    }

    //连接融云

    function toCon() {

        rong.connect({

            token: token

        }, function(ret, err) {

            alert(JSON.stringify(ret) + ‘---连接成功‘);

        });

    }

    function send ( type ) {

      type = type;

      getFilePath();

    }

    function fnEvent( path ) {

      if (type == ‘file‘) {

        sendFileMessageR( path );

      }else {

        sendSightMessageR( path );

      }

    }

    //选取文件

    function getFilePath() {

      fileBrowser.open(function(ret) {

          if (ret) {

            alert(JSON.stringify(ret));

            oldPath = ret.url;

            fileName = ret.name;

            //判断路径是否包含中文

            if (escape(oldPath).indexOf( "%u" )<0){

                alert( "没有包含中文" );

                fnEvent( oldPath );

            } else {

                existIsOk();

            }

          }

      });

    }

    //判断文件夹是否存在

    function existIsOk() {

      fs.exist({

          path: ‘fs://rongcloudfilecopy‘

      }, function(ret, err) {

        alert(JSON.stringify(ret));

          if (ret.exist) {

              alert(‘有这个路径‘);

              copyToRong();

          } else {

              alert(‘没有这个路径‘);

              createDirF();

          }

      });

    }

    //创建路径

    function createDirF() {

      fs.createDir({

          path: ‘fs://rongcloudfilecopy‘

      }, function(ret, err) {

          if (ret.status) {

              alert(JSON.stringify(ret));

              copyToRong();

          } else {

              alert(JSON.stringify(err));

          }

      });

    }

    //复制到融云文件夹

    function copyToRong( ) {

      fs.copyTo({

          oldPath: oldPath,

          newPath: ‘fs://rongcloudfilecopy‘

      }, function(ret, err) {

          if (ret.status) {

              alert(JSON.stringify(ret));

              renameRong();

          } else {

              alert(JSON.stringify(err));

          }

      });

    }

    //重命名文件

    function renameRong( ) {

      var timestamp = (new Date()).getTime();

      var srtPath1 = fileName.split(‘.‘)[0];

      var srtPath2 = fileName.split(‘.‘)[1];

      var copyOldPath = ‘fs://rongcloudfilecopy/‘ + fileName ;

      var newPath = ‘fs://rongcloudfilecopy/‘ + timestamp + ‘.‘ + srtPath2

      fs.rename({

          oldPath: copyOldPath,

          newPath: newPath

      }, function(ret, err) {

          if (ret.status) {

              alert(JSON.stringify(ret));

              fnEvent( newPath );

          } else {

              alert(JSON.stringify(err));

          }

      });

    }

    //发短视频

    function sendSightMessageR( videoPath ) {

        console.log(videoPath);

        var txt = $api.byId(‘sendtxt‘).value;

        var uid = $api.byId(‘uid‘).value;

        console.log(uid);

        rong.sendSightMessage({

            conversationType: ‘PRIVATE‘,

            targetId: uid,

            thumbPath: ‘fs://picture/dog1.png‘,

            sightPath: videoPath,   //videoPath,

            //sightPath: ‘fs://picture/666.mp4‘,   //videoPath,

            duration: 5,

            extra: ‘‘

        }, function(ret, err) {

            if (ret.status == ‘prepare‘)

                console.log(JSON.stringify(ret.result.message));

            else if (ret.status == ‘progress‘)

                    console.log(ret.result.progress );

            else if (ret.status == ‘success‘)

                console.log(ret.result.message.messageId);

            else if (ret.status == ‘error‘)

                console.log(err.code);

        });

    }

    //发送文件

    function sendFileMessageR( filePath ) {

        var uid = $api.byId(‘uid‘).value;

        console.log(filePath);

        rong.sendFileMessage({

            conversationType: ‘PRIVATE‘,

            targetId: uid,

            filePath: filePath,

            extra: ‘‘

        }, function(ret, err) {

            if (ret.status == ‘prepare‘)

                console.log(JSON.stringify(ret.result.message));

            else if (ret.status == ‘progress‘)

                console.log(ret.result.progress );

            else if (ret.status == ‘success‘)

                console.log(ret.result.message.messageId);

            else if (ret.status == ‘error‘)

                console.log(err.code);

        });

    }

    //发送信息

    function sendmsg() {

        var txt = $api.byId(‘sendtxt‘).value;

        var uid = $api.byId(‘uid‘).value;

        rong.sendTextMessage({

            conversationType: ‘PRIVATE‘,

            targetId: uid,

            text: txt,

            extra: ‘‘

        }, function(ret, err) {

            if (ret.status == ‘prepare‘)

                api.alert({

                    msg: JSON.stringify(ret.result.message)

                });

            else if (ret.status == ‘success‘)

                api.alert({

                    msg: ret.result.message.messageId

                });

            else if (ret.status == ‘error‘)

                api.alert({

                    msg: err.code

                });

        });

    }

    //消息监听

    function msglisten() {

        rong.setOnReceiveMessageListener(function(ret, err) {

            // api.alert({ msg: JSON.stringify(ret.result.message) });

            alert(‘收到了消息‘);

            console.log(JSON.stringify(ret.result));

            // setInterval(function () {

            //   rong.getConnectionStatus(function(ret, err) {

            //       console.log( ret.result.connectionStatus );

            //   })

            // }, 2000);

            // var receivetxtSTR = ret.result.message.content.text;

            // tid = ret.result.message.targetId

            // console.log(tid);

            // $api.byId(‘receivetxt‘).value = receivetxtSTR;

            // rong.sendReadReceiptMessage({

            //     targetId: tid

            // }, function(ret) {

            //     api.alert({

            //         msg: JSON.stringify(ret) + ‘我已读了‘

            //     });

            // });

        })

    }
</script>

</html>

复制代码

原文地址:https://www.cnblogs.com/APICloud/p/12207154.html

时间: 2024-10-10 04:06:24

APICloud开发者进阶之路 | UIPickerView 模块示例demo的相关文章

APICloud开发者进阶之路 |audioRecorder录音模块Demo

本文出自APICloud官方论坛   audioRecorder 模块通过封装系统的录音接口,能够快速的为开发者提供一个完整的录音功能. 该模块提供Android和iOS版本,录音方式及录制的音频格式也依赖于相关系统. 需要注意的是:安卓跟ios所支持的格式是不一样的,最好选择aac格式, 如果不选择acc格式你们就需要判断此设备是ios还是安卓,(api.systemType使用这个可以获取是安卓还是ios) 然后根据设备不同去配置对应录制音频格式. Android系统支持的录制音频格式为:a

APICloud开发者进阶之路|[ 模块教程 ] UIAlbumBrowser模块效果展示

UIAlbumBrowser是一个本地媒体资源扫描器,在Android平台上可扫描整个设备的资源,iOS仅扫描相册内部的资源.注意本模块在iPhone设备上仅支持iOS8.0及更高版本.模块文档地址:https : //docs.apicloud.com/Client-API/UI-Layout / UIAlbumBrowser 本例展示了常用的imagePicker()接口和open()接口.imagePicker()只能选择照片,可以点击相机按钮进行拍摄.open()接口可以选择照片或视频,

APICloud开发者进阶之路 | 超级实用技巧

金秋9月,脑海还是北京的"中非合作蓝"!今天按照惯例,柚子君还是要督促大家充充电的! 本周<30天,App开发从0到1>将要给大家分享第十章超级实用技巧,我们精选了其中的一个章节--地图模块的实用扩展:在地图上添加自定义按钮,一起来学习吧. 主要内容本章将向读者介绍一些开发中常用的功能和技巧 , 这些技巧涉及应用开发的方方面面. 示例 1 讲解了屏幕动态适配的方法,是开发 App 必须具备要掌握的技能之一:示例 2.示例 7.示例 9 -示例 11 具体讲解了一些常见的业务

APICloud开发者进阶之路|了解APICloud 应用设计思想

大家好!上期我们介绍了<30天,App开发从0到1>一书中app的开发流程,本期我们继续第二章的精彩分享: 主要内容: 教会大家使用APICloud技术实现app的界面布局和静态页面的缩写. 学习目标: 1.学习 APICloud app 的启动过程,了解 confi g.xml 配置文件. 2.了解 APICloud 五大布局组件和混合渲染模式. 3.了解 API 对象和前端框架. 4.学习如何进行屏幕适配和状态栏处理. 本章从APICloud app执行流程.应用设计思想.界面和导航.搭建

APICloud开发者进阶之路 |iOS修改entitlements文件

本文出自APICloud官方论坛, 感谢论坛版主 技术咨询-Kenny 的分享.   一.概述iOS原生开发中若要实现某些特殊功能,如使用HealthKit.实现Universal Links等.需要在工程target的Capabilities选项中打开对应的功能开关,而最终的配置都会写入到工程中的一个.entitlements文件中,下面我们提供了配置该entitlements文件的方法. 二.配置.entitlements是xml格式的文件,新建一个文本文件,修改内容后命名为UZApp.en

APICloud开发者进阶之路 |纯手工编写日程表功能

最近看论坛内关于极光推送的问题有很多,本想写一个关于极光的详细教程的,无奈已经有很多大牛分享过了,所以只得纯手工写了一个日程表,可以以周为单位左右切换,适用于医疗.教育等方向的app,先看下效果图. 再看一下代码截图 自动识别当前日期,并计算出本周的起始日期,通过左右按钮切换上一周和下一周,并同步更换日程,日程可点击激活高亮,至于激活显示什么样的内容你们自己根据实际功能要求处理吧. 原文地址:https://blog.51cto.com/9334358/2404941

UIPickerView 模块示例demo

UIPickerView 此模块封装了一个可以从屏幕底部向上弹出的 action 选择器(3D滚轮效果).开发者可自定义选择器的样式,包括:导航条颜色.高度,导航条上左右按钮大小.位置.背景色.title,选择器内容区域的背景.高度.字体大小颜色等样式.同时本模块支持自定义是否显示遮罩层及其样式,可监听用户点击遮罩层.导航条左右按钮等事件, 并在监听的事件里自行设置显示/隐藏(show/hide)模块的操作,灵活,多样. 亮点:滚动流畅,自定义数据源,丰富的配置参数. 效果图: open示例代码

acmPush模块示例demo

原文地址:https://blog.51cto.com/9334358/2426776

前端工程师的进阶之路

这篇文章收藏在笔记里面有几年了,原文作者无从考究了,侵删! 最近再翻出来看,依然觉得受益匪浅.这次整理分享出来,希望对大家有所启示. 背景 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧: 如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧. 前言 所谓的天才,只不过是比平常人更快的掌握技能.完成工作罢了:只要你找到了正确的方向,并辅以足够的时间,你一样能够踏上成功彼岸. 本文将