使用python做手机app后台

最新推荐文章于 2024-05-21 14:48:41 发布

置顶秋风扶水

最新推荐文章于 2024-05-21 14:48:41 发布

阅读量1.4w

点赞数 16

分类专栏： 5+App 文章标签：使用python做为app的后台 5+App搭建 HBuilderX连接手机进行真机测试 X

本文链接：https://blog.csdn.net/qq_42726314/article/details/98063572

版权

5+App 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

编辑器：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进行验证。

<!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的后台代码

博主是个弱鸡，欢迎大家来指导。

秋风扶水

关注

16
点赞
踩
151

收藏

觉得还不错? 一键收藏
13
评论
使用python做手机app后台

编辑器：HBuiderX、PyCharm主要技术：5+App、pythonHBuiderX 下载地址：http://www.dcloud.io/hbuilderx.htmlPyCharm 下载地址：http://www.jetbrains.com/pycharm/?fromMenupython 下载地址：https://www.python.org/5+App是HBuider...
复制链接

扫一扫