HTML5 Plus应用概述

首先新建一个移动App项目,文件-->新建-->移动APP

HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。

代码块

mdo 主题
mhe 标题栏 mhe带箭头的标题栏
msl 图片轮播
mgr 九宫格
mli 图文列表居左
mta底部选项卡

夜神模拟器

夜神安卓模拟器(夜神模拟器),是全新一代的安卓模拟器,与传统安卓模拟器相比,基于android4.4.2,兼容X86/AMD,在性能、稳定性、兼容性等方面有着巨大优势。

三、Webview

Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。

http://www.html5plus.org/doc/zh_cn/webview.html

手势事件

点击:
tap 单击屏幕
doublatap 双击屏幕 长按:
longtap 长按屏幕
hold 按住屏幕
release 离开屏幕 对话框
alert 警告框
confirm 确认框
prompt 消息对话框
toast 消息提示框 实例

<script type="text/javascript">
mui.init();
//扩展API加载完成事件
mui.plusReady(function () {

})
//id为phone绑定tag(点击)事件
document.getElementById('phone').addEventListener('tap',function () {
mui.toast('你点击了 电话页面');
})

新页面传值

打开新页面 index.html
//id为phone绑定tag(点击)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自动消失提示框
mui.toast("你点击了电话页面");
mui.openWindow({
url:"phone.html",//上面是穿的页面
id:"phone.html",
styles:{
top:"0px",//新页面顶部位置
bottom:"50px",//新页面底部位置
},
// 额外扩展参数
extras:{
user_id:123456
}
})
}); ####phone.html 获取参数,并弹框
document.getElementById('btn').addEventListener('tap', function() {
//获得webvies窗口native层实例对象
var sdata = plus.webview.currentWebview();
mui.alert(sdata.user_id);
})

subpage

##############子页面相当于在html中使用iframe,所有的浏览器都支持################
main.index 身体 index.底部部 muns
添加:
注意:mui.init里面是一个对象,必须先写{},再写 subpage。否则没有下面的效果!
mui.init({
// 子页面
subpages: [{
url: "main.html",
id: "main.html",
styles: {
top: "0px", //新页面顶部位置
bottom: "50px", //新页面底部位置
},
}]
});

scroll区域滚动

main.html
#############滚动################
<script type="text/javascript">
mui.init();
mui('.mui-scroll-wrapper').scroll(); //初始化滚动
</script>

登陆

############登陆###############
新增login.html代码
在index 设置中添加事件
document.getElementById("login").addEventListener("tap", function() {
mui.openWindow({
url: "login.html",
id: "login.html",
styles: window.styles
})
})

ajex请求

##########ajax请求############
mpo
mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型
在login.html 登陆中按钮触发
<script type="text/javascript">
var server='http://192.168.14.173:5000'
mui.init();
document.getElementById("login").addEventListener("tap", function() {
var uname = document.getElementById("username").value;
var pwd = document.getElementById("pwd").value; mui.post(
server + "/login", {
username: uname,
password: pwd
},
function(data) {
mui.toast(data); }
);
});
</script>

--------------------后端代码-----------------
@app.route("/login",methods=['POST','GET'])
def login():
username=request.form.get("username")
password=request.form.get("password")
if username=='tang'and password=='123':
return '欢迎'
if __name__ == '__main__':
app.run("0.0.0.0",5000,debug=True)

自定义事件fire

##########自定义事件fire############
通过自定义事件,用户可以轻松实现多webview间数据传递。
通过mui.fire()方法可触发目标窗口的自定义事件:
.fire( target , event , data ) data是一个json数据,它的key必须和事件名一致才行!否则Undefined 注意:目标窗口,必须监听,才有效果! 目录接收参数时,使用 data.detail.事件名 修改phone.html

document.getElementById("btn").addEventListener("tap", function() {

// 获取目标窗口id
var main = plus.webview.getWebviewById("main.html");

//如果是 index就是"HBuilder"

// 使用fire事件,发送一个数据对象
mui.fire(main,"talk",{talk:"我让你说啥,你就给我说啥"})

})

=========index取值==========

document.addEventListener("talk",function(data){
// 显示获取的值
mui.toast(data.detail.talk);
})

 storage

Storage模块管理应用本地数据存储区,用于应用数据的保存和读取。
应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同,前者可在应用内跨域操作,数据存储期是持久化的,并且没有容量限制。
通过plus.storage可获取应用本地数据管理对象。
getLength: 获取应用存储区中保存的键值对的个数
getItem: 通过键(key)检索获取应用存储的值
setItem: 修改或添加键值(key-value)对数据到应用数据存储中
removeItem: 通过key值删除键值对存储的数据
clear: 清除应用所有的键值对存储数据
key: 获取键值对中指定索引值的key值
mui.post(
server + "/login", {
username: uname,
password: pwd
},
function(data) {
// 由于后端返回的是json,这里需要反序列化
console.log(JSON.stringify(data));
if(!data.code) {
// index页面的WebviewById为HBuilder
// var index = plus.webview.getWebviewById("HBuilder")
// 触发fire事件,发送数据
// mui.fire(index,"login",{msg:data.msg + data.data.user_id})
mui.toast(data.msg + data.data.user_id);
//修改或添加键值(key-value)对数据到应用数据存储中
plus.storage.setItem("user", data.data.user_id);
mui.openWindow({
url: "user_info.html",
id: "user_info.html",
styles: window.styles,
//使用 extras实现页面间传值
extras: {
// 传输user_id
user_id: data.data.user_id
}
}) } else {
mui.toast(data.msg)
}
}, 'json'
);
--------------------------------------------------------------
document.getElementById("logout").addEventListener("tap", function() {
// 删除storage里面的user属性
plus.storage.removeItem("user")
// 跳转页面login.html
mui.openWindow({
url: "login.html",
id: "login.html",
styles: window.styles
})
})

