安卓-HTML5+手機端的APP開發

一:手機APP應用所具有的功能

能夠打開攝像頭
能夠打開麥克風 - 打開揚聲器
能夠打開操做系統的相冊,通信錄,短信彩信
能夠打開陀螺儀,指南針javascript

 能夠從這裏看到所可以擁有的功能css

 

二:HTML5+手機端開發介紹

1:框架介紹

Mui       前端佈局框架 = 排版用  (至關於bootstrap)
HTML5PLUS   硬件驅動接口,系統調用接口  (有jQuery功能)html

 

2:安裝相關軟件

 

 

3:簡單介紹Hbuild的使用

新建APP前端

 

修改端口html5

啓動java

 

 

 

三:Mui

至關於bootstrap,但mui又封裝了jQuery web

1:代碼塊

 經常使用代碼塊ajax

  mdo    頁面結構mongodb

  mhe    標題欄數據庫

  mbo    頁面主體

  mta     底部欄

  msl     圖片輪播

  mgr    九宮格

  mli      列表

 

2:組件

 

3:窗口

 

4:一個簡單的APP應用

  使用代碼塊快速搭建

   

 

5:事件

6:案例--跳轉窗口、傳遞值

index.html

<body>
   <header class="mui-bar mui-bar-nav">
       <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
       <h1 class="mui-title">標題</h1>
   </header> 

   <nav class="mui-bar mui-bar-tab">
       <a class="mui-tab-item mui-active">
           <span class="mui-icon mui-icon-home"></span>
           <span class="mui-tab-label">首頁</span>
       </a>
       <a class="mui-tab-item">
           <span class="mui-icon mui-icon-phone"></span>
           <span class="mui-tab-label">電話</span>
       </a>
       <a class="mui-tab-item">
           <span class="mui-icon mui-icon-email"></span>
           <span class="mui-tab-label">郵件</span>
       </a>
       <a class="mui-tab-item" id='setting'>
           <span class="mui-icon mui-icon-gear"></span>
           <span class="mui-tab-label">設置</span>
       </a>
   </nav>

</body>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
 document.getElementById('setting').addEventListener('tap',function () { //監聽點擊事件 mui.toast('你點擊我了') ; //自動消失的提示框
         var s = {'user':'liu'}; console.log(JSON.stringify(s)); mui.openWindow({ //打開新窗'url':'setting.html', //跳轉的頁面
             'id':'setting', styles:{ top:"0px", bottom:"50px" }, extras:{ //往新窗口傳值 name:"666" }
         })
              
    })
    </script>

 

 

新窗口文件接收原窗口數據

    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
 mui.plusReady(function () { //頁面初始化 var Sdata = plus.webview.currentWebview() console.log(JSON.stringify(Sdata)); }) </script>

 

7:案例--跳轉窗口、傳遞事件

 

index.html

<body>
   <header class="mui-bar mui-bar-nav">
       <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
       <h1 class="mui-title">標題</h1>
   </header> 

   <nav class="mui-bar mui-bar-tab">
       <a class="mui-tab-item mui-active">
           <span class="mui-icon mui-icon-home"></span>
           <span class="mui-tab-label">首頁</span>
       </a>
       <a class="mui-tab-item">
           <span class="mui-icon mui-icon-phone"></span>
           <span class="mui-tab-label">電話</span>
       </a>
       <a class="mui-tab-item" id='email'>
           <span class="mui-icon mui-icon-email"></span>
           <span class="mui-tab-label">郵件</span>
       </a>
       <a class="mui-tab-item" id='setting'>
           <span class="mui-icon mui-icon-gear"></span>
           <span class="mui-tab-label">設置</span>
       </a>
   </nav>

</body>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
 mui.plusReady(function () { })
    document.getElementById('setting').addEventListener('tap',function () {
         mui.toast('你點擊我了') ;  //自動消失的提示框
         var s = {'user':'liu'};
         console.log(JSON.stringify(s));
         
         mui.openWindow({
             'url':'setting.html',  //跳轉的頁面
             'id':'setting',
            styles:{
                top:"0px",
                bottom:"50px"
            },
            extras:{
                name:"666"
            }
         })
              
    })
    
    
 document.getElementById('email').addEventListener('tap',function () { var setting_page = plus.webview.getWebviewById('setting'), // 查找指定標識的WebviewObject窗口,這裏的setting是id
 mui.fire(setting_page,'show_alert',{name:'liuliu'}) }) </script>

 

 

setting.html

    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
    mui.plusReady(function () {
        var Sdata = plus.webview.currentWebview()
        console.log(JSON.stringify(Sdata));
    })
 document.addEventListener('show_alert',function(data){ alert('歡迎光臨') }) //監聽整個DOM對象
    </script>

 

 

 

點擊進入設置窗口、而後再點擊郵件,那麼郵件的事件就會傳遞過來

 

 

四:HTML5Plus

 

 

 

五:實驗(1)-登陸

實現點擊事件跳轉窗口到登陸頁面,登陸頁面點擊登陸發起與後端的交互,後端獲取到數據到數據庫中查詢,並返回到手機端 

 

 

 

1:數據庫-mongodb

(1)開啓數據庫服務器

  

 

(2)新建數據庫,並添加數據

   

 

2:後端-flask 

(1)與前端交互代碼 

from flask import Flask,request,jsonify
from data_mongo import MONGO_DB

app = Flask(__name__)

@app.route('/login',methods=['POST'])
def login():
    username = request.form.get('username')  #從前端請求中獲取數據
    password = request.form.get('password')
    user_info = request.form.to_dict()

    user = MONGO_DB.data.find_one(user_info)  #數據庫查詢
    if user:
        return jsonify({'status':200,'msg':f"歡迎{user.get('username')}登陸"})
    else:
        return jsonify({'status':201,'msg':'用戶名密碼錯誤'})


if __name__ == '__main__':
    app.run('0.0.0.0',9527,debug=True)

 

 

 

(2)與後端交互代碼

import pymongo

client = pymongo.MongoClient(host='127.0.0.1',port=27017)
MONGO_DB = client['login']

 

 

 

3:前端代碼--Mui

(1)登陸窗口代碼

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">登陸</h1>
    </header>
    <div class="mui-content">
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label>用戶名</label>
            <input type="text" id='username' class="mui-input-clear" placeholder="請輸入用戶名">
            </div>
            <div class="mui-input-row">
                <label>密碼</label>
                <input type="password" id='password' class="mui-input-password" placeholder="請輸入密碼">
            </div>
            <div class="mui-button-row">
                <button type="button" class="mui-btn mui-btn-primary" id='login_btn'>登陸</button>
                <button type="button" class="mui-btn mui-btn-danger mui-action-back" >取消</button>
            </div>
        </form>
    </div>
    
</body>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
    
    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.146:9527/login',{   //ajax請求
                username:username,
                password:password
                
            },function(data){
                console.log(JSON.stringify(data));
                mui.toast(data.msg);
            },'json'
        );
    })
    
    
    </script>

 

 

