使用python做手机app后台

编辑器: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//", 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地址

使用python做手机app后台_第1张图片

查看完自己的IPv4地址,打开浏览器访问

示例:http://192.168.0.230:5000/login/admin/admin

http://ip地址:端口/登陆接口的名称/用户名/密码

使用python做手机app后台_第2张图片

返回状态码:200表示成功,0表示失败。

成功之后,就可以搭建在HBuilderX搭建app项目

 

 

 

 

第二步搭建app环境

如何搭建+5App项目请自行百度

创建好项目之后我们写一个登陆的App,使用python进行验证。

 

login.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("服务器内部出错!");
					}
				})
			})
		})

 

首页模板:只在顶部显示一下主页,用于区分是否跳转




    
    
    
	
	
    


	

主页

 

 

当你看到这里的时候,后面就已经没有代码了,搭建一下手机运行环境就好

 

 

第三步搭建手机运行环境


打开5+App项目中的manifest.json,修改基础配置里面的应用入口页面地址,也就是我们手机刚打开app显示的页面。

修改为login.html

 

之后,我们需要把手机设置为开发者模式,如何设置自行百度,因为手机型号不同设置方式也不同。

开发者选项中,打开usb调试,usb安装。

手机和电脑保持在同一个局域网下,连接usb

最后,在菜单栏里的运行、运行到手机或模拟器,选择运行设备,就可以测试app是否正常运行。

使用python做手机app后台_第3张图片

手机app里的登陆首页,填写用户名和密码进行测试。

测试结果,显示主页,表示可以通过ajax去调用python的后台代码

使用python做手机app后台_第4张图片

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

 

 

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

你可能感兴趣的:(5+App)