html5+hbuilder+夜神模拟器+webview的更多相关文章

  1. python 全栈开发,Day125(HTML5+ 初识,HBuilder,夜神模拟器,Webview)

    昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) in ...

  2. HTML5+ 初识,HBuilder,夜神模拟器,Webview

    一.HTML5+ 初识 HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任 ...

  3. Flask&&人工智能AI -- 8 HTML5+ 初识,HBuilder,夜神模拟器,Webview

    昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) in ...

  4. hbuilder + 夜神模拟器

    1. 安装hbuilder.夜神模拟器 2. 将夜神模拟器设为手机版,启用急速模式 3. 打开夜神模拟器设置,进入关于手机,点击版本号启用开发者模式 4. 进入开发者模式设置,启用usb调试 5. h ...

  5. hbuilder 夜神模拟器调试方法

    1.首先下载好夜神模拟器2.查找已经安装的夜神模拟的端口,这里说一下夜神模拟器默认端口是62001,但是有些版本可能不是这个端口,怎么查找到底是哪个端口呢?按照如下顺序进行就可以查找到你按装的夜神模拟 ...

  6. 夜神模拟器与HBuilder连接/cmd运行提示符/执行夜神模拟器命令/执行HBuilder命令

    第一步:启动HBuilder和夜神模拟器 第二步:通过运行电脑命令CMD进入(电脑运行命令的快捷键是:windows键+R2.Ctrl键与Alt键之间的那个键就是windows键或者点击左下角开始图标 ...

  7. HBuilder使用夜神模拟器调试Android应用

    由于HBuilder的扫描机制无法直接连上夜神模拟器.我搞了好久终于找到办法了,分享给大家. 首先,启动HBuilder和夜神模拟器 然后打开cmd命令提示符 cd进入夜神模拟器bin目录 执行以下命 ...

  8. hbuilder连接模拟器进行联调(逍遥模拟器,MuMu模拟器,夜神模拟器)

    MuMu模拟器:7555 逍遥模拟器:21503 夜神模拟器:62001 1. 2. 3. 如果上诉方法不好使,可以重启模拟器以及hbuilder,有时可能连接中断,可以重新连接.

  9. Hbuilder连接模拟器调试

    Hbuilder是一个非常好用的HTML5开发IDE,我最喜欢的功能就是连接手机调试了,连接手机调试有两种途径,一是通过USB连接真机,二是下载安装一个安卓模拟器,让Hbuilder连接到安卓模拟器, ...

随机推荐

  1. DataPipeline CTO陈肃:从ETL到ELT,AI时代数据集成的问题与解决方案

    引言:2018年7月25日,DataPipeline CTO陈肃在第一期公开课上作了题为<从ETL到ELT,AI时代数据集成的问题与解决方案>的分享,本文根据陈肃分享内容整理而成. 大家好 ...

  2. 虚拟机安装windows7 VMware12 安装window7

    闲来无事就来搞虚拟机装操作系统!期间出现很多错误,分享一下 一.安装虚拟机 二.准备安装的镜像文件 我下载的是windows7纯净版 深度技术里面下载的(http://www.xitongzhijia ...

  3. 隐写术之steghide的使用

    steghide不是一个软件,所以下载之后解压缩就可以在命令行中使用. win+R,cmd,回车->进入到steghide.exe所在的文件夹,使用隐藏或者解锁的相应命令,即可隐藏或者解锁. 这 ...

  4. CSAPP:第十一章 网络编程

    CSAPP:第十一章 网络编程 11.1 客户端服务器模型11.2 全球IP因特网11.3 套接字接口 11.1 客户端服务器模型   每个网络应用都是基于客户端-服务器模型.采用这个模型,一个应用是 ...

  5. 随心测试_数据库_001<论数据的重要性>

    测试工作中,数据的重要性 软测工程师:作为综合运用多学科知识,保障软件质量的重要岗位.需要我们学以致用,在工作中不断学习提升.以下:软测人员必备_数据库核心技能学习点,供大家学习参考. Q1:什么是: ...

  6. codeforces#1139E. Maximize Mex(逆处理,二分匹配)

    题目链接: http://codeforces.com/contest/1139/problem/E 题意: 开始有$n$个同学和$m$,每个同学有一个天赋$p_{i}$和一个俱乐部$c_{i}$,然 ...

  7. Neutron路由篇:L3 agent+Namespace

    Neutron 的路由服务是由 l3 agent 提供的. 除此之外,l3 agent 通过 iptables 提供 firewall 和 floating ip 服务.     l3 agent 需 ...

  8. c++使用cmake创建dpdk项目

    使用cmake创建dpdk 特别注意的时,链接dpdk库时,一定要使用 -Wl,--whole-archive 和 -Wl,--no-whole-archive 包含所有的静态库,注意,不要链接 li ...

  9. linux上面sqlserver数据库的操作

    sqlserver2017可以安装到linux也不是什么新鲜事, centos安装好sqlserver后有一写操作 systemctl status mssql-server:查看sqlserver的 ...

  10. Windows 下使用 工具修改文件的 时间

    1. 下载工具 https://www.cr173.com/soft/12992.html 2. 使用工具修改即可 3. 忘记了东西处理挺方便的.  尤其是往前改日期的时候.