编辑器: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的后台代码
博主是个弱鸡,欢迎大家来指导。
![点击并拖拽以移动 wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==](https://i-blog.csdnimg.cn/blog_migrate/ab6249f118c797b8bda1b3cb000f968d.png)