HBuilder创建app 基础

一.了解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_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));
    })