一.了解HBuilder

HBuilder内封装了大量的书籍,极大方便了使用

官方文档:

http://dev.dcloud.net.cn/mui/ui/

关于布局:

mhead  表头.mbody 身子,mtap 尾部

操作:

1.跳转页面 mui.openWindow

    document.getElementById("setting").addEventListener("tap",function(){ #  tap  监听事件    dga快捷方式
mui.openWindow({ #mui.openWindow 跳转到新页面
"url":"new.html", #跳转的页面文件
"id":"new.html", #跳转的id
styles:{
top:"0px", # styles 样式 固定时必须用top作为参照
bottom:"50px"
},
extras:{ # extras 传值 需要在new.html上注入plusReady(function{}) ,内部填写 变量= plus.webview.currentWebview()接收. name:""
}
});
});

2.点击显示提示 toast

    document.getElementById('email').addEventListener('tap',function () {
mui.toast("你点击邮件了");
})

3.mui.fire 跨表发送数据

  mui.plusReady(function(){

    })
document.getElementById('email').addEventListener('tap',function () {
var new_page = plus.webview.getWebviewById("new.html"); #同过mui.fire传值的参数,指向id为要发送数据的html 的id,使用plus必须有 mui.plusReady(function()
mui.fire(new_page,'show_alert',{name:"chunsheng"}); #mui.fire三个参数(访问页面id,function回调函数名,字典形式内容),需要在访问html接收这个回调函数
})

另一端的接收

    document.addEventListener("show_alert",function(data){ #这里全局监听传递的回调函数
console.log(JSON.stringify(data.detail.name)); #监听返回的函数必须 .detail 转换为Object字典形式
alert("欢迎观临");
})

4.json post请求

  document.getElementById('login_btn').addEventListener('tap',function () {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value; mui.post('http://192.168.13.144:9527/login',{
username:username,
password:password
},function(data){
mui.toast(data.msg);
},'json'
); })
mui.post('',#'' 存访问的地址
{
#传递的参数位置
},function(data){
#接收数据位置
},'json' #若为jsonity格式,可不告诉客户端请求头为json格式
);

5.图文列表,自己创建列表格式 通过createElement("")创建标签和appendChild()定义层级关系

  function create_item(content){
var li = document.createElement("li");#创建标签li createElement
li.className ="mui-table-view-cell mui-media"; #配置class信息 className
var a = document.createElement("a");
var img = document.createElement("img");
img.className ="mui-media-object mui-pull-left";
img.src = "http://192.168.13.144:9527/get_image/"+content.image; #配置src 直接访问地址获取
var div = document.createElement("div");
div.className="mui-media-body";
div.innerText = content.tilte; #创建文本 innerText
var p = document.createElement("p");
p.className="mui-ellipsis";
p.innerText=content.text; li.appendChild(a); #创建层级关系
a.appendChild(img);
a.appendChild(div);
div.appendChild(p); document.getElementById("content_list").appendChild(li);
#注意,这是有名函数,需要调用才可用
}

调用函数

    mui.plusReady(function () {
mui.post('http://192.168.13.144:9527/content_list',{ },function(data){
for (var i = 0; i < data.length; i++) {
// console.log(JSON.stringify(data[i]))
create_item(data[i]);#调用函数
}
},'json'
);
})

关于后端传递src

from flask import Flask,request,jsonify,send_file
from setting import MONGO_DB
@app.route("/content_list",methods=["POST"])
def content_list():
res = list(MONGO_DB.content.find({},{"_id":0}))
return jsonify(res) @app.route("/get_image/<filename>")
def get_image(filename):
import os
path = os.path.join("tupian",filename)
return send_file(path)

6.将其他页面在首页显示   mui.init( )     subpages

    mui.init({
subpages:[{ #将main页面显示在首页的方法 subpages
url:'main.html',
id:'main.html',
styles:{
top:'0px',//mui标题栏默认高度为45px;
bottom:'50px'//默认为0px,可不定义;
}
}]
});

7.全局设置 mui.js

使用时一定要引用

<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>

内容

window.serv = "http://192.168.13.189:9527";
window.serv_image = window.serv + "/get_image/";
window.serv_music = window.serv + "/get_music/";

在以后访问的路由中,都可以使用变量代替

8.将音频播放 myplayer

myplayer = plus.audio.createPlayer(window.serv_music + Sdata.audio);  #后面是访问文件的地址
myplayer.play(); 播放
myplayer.pause(); #暂停
myplayer.resume(); #继续
myplayer.stop();#停止

9.查看自身ip

//     var sdata = plus.webview.currentWebview(); # 在plusready ()使用
// console.log(JSON.stringify(sdata)) #这里获取的是页面的全部信息

10websocket访问

    var ws = new WebSocket("ws://192.168.13.189:3721/app/app01");#这里同样可以通过websocket进行数据访问