(2)首頁窗口代碼

   <nav class="mui-bar mui-bar-tab">
       <a class="mui-tab-item mui-active" id="home">
           <span class="mui-icon mui-icon-home"></span>
           <span class="mui-tab-label">首頁</span>
       </a>
       <a class="mui-tab-item">
           <span class="mui-icon mui-icon-phone"></span>
           <span class="mui-tab-label">電話</span>
       </a>
       <a class="mui-tab-item" id='email'>
           <span class="mui-icon mui-icon-email"></span>
           <span class="mui-tab-label">郵件</span>
       </a>
       <a class="mui-tab-item" id='setting'>
           <span class="mui-icon mui-icon-gear"></span>
           <span class="mui-tab-label">設置</span>
       </a>
   </nav>

    <script type="text/javascript">
    mui.init()

    document.getElementById('home').addEventListener('tap',function () {
            mui.openWindow({
             'url':'login.html',  //跳轉的頁面
             'id':'login',
         });
                
    });
    </script>

 

 

4:測試

 

 

 

六:實驗(2)-顯示新聞列表

1:數據庫

建立數據

準備圖片

 

 

2:後端

(1)與前端交互代碼

 

from flask import Flask,request,jsonify,send_file
from data_mongo import MONGO_DB

app = Flask(__name__)

@app.route('/login',methods=['POST'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')
    user_info = request.form.to_dict()

    user = MONGO_DB.data.find_one(user_info)
    if user:
        return jsonify({'status':200,'msg':f"歡迎{user.get('username')}登陸"})
    else:
        return jsonify({'status':201,'msg':'用戶名密碼錯誤'})

@app.route('/content_list',methods=['POST']) #獲取新聞列表數據 def content_List(): res = list(MONGO_DB.contents.find({},{'_id':0})) return jsonify(res)


@app.route('/get_image/<filename>') #獲取新聞列表圖片 def get_image(filename): import os path = os.path.join('image',filename) return send_file(path) if __name__ == '__main__':
    app.run('0.0.0.0',9527,debug=True)

 

(2)與後端交互代碼

import pymongo

client = pymongo.MongoClient(host='127.0.0.1',port=27017) MONGO_DB = client['login']

 

3:前端

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
   <header class="mui-bar mui-bar-nav">
       <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
       <h1 class="mui-title">標題</h1>
   </header> 
   <div class="mui-content">
        <ul class="mui-table-view" id='content_list'>            
        </ul>

   </div>


</body>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
    mui.plusReady(function () {  //窗口一加載就執行
       mui.post('http://192.168.13.146:9527/content_list',{
               
           },function(data){
               for (var i =0;i< data.length;i++){
//                 console.log(JSON.stringify(data[i]));
                create_item(data[i]);//獲取到數據,執行下面的函數
               }
           },'json'
       );
    })
    


    function create_item(content){
            
            var li = document.createElement('li'); //建立標籤
            li.className="mui-table-view-cell mui-media";  //設置標籤屬性
            var a = document.createElement('a');
            var img = document.createElement('img')
            img.className="mui-media-object mui-pull-left";
            img.src = 'http://192.168.13.146:9527/get_image/'+content.image; //請求圖片 var div = document.createElement('div');
            div.className = "mui-media-body";
            div.innerText=content.title;
            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);
            
    }
    </script>
</html>

 

 

4:測試

 

 

 

 

 

 


HTML5plus: http://www.html5plus.org/

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

相關文章
相關標籤/搜索