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/")
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));  
})