document.addEventListener("send_music",function(data){
var send_str = data.detail // {to_user:"toy123",music:Sdata.audio}
ws.send(JSON.stringify(send_str));
})

HBuilder创建app 基础的更多相关文章

  1. HBuilder创建app

    一.app登录注册实现 1.首先进行布局,mhead,mbody 在app index.html内创建一个 a链接通过mui.openWindow跳到登录页面 <a class="mu ...

  2. HBuilder创建app 3

    一.Audio 模块实现开启手机摄像头 基于html5 plus http://www.html5plus.org/doc/zh_cn/audio.html 栗子: <!DOCTYPE html ...

  3. 一、数据库表中字段的增删改查,二、路由基础.三、有名无名分组.四、多app共存的路由分配.五、多app共存时模板冲突问题.六、创建app流程.七、路由分发.八、路由别名,九、名称空间.十、反向解析.十一、2.x新特性.十二、自定义转换器

    一.数据库表中字段的增删改查 ''' 直接在modules中对字段进行增删改查 然后在tools下点击Run manage.py Task执行makemigrations和migrate 注意在执行字 ...

  4. pycharm上运行django服务器端、以及创建app方法

     快来加入群[python爬虫交流群](群号570070796),发现精彩内容. 安装Django  下载Django包,解压缩. CMD 进入解压路径下. 执行:python setup.py in ...

  5. 使用Material Design 创建App翻译系列----材料主题的使用(Using Material Theme)

    上一篇是使用Material Design 创建App翻译系列--開始学习篇,进入正题: 新的材料主题提供了下面内容: 1. 提供了同意设置颜色板的系统部件组件. 2. 为这些系统组件提供了触摸反馈动 ...

  6. HBuilder开发App教程04-最难搞定的是mui

    前言 前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开 ...

  7. springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装

    springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...

  8. App架构师实践指南一之App基础语法

    第二章:App基础语法1.编程范式编程范型或编程范式(programming paradigm),是指从事软件工程的一类典型的编程风格.常见的编程范式有过程化(命令行)编程.事件驱动编程.面向对象编程 ...

  9. Hbuilder开发app实战-识岁03-文件上传

    前言 做app不得不谈的问题就是文件上传.用hbuilder开发app让上传变的非常easy. Uploader Uploader模块管理网络上传任务,用于从本地上传各种文件到server,并支持跨域 ...

随机推荐

  1. luoguP4113 [HEOI2012]采花

    经典颜色问题推荐博文 https://www.cnblogs.com/tyner/p/11519506.html https://www.cnblogs.com/tyner/p/11616770.ht ...

  2. 汇编和C/C++的混合编程方式

    常用的有三种方式: 在C/C++代码中嵌入汇编指令 汇编调用C/C++ C/C++中调用汇编 实例一: 在C中嵌入汇编: void string_copy(char *dst,const char * ...

  3. GitHub 上优秀的开源SLAM repo (更新中)

    GitHub 上优秀的开源SLAM repo (更新中) 欢迎 watch/star/fork 我们的 GitHub 仓库: Awesome-SLAM, 或者follow 项目的主页:Awesome- ...

  4. 第05组团队Github现场编程实战

    第05组团队Github现场编程实战 一.组员职责分工 组员 分工 卢欢(组长) 前后端接口设计 严喜 寻找相关资料 张火标 设计并描述界面原型 钟璐英 编写随笔 周华 填写完善文档 古力亚尔·艾山 ...

  5. SQL Server关系的创建

    如果两个表的相关列都是主键或具有唯一约束,创建的就是一对一关系. 如果只有一列具有主键或唯一约束,则创建的时一对多关系 关联字段的字符类型必须相同. 1. 一对一关系 USE [Howie] crea ...

  6. Nginx企业级优化

    Nginx企业级优化 一.隐藏版本号信息 安装软件前修改,源码包中的版本信息 #切换到源码包目录[root@localhost ~]# cd /usr/src/nginx-1.15.9/[root@l ...

  7. 物联网架构成长之路(42)-直播流媒体入门(RTMP篇)

    1. 安装RTMP流媒体服务器 以前其实我是利用Nginx-RTMP-module搭建过RTMP流媒体服务器,并实现了鉴权功能.参考https://www.cnblogs.com/wunaozai/p ...

  8. Azure EA (1) 查看国内Azure账单

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China 有关Azure EA Portal的详细内容,可以参考我的GitHu ...

  9. Java连载8-基本数据类型2

    一.基本数据类型 1.字符串“abc”不属于基本数据类型,属于引用数据类型 2. 基本数据类型   占用空间大小(单位:字节) byte                1 short          ...

  10. 【shell脚本】通过位置变量创建Linux账户及密码===addUser.sh

    通过位置变量创建Linux账户及密码 脚本内容 [root@VM_0_10_centos shellScript]# vi addUser.sh #!/bin/bash # 通过位置变量创建系统账户及 ...