HBuilder创建app 3
一.Audio 模块实现开启手机摄像头
基于html5 plus
http://www.html5plus.org/doc/zh_cn/audio.html
栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
}
var scan = null;
function onmarked( type, result ) {
var text = '未知: ';
switch(type){
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
alert( text+result );
}
function startRecognize() {
scan = new plus.barcode.Barcode('bcid');
scan.onmarked = onmarked;
}
function startScan() {
scan.start();
}
function cancelScan() {
scan.cancel();
}
function setFlash() {
scan.setFlash();
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
#bcid {
background:#0F0;
height:480px;
width:360px;
}
</style>
</head>
<body >
<input type='button' onclick='startRecognize()' value='创建扫码控件' />
<input type='button' onclick='startScan()' value='开始扫码' />
<input type='button' onclick='cancelScan()' value='取消扫码' />
<input type='button' onclick='setFlash()' value='开启闪光灯' />
<div id= "bcid"></div>
<input type='text' id='text'/>
</body>
</html>
自定义:
scanQR.HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">扫描玩具二维码</h1>
</header>
<div class="mui-content">
<div id="bcid" style="width: 100%;height: 750px;"></div>
</div>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
var scan = null;
mui.plusReady(function () {
scan = new plus.barcode.Barcode("bcid");
scan.onmarked = inmarked; #识别二维码
scan.start(); #开启识别扫描
inmarked(0,"d602f74c6a60fc1e9f60b20a190eeed7"); #在不开启摄像头的情况下,扫描二维码的是内容存储的内容
}) function inmarked(type,code){
// alert(type +":"+ code)
mui.post(window.serv+ '/validate_code',{
device_key:code #{"device_key":"1eae197f4f4abe105c40bcaa7438d1f2"},
},function(data){
if(data.code == 0){
//打开绑定玩具流程 创建玩具
mui.openWindow({
url:"bind_toy.html",
id:"bind_toy.html",
extras:data.data # 获取的数据 {"code":0,"data":{"device_key":"1eae197f4f4abe105c40bcaa7438d1f2"},"msg":"设备已授权,开启绑定"}
}) }else if(data.code==2){
//扫描的二维码信息异常
mui.toast(data.msg);
mui.back();
}else if(data.code==1){
//神秘代码
}
},'json'
);
}
</script>
</body>
</html>
在上一步扫码后,进入玩具的绑定界面
进行玩具信息录入
bind_toy.html
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css" />
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">绑定玩具</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>玩具名称</label>
<input type="text" id="toy_name" class="mui-input-clear" placeholder="给玩具取个名字">
</div>
<div class="mui-input-row">
<label>宝宝名称</label>
<input type="text" id="baby_name" class="mui-input-clear" placeholder="玩具小主人的名字">
</div>
<div class="mui-input-row">
<label>对您的称呼</label>
<input type="text" id="remark" class="mui-input-clear" placeholder="小主人对您的称呼">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" id='bind_btn'>绑定</button>
<button type="button" class="mui-btn mui-btn-red mui-action-back">取消</button>
</div>
</form>
</div> </body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
var Sdata = null;
mui.plusReady(function() {
Sdata = plus.webview.currentWebview();#获取到扫描到数据
})
document.getElementById('bind_btn').addEventListener('tap', function() {
mui.post(window.serv + '/bind_toy', {
//1.device_key
device_key: Sdata.device_key,{"device_key":"1eae197f4f4abe105c40bcaa7438d1f2"},
//2.formdata
toy_name: document.getElementById("toy_name").value,
baby_name: document.getElementById("baby_name").value,
remark: document.getElementById("remark").value,
//3.user_id
user_id: window.localStorage.getItem("user") }, function(data) {
if(data.code == 0) {
mui.openWindow({
url: "toy_manager.html",
id: "toy_manager.html",
createNew:true #刷新页面
})
}
}, 'json');
})
</script> </html>
后端存储数据
@devices.route("/bind_toy",methods=['POST'])
def bind_toy():
# 1.device_key 2.fromdata 3. who bind toy
toy_info = request.form.to_dict()
print(toy_info)
chat_window = MongoDB.chats.insert_one({"user_list":[],"char_list":[]})
user_info = MongoDB.xujian.find_one({"_id":ObjectId(toy_info["user_id"])})
toy_info["bind_user"] = toy_info.pop("user_id")
toy_info["avatar"] = "toy.jpg"
toy_info["firend_list"] = [
{
"firend_id":toy_info["bind_user"],
"firend_name":user_info.get("nickname"),
"firend_nick":toy_info.pop("remark"),
"firend_avatar":user_info.get("avatar"),
"firend_type":"app",
"firend_chat":str(chat_window.inserted_id)
}
]
toy = MongoDB.toys.insert_one(toy_info)
user_info["bind_boy"].append(str(toy.inserted_id))
user_add_toy={
"firend_id": str(toy.inserted_id),
"firend_name": toy_info.get("toy_name"),
"firend_nick": toy_info.get("baby_name"),
"firend_avatar": toy_info.get("avatar"),
"firend_type": "toy",
"firend_chat": str(chat_window.inserted_id)
}
user_info["friend_list"].append(user_add_toy)
MongoDB.xujian.update_one({"_id":ObjectId(toy_info["bind_user"])}, {"$set":user_info})
MongoDB.chats.update_one({"_id":chat_window.inserted_id},{"$set":{"user_list":[
str(toy.inserted_id),str(user_info.get("_id"))
]}})
RET["code"] = 0
RET["msg"] = "绑定玩具成功"
RET['data'] = {}
return jsonify(RET)
绑定好用户的机器人后,在toy_manager.html显示
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css" />
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">管理我的玩具</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="toy_list">
<li class="mui-table-view-cell mui-media">
<a id="add_bind">
<img class="mui-media-object mui-pull-left" src="data:image/add.jpg">
<div class="mui-media-body">
添加绑定玩具
<p class="mui-ellipsis">点击此处开始扫描玩具二维码</p>
</div>
</a>
</li>
</ul>
</div> </body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init(); mui.plusReady(function () {
mui.post(window.serv + '/toy_list',{ #通过post请求返回掌控的机器人
user_id:window.localStorage.getItem("user")#发送user 信息
},function(data){
console.log(JSON.stringify(data));
for (var i = 0; i < data.data.length; i++) {
create_item(data.data[i]);
}
},'json'
);
}) document.getElementById('add_bind').addEventListener('tap', function() {
mui.openWindow({
url: "scanQR.html",
id: "scanQR.html",
})
}) function create_item(content) {
var li = document.createElement("li");
li.className = "mui-table-view-cell mui-media";
var a = document.createElement("a");
a.onclick = function() { }
var img = document.createElement("img");
img.className = "mui-media-object mui-pull-left";
img.src = "avatar/" + content.avatar;
var div = document.createElement("div");
div.className = "mui-media-body";
div.innerText = content.baby_name;
var p = document.createElement("p");
p.className = "mui-ellipsis";
p.innerText = content.toy_name; li.appendChild(a);
a.appendChild(img);
a.appendChild(div);
div.appendChild(p); document.getElementById("toy_list").appendChild(li);
}
</script> </html>
这样,用户就可以查看他绑定的机器人啦
进行用户间的聊天chats
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
<link rel="stylesheet" type="text/css" href="css/chat.css" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">xxx话框</h1>
</header>
<div class="mui-content">
<div class="leftd">
<span class="leftd_h">
<img src="avatar/toy.jpg" />
</span>
<div class="left speech">
点击播放消息
</div>
</div>
<div class="rightd">
<span class="rightd_h">
<img src="avatar/toy.jpg" />
</span>
<div class="right speech">
点击播放消息
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="talk">
<span class="mui-icon mui-icon-speech"></span>
<span class="mui-tab-label">按住说话</span>
</a>
</nav> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init({
gestureConfig: {
doubletap: false, //默认为false
longtap: false, //默认为false
swipe: false, //默认为true
drag: false, //默认为true
hold: true, //默认为false，不监听
release: true //默认为false，不监听
}
});
var reco =null
mui.plusReady(function () { }) //void recorder.record( option, successCB, errorCB );
// 录音操作
//var r = plus.audio.getRecorder();
//r.record( {filename:"_doc/audio/"}, function () {
// alert( "Audio record success!" );
//}, function ( e ) {
// alert( "Audio record failed: " + e.message );
//} );
document.getElementById('talk').addEventListener('hold',function () { #在按住的时候通过audio调用麦克风监听语音
reco = plus.audio.getRecorder();
reco.record({
filename: "_doc/audio/", #filename 文件路径
format: "amr" #format 文件类型
}, function(path) {
console.log(path);
createUpload(path); #path 文件存储路径
});
}) document.getElementById('talk').addEventListener('release',function () { #离开时停止录制
reco.stop();
}) function createUpload(path) {
var task = plus.uploader.createUpload(window.serv + "/uploader", {
method: "POST"
},
function(t, status) {
// 上传完成
if(status == 200) {
alert("Upload success: " + t.url);
} else {
alert("Upload failed: " + status);
}
}
);
task.addFile(path, { #上传文件
key: "recorder"
});
task.addData("key", "value"); $附上日期 task.start();
} </script>
</html>
后端生成对话文件
@gsa.route("/uploader",methods=["POST"])
def uploader():
audio = request.files.get("recorder")
path = os.path.join(chats_path,audio.filename)
audio.save(path)
os.system(f"ffmpeg -i {path} {path}.mp3") #通过ffmpeg强制转变格式
return ""
HBuilder创建app 3的更多相关文章
- HBuilder创建app
一.app登录注册实现 1.首先进行布局,mhead,mbody 在app index.html内创建一个 a链接通过mui.openWindow跳到登录页面 <a class="mu ...
- HBuilder创建app 基础
一.了解HBuilder HBuilder内封装了大量的书籍,极大方便了使用 官方文档: http://dev.dcloud.net.cn/mui/ui/ 关于布局: mhead 表头.mbody ...
- springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装
springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...
- Hbuilder开发app实战-识岁03-文件上传
前言 做app不得不谈的问题就是文件上传.用hbuilder开发app让上传变的非常easy. Uploader Uploader模块管理网络上传任务,用于从本地上传各种文件到server,并支持跨域 ...
- HBuilder开发App教程06-首页
实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目 打开HBuilder,在项目管理器中右键--新建 ...
- CASE函数 sql server——分组查询(方法和思想) ref和out 一般处理程序结合反射技术统一执行客户端请求 遍历查询结果集，update数据 HBuilder设置APP状态栏
CASE函数 作用: 可以将查询结果集的某一列的字段值进行替换 它可以生成一个新列 相当于switch...case和 if..else 使用语法: case 表达式/字段 when 值 then ...
- HBuilder开发App教程05-滴石和websql
滴石 介绍 滴石是用HBuilder开发的一款计划类app. 用到HBuilder,mui.nativejs以及h5一些特性. 预期 眼下仅仅开发到todolist级别, 以后计划做成日计划,月计划, ...
- 【mui webAPP】HBuilder创建的iOS平台设置沉浸式状态栏
应用占用全屏区域,而系统状态栏需要预留出系统状态栏高度. HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:打开应用的manifest.json文件,切换到代码视图,在plu ...
- 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付
前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...
随机推荐
- day50_9_11 bootstarp使用
一.下载官网. https://www.bootcss.com/ 使用3版本 https://www.bootcdn.cn/ CDN搜索网址. 配置代码: <link rel="sty ...
- Paper | Spatially Adaptive Computation Time for Residual Networks
目录 摘要 故事 SACT机制 ACT机制 SACT机制 实验 发表在2017年CVPR. 摘要 在图像检测任务中,对于图像不同的区域,我们可以分配不同层数的网络予以处理. 本文就提出了一个基于Res ...
- Java 基础系列：异常
Java 中的异常(Exception)又称为例外,是一个在程序执行期间发生的事件,它中断正在执行的程序的正常指令流.为了能够及时有效地处理程序中的运行错误,必须使用异常类. 1. 异常类型 Thro ...
- Redis系列1——概述
1. 简介 Redis,key-value内存存储的数据库,全称“”Remote Dictionary Service(Sever)“”,默认端口号:6379 Redis是一个开源的使用ANSI C语 ...
- 使用nexus搭建maven仓库（maven 本地私服）
我们在使用maven的时候,对于项目所依赖的jar包,maven默认会在中央仓库下载jar包,到本地的磁盘目录(如果没有配置则是用户目录下/.m2/repository文件夹下).如果公司内部搭了一个 ...
- 源码详解系列(五) ------ C3P0的使用和分析（包括JNDI）
简介 c3p0是用于创建和管理连接,利用"池"的方式复用连接减少资源开销,和其他数据源一样,也具有连接数控制.连接可靠性测试.连接泄露控制.缓存语句等功能.目前,hibernate ...
- 【前端知识体系-JS相关】深入理解MVVM和VUE
1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...
- 基于Spark的电影推荐系统（推荐系统~7）
基于Spark的电影推荐系统(推荐系统~7) 22/100 发布文章 liuge36 第四部分-推荐系统-实时推荐 本模块基于第4节得到的模型,开始为用户做实时推荐,推荐用户最有可能喜爱的5部电影. ...
- Linux用户和权限——管理用户和用户组的命令
Linux用户和权限——管理用户和用户组的命令 摘要:本文主要学习了在Linux系统中管理用户和用户组的命令. useradd命令 useradd命令可以用来创建新用户. 基本语法 useradd [ ...
- DRF简易了解
Drf框架 一丶API接口 # 为了在团队内部形成共识.防止个人习惯差异引起的混乱,我们需要找到一种大家都觉得很好的接口实现规范,而且这种规范能够让后端写的接口,用途一目了然,减少双方之间的合作成本. ...