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

Posted apicloud

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

复制代码

以上是关于APICloud开发者进阶之路 | UIPickerView 模块示例demo的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

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

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

APICloud开发者进阶之路| H5Callmap 模块使用 demo