一.了解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:"666" } }); }); 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_filefrom 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/ ")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
使用时一定要引用
内容
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)); })