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. 30号快手笔试(三道ac两道半)————-历史上最大的网络失误orz

    case  50 ,20,100 做题以来第一次重大失误:最后两分钟发现手机关机了,然后充电开机orz 页面是js代码, 钟表是一直会走的, 手机没电了, 电脑连接的手机的热点: 只顾在调试,先过了第 ...

  2. 2019-1-17 前言 C#高级编程(第11版)

    C#已更新为更快的速度.主要版本7.0是2017年3月发布,次要版本7.1和7.2很快发布在2017年8月和2017年12月.通过项目设置,您可以与每个应用程序一起分发,是开源的,不可用仅适用于Win ...

  3. javaFX笔记----ComboBox模仿qq账号下拉框删除账号

    myComboBox.setCellFactory( new Callback<ListView<String>, ListCell<String>>() { @O ...

  4. Linux学习历程——Centos 7 ls命令

    一.命令介绍 ls命令用于显示目录中的信息. ----------------------------------------------------------------------------- ...

  5. Centos7安装搜狗输入法.

    系统默认安装输入法管理器的是 ibus. 而搜狗使用 fcitx 1.以我们先要安装 fcitx和必要的软件包 yum -y install fcitx* yum -y install libQtWe ...

  6. MyCP(课下作业)

    一.作业要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件(内 ...

  7. 一起刷LeetCode

    题目列表: 题目 解答 26. 删除排序数组中的重复项 https://www.cnblogs.com/powercai/p/10791735.html 25. k个一组翻转链表 https://ww ...

  8. (n)e(m)

    经常会看到类似于 1e30 9e5 类似的表达式 (我一个蒟蒻不懂啊) 于是 给自己解释解释 那么 nem就是 n乘以10的m次方 (哈哈哈哈,我简直是太弱了)

  9. handsontable的基础应用

    handsontable是一款页面端的表格式交互插件,可以通过她加载显示表格内容,能够支持合并项.统计.行列拖动等. 同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作. 我在项目 ...

  10. Django-admin管理工具

    知识预览 admin组件使用 admin源码解析 admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目 ...