mui笔记
1、关闭当前页面执行上一个页面的方法
var preview = plus.webview.currentWebview().opener() //获取当前窗口的创建者,即A preview.evalJS("preference.refreshAttensionInfo('author')") //执行父窗口中的方法 A中的showAG方法 plus.webview.currentWebview().close()
2、长按和释放
// 语音 长按 document.getElementById('app-voice').addEventListener('longtap', function () { console.log('触发长按') }) // 语音 松开 document.getElementById('app-voice').addEventListener('touchend', function () { console.log('释放长按') })
3、与环信交互
/** * @author mona * @date 2017-11-10 * @desc 聊天 */ /*var preview = plus.webview.currentWebview().opener(); //获取当前窗口的创建者,即A preview.evalJS("preference.refreshAttensionInfo('author')"); //执行父窗口中的方法 A中的showAG方法 plus.webview.currentWebview().close();*/ /** * 功能需求:语音,文字,图片,拍照,视频 */ var apiURL = WebIM.config.apiURL var conn = null var textSending = false var appkey = WebIM.config.appkey var userInfo = JSON.parse(window.localStorage["userInfo"]) //{fullName:'editor5', id:'5', status:'1', imStatus: '1'}//JSON.parse(window.localStorage["userInfo"]) var curUserId = userInfo.id var userName = userInfo.fullName var chatId = null console.log('userInfo=>', window.localStorage["userInfo"]) var conn = new WebIM.connection({ isMultiLoginSessions: WebIM.config.isMultiLoginSessions, https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:', url: WebIM.config.xmppURL, heartBeatWait: WebIM.config.heartBeatWait, autoReconnectNumMax: WebIM.config.autoReconnectNumMax, autoReconnectInterval: WebIM.config.autoReconnectInterval, apiUrl: WebIM.config.apiURL, isAutoLogin: true }); // 允许发送的文件类型 var allowSendFileType = { img: {'jpg': true, 'gif': true, 'png': true, 'bmp': true, 'mp3': true, 'jpeg': true}, audio: {"wav": true, "aac": true,"amr": true} } // 发送消息的类型 var renderFileType = {text: 0, img: 1, audio: 2, video: 3, other: 4} // listern,添加回调函数 conn.listen({ onOpened: function (message) {}, onTextMessage: function (message) { console.log('接收到的文本消息', JSON.stringify(message)) /*var msgData = { "id":"400891204578836964", "type":"chat", "from":"33292", "to":"5", "data":"[(H)]", "ext":{ "weichat":{"originType":"webim"}}, "error":false, "errorText":"", "errorCode":""}*/ var msgData = message var type = 'text' var msg = msgData.data var isMe = msgData.from == curUserId appIM.renderMsg(isMe, type, msg) }, //收到文本消息 onEmojiMessage: function (message) {}, //收到表情消息 onPictureMessage: function (message) {}, //收到图片消息 onCmdMessage: function (message) {}, //收到命令消息 onAudioMessage: function (message) {}, //收到音频消息 onLocationMessage: function (message) {},//收到位置消息 onFileMessage: function (message) { var data = {"id":"402304991731122668", "type":"chat", "from":"5", "to":"33292", "url":"https://a1.easemob.com/1132170906115603/cicc-web/chatfiles/4bfb7c70-ce69-11e7-a8fa-859277cad3a4", "secret":"S_t8es5pEeeJaYNzYP_tq3cZ672kOwVwHPvnSxsRimSjUsms", "filename":"IMG_20150501_144334.jpg", "file_length":0, "accessToken":"YWMtvrx3TM5jEeewTaFnWT3q9v84udCS0BHnpQ3LrkoxvaoEMWFgpDAR55Tmb5j0p_DlAwMAAAFf3GhTbwBPGgCX-iAcDZmkIaTJOET8S2b1QY0FWFrGP6VN-_Hy2FnE3A", "ext":{ "weichat":{"originType":"webim"}}, "error":false, "errorText":"", "errorCode":""} try { var lastDotIndex = message.filename.lastIndexOf('.') var ext = message.filename.substring(lastDotIndex + 1) var type = null if (ext in allowSendFileType['img']) { type = 'img' } else if (ext in allowSendFileType['audio']) { type = 'audio' } var msg = {fileUrl: message.url} var isMe = message.from == curUserId appIM.renderMsg(isMe, type, msg) console.log(type, type, JSON.stringify(msg)) } catch (e) { console.log('e', JSON.stringify(e)) } }, //收到文件消息 onVideoMessage: function (message) {}, //收到视频消息 onPresence: function (message) {}, //收到联系人订阅请求(加好友)、处理群组、聊天室被踢解散等消息 onRoster: function (message) {}, //处理好友申请 onInviteMessage: function (message) {}, //处理群组邀请 onOnline: function () {}, //本机网络连接成功 onOffline: function () {}, //本机网络掉线 onError: function (message) {}, //失败回调 onBlacklistUpdate: function (list) {} }); var appIM = { // 登录时的时间戳和登录类型 password/token validTabs: function () { if (!WebIM.config.isMultiLoginSessions || !window.localStorage) { return true } else { Demo.userTimestamp = new Date().getTime() var key = 'easemob_' + Demo.user var val = window.localStorage.getItem(key) var count = 0 var oneMinute = 60 * 1000 if (val === undefined || val === '' || val === null) { val = 'last' } val = Demo.userTimestamp + ',' + val var timestampArr = val.split(',') var uniqueTimestampArr = [] for (var o in timestampArr) { if (timestampArr[o] === 'last') continue; uniqueTimestampArr[timestampArr[o]] = 1 } val = 'last' for (var o in uniqueTimestampArr) { if (parseInt(o) + oneMinute < Demo.userTimestamp) { continue } count++; if (count > this.state.pageLimit) { return false } val = o + ',' + val } window.localStorage.setItem(key, val) return true } }, // 注册 param.username param.password regist: function (param) { var _this = this var user = param.username var pass = param.password if (user == '' || pass == '') { console.log("用户名/密码/昵称 不能为空") return } var options = { username: user, password: pass, nickname: '', appKey: appkey, apiUrl: apiURL, success: function () { console.log('注册成功') _this.login(param) }, error: function (e) { console.log(JSON.stringify(e)) } } conn.registerUser(options) }, // 登录 param.username param.password login: function (param) { var name = param.username var pwd = param.password var options = { apiUrl: WebIM.config.apiURL, user: name, pwd: pwd, appKey: WebIM.config.appkey, success: function () { console.log('登录成功') }, error: function (e) { console.log('登录失败==》', JSON.stringify(e)) } }; conn.open(options); }, // 表情数据 facesData: function () { var data = {path: 'resource/im/faces/', map: { '[):]': 'ee_1.png', '[:D]': 'ee_2.png', '[;)]': 'ee_3.png', '[:-o]': 'ee_4.png', '[:p]': 'ee_5.png', '[(H)]': 'ee_6.png', '[:@]': 'ee_7.png', '[:s]': 'ee_8.png', '[:$]': 'ee_9.png', '[:(]': 'ee_10.png', '[:\'(]': 'ee_11.png', '[:|]': 'ee_18.png', '[(a)]': 'ee_13.png', '[8o|]': 'ee_14.png', '[8-|]': 'ee_15.png', '[+o(]': 'ee_16.png', '[<o)]': 'ee_12.png', '[|-)]': 'ee_17.png', '[*-)]': 'ee_19.png', '[:-#]': 'ee_20.png', '[:-*]': 'ee_22.png', '[^o)]': 'ee_21.png', '[8-)]': 'ee_23.png', '[(|)]': 'ee_24.png', '[(u)]': 'ee_25.png', '[(S)]': 'ee_26.png', '[(*)]': 'ee_27.png', '[(#)]': 'ee_28.png', '[(R)]': 'ee_29.png', '[({)]': 'ee_30.png', '[(})]': 'ee_31.png', '[(k)]': 'ee_32.png', '[(F)]': 'ee_33.png', '[(W)]': 'ee_34.png', '[(D)]': 'ee_35.png' } } return data }, replaceTextMsg: function (msg) { var _this = this var faces = _this.facesData().map var path = 'resource/im/faces/' var curMsg = (msg).replace(/\[[^\]]+\]/g, function (it) { if (faces[it]) { return '<img src="'+path+ faces[it]+'"/>' } return it }) return curMsg }, /** * @param isMe {Boolean} * @param msg {Object} | msg.name {String} | msg.info [{Object} | {String}] */ renderMsg: function (isMe, type, msg) { var _this = this var h = '' var liDom = document.createElement('li') var typeDom = '' if (type == 'text') { var curMsg = _this.replaceTextMsg(msg) typeDom = curMsg } else if (type == 'img') { console.log('img消息发送') typeDom = '<img src="'+ msg.fileUrl +'" style="max-width: 200px; height: auto;"/>' } else if (type == 'video') { typeDom = '<video class="" controls preload="auto" width="100%" height="auto"' + '<source src="'+msg.fileUrl+'" type="video/'+msg.fileExt+'">' '<p class="vjs-no-js">\n' + '您的浏览器不支持video'+ '<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>\n' + '</p>\n' + '</video>' } else if (type == 'audio') { console.log('msg.fileUrl==>', msg.fileUrl) typeDom = '<audio src="'+ msg.fileUrl+'" controls="controls" style="width: 150px"></audio>' } if (isMe) { h += '<div class="chat-list flex-container-mid main-chat">'+ '<div class="chat-cont chat-cont-right">'+ typeDom+'</div>'+ '<div class="head-icon">'+ '<img src="../../images/main/txl.png" alt="" />'+ '</div>'+ '</div>' } else { h += '<div class="chat-list flex-container-mid">'+ '<div class="head-icon">'+ '<img src="../../images/main/txl.png" alt="" />'+ '</div>'+ '<div class="chat-cont chat-cont-left">'+ typeDom +'</div>'+ '</div>' } liDom.innerHTML = h var ulDom = document.getElementById('contact-ct').querySelector('ul') console.log('文件发送时生成的字符串dom==>', h) ulDom.appendChild(liDom) console.log('ulDom', ulDom.innerHTML) }, // 获取文件地址 getObjectURL: function (file) { var url = null console.log(file) if (window.createObjectURL != undefined) { // basic console.log(1) url = window.createObjectURL(file) } else if (window.URL != undefined) { // mozilla(firefox) console.log(2) url = window.URL.createObjectURL(file) } else if (window.webkitURL != undefined) { // webkit or chrome console.log(3) url = window.webkitURL.createObjectURL(file) } return url } } // app.js // "{\"deadTime\":1516446016000, // "email":"editor4@cicc.com", // "freeCategoryIds\":\"0\", // \"fullName\":\"editor4\", // \"id\":4,\"imRights\":1, // \"imStatement\":0, // \"imStatus\":1,\"imTip\":1, // \"level\":\"B\", // \"mobile\":\"13444444444\", // \"status\":1, // \"type\":2}" // main.js{"code":200,"data":{"hasComments":0,"message":0,"ciccTripStatus":true,"nameAndImg":{"name":"editor4"}},"msg":"请求成功!"} function inArray( elem, arr, i ) { var len if ( arr ) { if (indexOf) { return indexOf.call(arr, elem, i) } len = arr.length; i = i ? i < 0 ? Math.max(0, len + i) : i : 0 for (; i < len; i++) { if (i in arr && arr[i] === elem) { return i } } } return -1 } var getFileUrlFn = function(file) { var uri = { url: '', filename: '', filetype: '', data: '' }; var fileObj = file if (!fileObj) { return uri; } try { if (window.URL.createObjectURL) { var u = fileObj uri.data = u uri.url = window.URL.createObjectURL(u) uri.filename = u.name || '' } var index = uri.filename.lastIndexOf('.') if (index != -1) { uri.filetype = uri.filename.substring(index + 1).toLowerCase() } return uri } catch (e) { throw e } } function convertBase64UrlToBlob(dataURI) { // convert base64 to raw binary data held in a string // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this var byteString = atob(dataURI.split(',')[1]); // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to an ArrayBuffer var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } //Old Code //write the ArrayBuffer to a blob, and you're done //var bb = new BlobBuilder(); //bb.append(ab); //return bb.getBlob(mimeString); //New Code console.log('mimeString==>', mimeString) return new Blob([ab], {type: mimeString}); } function getFileUrl1 (fileObj, fileData) { var uri = {url: '', filename: '', filetype: '', data: ''} if (!fileObj) return uri try { if (window.URL.createObjectURL) { uri.data = fileData; uri.url = window.URL.createObjectURL(fileData) uri.filename = fileObj.name || '' uri.filesize = fileObj.size } var index = uri.filename.lastIndexOf('.') if (index != -1) { uri.filetype = uri.filename.substring(index + 1).toLowerCase() } return uri } catch (e) { throw e } } var imAction = { init: function () { var imStatus = userInfo.imStatus console.log('imStatus==>', imStatus) //var id = userInfo.id console.log('') if (imStatus == 0) { appIM.regist({username: curUserId, password: '111111'}) } else if (imStatus == 1) { appIM.login({username: curUserId, password: '111111'}) } // appIM.login({'username': curUserId, 'password': '111111'}) }, /** * @desc 发送文件消息 * @param {Object} param = {to: to, isMe: is_me, fileData} * to 是发送对象的id * fileId file input 的id * isMe 发送消息的人是否是我自己 * */ //{"size":136531, // "type":"image/jpeg", // "name":"IMG_0597.JPG", // "lastModifiedDate":"2017-11-15T07:24:13.737Z", // "fullPath":"/var/mobile/Containers/Data/Application/D2D117C5-B0A0-4A20-BA04-1B795C9C3A51/Documents/Pandora/apps/HBuilder/doc/camera/IMG_0597.JPG"} sendFile: function (param) { var id = conn.getUniqueId(); // 生成本地消息id var msg = new WebIM.message('file', id) // 创建文件消息 var file = param.fileData var fileName = file.filename var fileSize = file.filesize var fileType = file.filetype var uploadFiledata = null var url = null var curRenderType = param.type var allowType = allowSendFileType[param.type] var msgType = renderFileType[param.type] var fileUuid = null var shareSecret = null console.log('msgType==>', msgType) console.log('file==>', JSON.stringify(file)) if (fileType in allowType) { var option; option = { apiUrl: WebIM.config.apiURL, file: file, to: param.to, // 接收消息对象 roomType: false, chatType: 'singleChat', onFileUploadError: function () { // 消息上传失败 console.log('消息上传失败' + 'onFileUploadError') console.log('arguments==>', JSON.stringify(arguments)) }, onFileUploadComplete: function (data) { // 消息上传成功 url = ((location.protocol != 'https:' && WebIM.config.isHttpDNS) ? (Demo.conn.apiUrl + data.uri.substr(data.uri.indexOf("/", 9))) : data.uri) + '/' + data.entities[0].uuid; console.log('消息上传成功', 'onFileUploadComplete') console.log('上传成功返回data==>', JSON.stringify(data)) console.log('发送文件成功后生成的文件地址==》', url) uploadFiledata = data fileUuid = data.entities[0].uuid shareSecret = data.entities[0]['share-secret'] }, success: function () { // 消息发送成功 console.log('消息发送成功 ===>', 'Success') console.log('文件发送成功回调函数的参数==》', JSON.stringify(arguments)) // 文件消息渲染到当前窗口 var msgId = arguments[1] var msgData = { fileName: fileName, fileSize: fileSize, fileUrl: url, fileExt: fileType } console.log('myRenderType', curRenderType) appIM.renderMsg(true, curRenderType, msgData) console.log('url==>', JSON.stringify(msgData)) try { // 文件消息保存到数据库 var param = { receiverId: chatId, msg: "", type: msgType, msgId: msgId, fileUrl: url, fileName: fileName, fileSize: fileSize, fileUuid: fileUuid, shareSecret: shareSecret, } console.log('文件参数', JSON.stringify(param)) imApi.saveMsg(param, function (state, data) { if (state) { console.log('保存文件消息成功~') return } console.log('文件保存失败', JSON.stringify(data)) }) } catch (e) { console.log('error==>', e) } }, flashUpload: WebIM.flashUpload }; msg.set(option); conn.send(msg.body); } else { mui.toast('发送文件失败!') } }, // 发送文本消息 sendText: function(param) { if (textSending) return textSending = true var msgVal = param.msg //param.msg.replace(/(^\s*)|(\s*$)/g, '') var to = param.to if (msgVal == null || msgVal.length == 0 || !to)return var id = conn.getUniqueId(); // 生成本地消息id var msg = new WebIM.message('txt', id); // 创建文本消息 msg.set({ msg: msgVal, // 消息内容 to: to, // 接收消息对象(用户id) roomType: false, success: function (id, serverMsgId) { console.log('send private text Success') // 显示在当前窗口 appIM.renderMsg(true, 'text', msgVal) // 保存进数据库 var saveParam = { receiverId: to, msg: msgVal, type: 0, illegalWords:'', documentId:'', documentTitle:'', msgId: serverMsgId } console.log('to', to) imApi.saveMsg(saveParam, function (state, data) { if (state) { console.log('文本信息保存成功~') } else { console.log('保存信息失败==》', JSON.stringify(data)) } }) }, fail: function(e){ console.log("Send private text error") } }) msg.body.chatType = 'singleChat' conn.send(msg.body) setTimeout(function() { textSending = false }, 1000) } } imAction.init() var vm = new Vue({ el: '#im-chat-box', data: { msgList: [], showSmil: false, showFile: false, showInput: true, showSend: false, // 发送按钮是否显示 chatName: '', showBig: false, // 点击显示大图 bigSrc: null, bigType: null, showVoiceTip: true, voiceTipContent:null }, created: function () { var _this = this this.setSmilContent() document.getElementById('smil-box').innerHTML = this.smilContent //imAction.init()// 用户注册/登录 }, mounted: function () { var _this = this var ui = { smilCt: document.getElementById('smil-control'), fileCt: document.getElementById('file-control'), inputMsg: document.getElementById('input-msg'), voiceCt: document.getElementById('voice-control'), contactBox: document.getElementById('contact-ct'), sendBtn: document.getElementById('send-text'), modalBody: document.getElementById('im-modal-body'), voiceBtn: document.getElementById('app-voice'), sendImgInput: document.getElementById('sendImgInput'), takePicBtn: document.getElementById('im-take-pic'), takeVideoBtn: document.getElementById('im-video'), footer: document.querySelector('footer'), h: document.querySelector('#h'), content: document.querySelector('.mui-content') } function msgTextFocus() { ui.inputMsg.focus(); setTimeout(function() { ui.inputMsg.focus(); }, 150); } // 以下实现状态切换 // 点击表情按钮 ui.smilCt.addEventListener('tap', function () { var curStatus = _this.setStatus(this, 'smil') _this.showInput = true if (curStatus == 'smil') { _this.showSmil = false } else { _this.showSmil = true _this.showFile = false _this.resetStatus('file') } _this.resetStatus('input') }) // 点击文件按钮 ui.fileCt.addEventListener('tap', function () { console.log('xx') var curStatus = _this.setStatus(this, 'file') _this.showInput = true if (curStatus == 'file') { _this.showFile = false } else { _this.showFile = true _this.showSmil = false _this.resetStatus('smil') _this.resetStatus('input') } _this.resetStatus('input') }) // input 获取光标 ui.inputMsg.addEventListener('focus', function () { _this.showFile = false _this.showSmil = false _this.resetStatus('smil') _this.resetStatus('file') }) // 语音图标点击 ui.voiceCt.addEventListener('tap', function () { var status = this.getAttribute('data-status') _this.showSmil = false _this.showFile = false if (status == 'input') { _this.showInput = false _this.showSend = false this.setAttribute('data-status', 'voice') } else { _this.showInput = true _this.resetStatus('input') document.getElementById('input-msg').focus() var inputVal = document.getElementById('input-msg').value if (inputVal != '') { _this.showSend = true } else { _this.showSend = false } } }) // 操作区失去焦点 ui.contactBox.addEventListener('tap', function () { ui.inputMsg.blur() _this.showFile = false _this.showSmil = false _this.resetStatus('file') _this.resetStatus('smil') }) /*ui.h.style.width = ui.inputMsg.offsetWidth + 'px'; var footerPadding = ui.footer.offsetHeight - ui.inputMsg.offsetHeight; ui.footer.style.height = (ui.h.offsetHeight + footerPadding) + 'px'; ui.content.style.paddingBottom = ui.footer.style.height;*/ // 点击表情 mui('#smil-box').on('tap', 'li', function () { var dataKey = this.getAttribute('data-key') var curVal = document.getElementById('input-msg').value document.getElementById('input-msg').value = curVal + dataKey if (document.getElementById('input-msg').value != '') { _this.showSend = true } }) var focus = false ui.inputMsg.addEventListener('tap', function(event) { ui.inputMsg.focus() setTimeout(function() { ui.inputMsg.focus() }, 0) focus = true setTimeout(function () { focus = false },1000) }, false) // 监听input标签的输入input onpropertychange ui.inputMsg.addEventListener('input', function () { var curVal = this.value if (curVal) { _this.showSend = true } else { _this.showSend = false } }) // 监听input标签的输入input onpropertychange ui.inputMsg.addEventListener('change', function () { var curVal = this.value if (curVal) { _this.showSend = true } else { _this.showSend = false } }) // 点击发送 ui.sendBtn.addEventListener('tap', function () { var val = document.getElementById('input-msg').value imAction.sendText({to: chatId, msg: val}) document.getElementById('input-msg').value = '' _this.showSend = false }) // 图片消息点击 mui('#contact-ct').on('tap', 'img', function () { var curBigSrc = this.getAttribute('src') console.log('curBigSrc', curBigSrc) _this.bigSrc = curBigSrc _this.showBig = true _this.bigType = 'img' }) // 点击大图背景 ui.modalBody.addEventListener('tap', function () { console.log('背景消失') _this.bigSrc = null _this.showBig = false _this.bigType = null }) mui.init({ gestureConfig: { tap: true, //默认为true doubletap: true, //默认为false longtap: true, //默认为false swipe: true, //默认为true drag: true, //默认为true hold: true, //默认为false,不监听 release: true //默认为false,不监听 } }) var old_back = mui.back mui.back = function(){ console.log('执行上一个界面的方法') var preview = plus.webview.currentWebview().opener() preview.evalJS("renderDom.init()") old_back() } mui.plusReady(function () { // 获取上一个窗口传递过来的chatName var curChatInfo= plus.webview.currentWebview() document.getElementById('chatName').innerHTML = curChatInfo.chatName chatId = curChatInfo.chatId // 渲染聊天列表 imApi.getCurrentChatInfo({id: chatId, page: 1}, function (state, data) { if (state) { console.log('chat-info-data-->', JSON.stringify(data)) var curD = data.data.imList var curData = [] mui.each(curD, function (i, item){ var obj = {} var me = item.senderId == curUserId obj['type'] = item.type + '' obj['isMe'] = me obj['name'] = me ? userName : item.senderAccount if (item.type == 0) { obj['msg'] = appIM.replaceTextMsg(item.msg) } else if (item.type == 1 || item.type == 2 || item.type == 3) { // type:0 文本, 1 图片,2 音频, 3视频, 4 文件 obj['fileUrl'] = item.fileUrl } console.log('receiverAccount',item.senderId) console.log('senderAccount',item.receiverId) curData.push(obj) }) setTimeout(function () { console.log('curData==>', JSON.stringify(curData)) console.log('innerh==>', document.getElementById('contact-ct').innerHTML) }, 3000) _this.msgList = curData } }) /*begin audio*/ // 创建audio 目录 plus.io.resolveLocalFileSystemURL('_doc/', function(entry){ entry.getDirectory('audio', {create:true}, function(dir){ gentry = dir clearHistoryAudio() // 页面初次加载清空语音记录 }, function(e){ console.log('Get directory "audio" failed: '+e.message); }) }, function(e){ console.log('Resolve "_doc/" failed: '+e.message); }) //清空录音目录 function clearHistoryAudio() { try { gentry.removeRecursively(function(){ console.log('清空audio本地历史记录操作成功!'); }, function(e){ console.log('清空audio本地历史记录操作失败:'+e.message); }); } catch (e) { console.log('清空目录失败===》', JSON.stringify(e)) } } // 语音 长按 ui.voiceBtn.addEventListener("touchstart", function(e) { console.log("start...."); e.preventDefault(); }); var r = plus.audio.getRecorder(); ui.voiceBtn.addEventListener('hold', function () { this.setAttribute('style', 'background-color: #ccc') console.log('正在录音==》') if (r == null) { alert("Device not ready!"); return; } r.record({filename: "_doc/audio/"}, function (path) { alert("Audio record success!" + path); var curPath = 'file://' + plus.io.convertLocalFileSystemURL(path) //将平台绝对路径转换成本地URL路径 console.log('curPath==>', curPath) try { plus.io.resolveLocalFileSystemURL(curPath, function (entry) { console.log('curPath==>', curPath) entry.file(function (file) { var myFileReader = new plus.io.FileReader() myFileReader.readAsDataURL(file) myFileReader.onloadend = function (e) { console.log('result==>', e.target.result) var imgBlob = convertBase64UrlToBlob(e.target.result) var myFile = getFileUrl1(file, imgBlob) imAction.sendFile({fileData: myFile, to: chatId, type: 'audio'}) } }) }) } catch (e) { console.log('e=>', JSON.stringify(e)) } }) }) // 音频预览 // 点击播放音频 /* mui('#contact-ct').on('tap', '.thisAudio', function () { var path = this.getAttribute('data-url') var audioObj = plus.audio.createPlayer(path) audioObj.play(function (){ console.log('语音播放完成') }) })*/ // 语音 松开 ui.voiceBtn.addEventListener('release', function () { this.setAttribute('style', 'background-color: #fff') console.log('松开录音') r.stop() }) mui('#contact-ct').on('tap', '.my-audio', function () { var myAudio = this.querySelector('audio') console.log('audio==>') console.log(myAudio) try { myAudio.play() } catch (e) { console.log('音频播放出错==>', JSON.stringify(e)) } }) /*end audio*/ // 发送相册图片 document.getElementById('im-pic').addEventListener('tap', function () { plus.gallery.pick( function(e){ var fileList = e.files mui.each(fileList, function (i, item) { plus.io.resolveLocalFileSystemURL(item, function( entry ) { entry.file( function(file){ var myFileReader = new plus.io.FileReader() myFileReader.readAsDataURL(file) myFileReader.onloadend = function (e) { var imgBlob = convertBase64UrlToBlob(e.target.result) var myFile = getFileUrl1(file, imgBlob) imAction.sendFile({fileData: myFile, to: chatId, type: 'img'}) } }) }, function ( e ) { alert( "Resolve file URL failed: " + e.message ) }) }) }, function (e) { console.log( "取消选择图片") },{filter:"image", multiple:true, maximum: 3, system:false, onmaxed: function () { //plus.nativeUI.alert('最多只能选择3张图片') mui.toast('最多只能选择3张图片') }}) }) // 拍照 ui.takePicBtn.addEventListener('tap', function () { _this.takePhoto() }) // 摄像 ui.takeVideoBtn.addEventListener('tap', function () { _this.takeVedio() }) }) }, destroyed: function () { }, methods: { // 填充表情图标 setSmilContent: function () { var data = appIM.facesData() var h = '<ul>' mui.each(data.map, function(i, item) { h += '<li data-key="'+i+'"><img src="'+data.path+item+'"></li>' }) h += '</ul>' this.smilContent = h }, // 设置状态属性 setStatus: function (target, type) { var status = target.getAttribute('data-status') if (status == 'keyboad') { if(type == 'smil') { target.setAttribute('data-status', 'smil') } else { target.setAttribute('data-status', 'file') } } else { target.setAttribute('data-status', 'keyboad') } return target.getAttribute('data-status') }, // 重置data-status属性 resetStatus: function (type) { if (type == 'file') { document.getElementById('file-control').setAttribute('data-status', 'file') } else if (type == 'smil') {0 document.getElementById('smil-control').setAttribute('data-status', 'smil') } else if (type == 'input') { document.getElementById('voice-control').setAttribute('data-status', 'input') } }, // 在系统相册中选取图片 getPic: { init: function () { console.log('getpic==>') } }, // 拍照 takePhoto: function () { var cmr = plus.camera.getCamera() var res = cmr.supportedImageResolutions[0] var fmt = cmr.supportedImageFormats[0] console.log("Resolution: "+res+", Format: "+fmt) try { cmr.captureImage(function(path){ alert( "Capture image success: " + path ) var curPath = 'file://' + plus.io.convertLocalFileSystemURL(path) console.log('curPath==>', curPath) plus.io.resolveLocalFileSystemURL(curPath, function( entry ) { entry.file( function(file){ var myFileReader = new plus.io.FileReader() myFileReader.readAsDataURL(file) myFileReader.onloadend = function (e) { var imgBlob = convertBase64UrlToBlob(e.target.result) var myFile = getFileUrl1(file, imgBlob) imAction.sendFile({fileData: myFile, to: chatId, type: 'img'}) } }) }, function ( e ) { alert( "Resolve file URL failed: " + e.message ) }) }, function( error ) { alert( "Capture image failed: " + error.message ) }, {resolution: res, format: fmt}) } catch (e) { console.log('拍照出错==>', JSON.stringify(e)) } }, // 摄像 takeVedio: function () { var cmr = plus.camera.getCamera() var res = cmr.supportedImageResolutions[0] var fmt = cmr.supportedImageFormats[0] console.log("Resolution: "+res+", Format: "+fmt) cmr.startVideoCapture( function( path ){ alert( "Capture video success: " + path ) var curPath = 'file://' + plus.io.convertLocalFileSystemURL(path) console.log('curPath==>', curPath) plus.io.resolveLocalFileSystemURL(curPath, function( entry ) { entry.file( function(file){ var myFileReader = new plus.io.FileReader() myFileReader.readAsDataURL(file) myFileReader.onloadend = function (e) { var imgBlob = convertBase64UrlToBlob(e.target.result) var myFile = getFileUrl1(file, imgBlob) imAction.sendFile({fileData: myFile, to: chatId, type: 'video'}) } }) }, function ( e ) { alert( "Resolve file URL failed: " + e.message ) }) },function( error ) { alert( "Capture video failed: " + error.message ) }, {resolution: res, format: fmt} ) // 拍摄10s后自动完成 setTimeout(function () { cmr.stopVideoCapture() }, 10000 ) } } })
感谢您的阅读,如果文中有任何技术上的错误或不妥,烦请留言指出,我会尽快更正。