編輯器：HBuiderX、PyCharm
主要技術：5+App、python
HBuiderX 下載地址：http://www.dcloud.io/hbuilderx.html
PyCharm 下載地址：http://www.jetbrains.com/pycharm/?fromMenu
python 下載地址：https://www.python.org/
5+App是HBuiderX下面的一個支持跨平臺App項目，全稱：HTML5 Plus，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App可以通過擴展的JS API任意調用手機的原生能力，實現與原生App同樣強大的功能和性能。
第一步進行後臺接口編寫
python只提供接口+業務處理
from flask import Flask, make_response 引入路由模塊，提供外部訪問的接口，make_response 處理返回結果
app.run(host="0.0.0.0", port="5000", debug=True)表示同一局域網任何ip都可以訪問，訪問端口爲：5000，允許調試模式。
from flask import Flask, make_response
from flask_cors import cross_origin
app = Flask(__name__)
uName = "admin"
uPwd = "admin"
status = ""
# 登陸函數( REST RESTful：接受參數，訪問類型可以爲：get、post)
@app.route("/login/<account>/<password>", methods=['GET', 'POST'])
@cross_origin()
def get_content(account, password):
if uName.__eq__(account) and uPwd.__eq__(password):
status = "200"
rst = make_response(status)
#處理請求頭部
rst.headers['Access-Control-Allow-Origin'] = '*'
return rst
status = "0"
rst = make_response(status)
rst.headers['Access-Control-Allow-Origin'] = '*'
return rst
if __name__ == '__main__':
app.run(host="0.0.0.0", port="5000", debug=True)
這個時候我們已經可以通過瀏覽器去測試python接口是否正常。
我們先打開命令窗口查詢一個本地ip地址，後面有用到
win+r，輸入cmd，輸入ipconfig，查看ip地址
查看完自己的IPv4地址，打開瀏覽器訪問
示例：http://192.168.0.230:5000/login/admin/admin
http://ip地址:端口/登陸接口的名稱/用戶名/密碼
返回狀態碼：200表示成功，0表示失敗。
成功之後，就可以搭建在HBuilderX搭建app項目
第二步搭建app環境
如何搭建+5App項目請自行百度
創建好項目之後我們寫一個登陸的App，使用python進行驗證。
login.html登陸模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<style>
.area {
margin: 20px auto 0px auto;
}
.mui-input-group {
margin-top: 10px;
}
.mui-input-group:first-child {
margin-top: 20px;
}
.mui-input-group label {
width: 22%;
}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 78%;
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-content-padded {
margin-top: 25px;
}
.mui-btn {
padding: 10px;
}
.link-area {
display: block;
margin-top: 25px;
text-align: center;
}
.spliter {
color: #bbb;
padding: 0px 8px;
}
.oauth-area {
position: absolute;
bottom: 20px;
left: 0px;
text-align: center;
width: 100%;
padding: 0px;
margin: 0px;
}
.oauth-area .oauth-btn {
display: inline-block;
width: 50px;
height: 50px;
background-size: 30px 30px;
background-position: center center;
background-repeat: no-repeat;
margin: 0px 20px;
/*-webkit-filter: grayscale(100%); */
border: solid 1px #ddd;
border-radius: 25px;
}
.oauth-area .oauth-btn:active {
border: solid 1px #aaa;
}
.oauth-area .oauth-btn.disabled {
background-color: #ddd;
}
</style>
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都應該在此事件發生後調用，否則會出現plus is undefined。"
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登錄</h1>
</header>
<div class="mui-content">
<form id='login-form' class="mui-input-group">
<div class="mui-input-row">
<label>賬號</label>
<input id='account' type="text" class="mui-input-clear mui-input" placeholder="請輸入賬號">
</div>
<div class="mui-input-row">
<label>密碼</label>
<input id='password' type="password" class="mui-input-clear mui-input" placeholder="請輸入密碼">
</div>
</form>
<div class="mui-content-padded">
<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登錄</button>
</div>
</div>
</div>
</body>
</html>
點擊登陸觸發的事件：此代碼塊寫在document.addEventListener('plusready', function(){});的下面
注意：ajax的url：換成瀏覽器訪問成功的地址，(account.value表示App輸入的用戶名，password.value表示App輸入的密碼
// 登陸的點擊事件
$(function(){
var account = document.getElementById("account")
var password = document.getElementById("password")
var login_Btn = document.getElementById("login")
login_Btn.addEventListener("click",function(){
$.ajax({
"type" : "get",
"url" : "http://192.168.0.230:5000/login/"+account.value+"/"+password.value,
"dataType" : "json",
success : function(data){
if(data == "200"){
//響應碼:200響應成功
window.location.href = "index.html"
}else{
alert("用戶名密碼不匹配！");
}
},error : function(){
alert("服務器內部出錯！");
}
})
})
})
首頁模板：只在頂部顯示一下主頁，用於區分是否跳轉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都應該在此事件發生後調用，否則會出現plus is undefined。"
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">主頁</h1>
</header>
</body>
</html>
當你看到這裏的時候，後面就已經沒有代碼了，搭建一下手機運行環境就好
第三步搭建手機運行環境
打開5+App項目中的manifest.json，修改基礎配置裏面的應用入口頁面地址，也就是我們手機剛打開app顯示的頁面。
修改爲login.html
之後，我們需要把手機設置爲開發者模式，如何設置自行百度，因爲手機型號不同設置方式也不同。
開發者選項中，打開usb調試，usb安裝。
手機和電腦保持在同一個局域網下，連接usb
最後，在菜單欄裏的運行、運行到手機或模擬器，選擇運行設備，就可以測試app是否正常運行。
手機app裏的登陸首頁，填寫用戶名和密碼進行測試。
測試結果，顯示主頁，表示可以通過ajax去調用python的後臺代碼
博主是個弱雞，歡迎大家來指導。
