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的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...
随机推荐
- python27期jquery：
JavaScript:(简称“JS”) 是一种轻量级的编程语言(ECMAscript5或6)是一种解释性脚本语言(代码不进行预编译)主要用来向HTML页面添加交互行为JavaScript 是互联网上最 ...
- 解决Python开发中，Pycharm中无法使用中文输入法问题
Pycharm是开发Python程序的利器,但有时会遇到无法输入中文的情况.表现为:在Ubuntu系统可以正常输入中文,却在Pycharm内写注释的时候,切换不出中文.下面演示如何解决此问题. 1.在 ...
- php 学习笔记之关于时区的那点事
科普一下什么是时区 众所周知,地球绕着太阳转的同时也会自转,因此同一时刻不同地区所接收到太阳照射的情况不同,所以有的地区是日出,有的地区是日落,还有的地区可能是黑夜. 既然地球上的不同地区时间不同,那 ...
- LeetCode98. 验证二叉搜索树
验证二叉搜索树 * * https://leetcode-cn.com/problems/validate-binary-search-tree/description/ * * algor ...
- flutter,SliverPersistentHeader实现Tab顶部吸附固定效果
直接上代码啦 import 'package:flutter/material.dart'; class StickyDemo extends StatefulWidget { @override _ ...
- LeetCode 160： 相交链表 Intersection of Two Linked Lists
爱写Bug(ID:iCodeBugs) 编写一个程序,找到两个单链表相交的起始节点. Write a program to find the node at which the intersectio ...
- CodeForce 577B Modulo Sum
You are given a sequence of numbers a1, a2, ..., an, and a number m. Check if it is possible to choo ...
- UVA 291 The House Of Santa Claus DFS
题目: In your childhood you most likely had to solve the riddle of the house of Santa Claus. Do you re ...
- python asyncio 关闭task
import asyncio import time async def get_html(sleep_times): print("waiting") await asyncio ...
- Python自动抢红包，超详细教程，再也不会错过微信红包了！
目录: 0 引言 1 环境 2 需求分析 3 前置准备 4 抢红包流程回顾 5 代码梳理 6 后记 0 引言 提到抢红包,就不得不提Xposed框架,它简直是个抢红包的神器,但使用Xposed框架有一 ...