使用HBuilder快速搭建App页面 2018-10-22

MUI:文档

• 1. md
• 2. mta 底部选项卡
• 3.mhe 顶部头
• 4.mbo 内部写轮播图
• 5.ms 轮播图
• 6.mg 九宫格
• 7.mli 图文列表

动态操作

• 1. 绑定点击事件
  [事件管理文档]（http://dev.dcloud.net.cn/mui/event/#gesture）
  document.getElementById("iPhone").addEventListener("tap",function(){}
• 2.提示框
  mui.toast("你点击了iPhone按钮");
• 3.打开另外一个页面 mui.openWindow
  窗口管理

    document.getElementById("setting").addEventListener("tap",function(){
        mui.openWindow({
            url:"login.html",
            id:"login.html",
            styles:{
                top:"0px",
                bottom:"50px"
            }
        })
    })

• 4.页面间的传值
  • 传值页面 extras

 document.getElementById("setting").addEventListener("tap",function(){
        mui.openWindow({
            url:"login.html",
            id:"login.html",
            styles:{
                top:"0px",
                bottom:"50px"
            },
            extras:{
                user_id:"hahaha",
            }
        })
    })

• 接受值页面

    var Sdata =null;
        mui.plusReady(function(){
            Sdata= plus.webview.currentWebview();
            mui.toast(Sdata.user_id);
        })

如果想用plus就必须在plusReady下使用，否则报错

• 5.开火事件：当在一个页面操作时，在另一个页面也做一些操作
  • 开火方

   mui.plusReady(function(){})
    document.getElementById("btn").addEventListener("tap",function(){
        var login_page = plus.webview.getWebviewById("login.html");
        mui.fire(login_page,"hello",{name:"jinwangba"});  # hello 是开火到另一个页面的事件，{name:"jinwangba"}是传过去的值
    })

• 接受方

document.addEventListener("hello",function(data){
            
            mui.toast(data.detail.name )
        })

• 点亮首页按钮

开火方：
document.getElementById("clear_btn").addEventListener("tap",function(){
            var index = plus.webview.getWebviewById("HBuilder");
            mui.fire(index,"dianliangshouye");
        })
接受方
    document.addEventListener("dianliangshouye",function(){
        var index_btn = document.getElementById("index_page");
        var set_btn = document.getElementById("setting");
        index_btn.className = "mui-tab-item mui-active";
        set_btn.className ="mui-tab-item"  # 熄灭别的
    })

HBuilder 是首页的id

• 6.post 请求
  ajax文档

        document.getElementById("login_btn").addEventListener("tap",function(){
            
            var username = document.getElementById("username").value;
            var pwd = document.getElementById("pwd").value;
            mui.post(
                "http://192.168.12.11:9527/login",
                {"username":username,"password":pwd},
                function(data){
                    mui.toast(data.msg);
                    open_user_info(data.data);
                }
                
            )
        })

登录成功直接跳转

    document.getElementById("login_btn").addEventListener("tap",function(){
            
            var username = document.getElementById("username").value;
            var pwd = document.getElementById("pwd").value;
            mui.post(
                "http://192.168.12.11:9527/login",
                {"username":username,"password":pwd},
                function(data){
                    mui.toast(data.msg);
                    open_user_info(data.data);
                }
                
            )
        })
        
        function open_user_info(user_info){
            mui.openWindow({
                url:"user_info.html",
                id:"user_info.html",
                styles:{
                    top:"0px",
                    bottom:"50px"
                },
                extras:user_info
            })
        }

打开页面直接显示传过来的数据

  mui.plusReady(function(){
        var Sdata = plus.webview.currentWebview();
        document.getElementById("username").innerText = Sdata.username;
        document.getElementById("user_id").innerText = Sdata.user_id;
        document.getElementById("nickname").innerText = Sdata.nickname;
    })