app开发-2 _app开发

千金一刻莫空度，老大无成空自伤。这篇文章主要讲述app开发-2相关的知识，希望能为你提供帮助。
一.app登录注册实现1.首先进行布局,mhead,mbody 在app index.html内创建一个 a链接通过mui.openWindow跳到登录页面

< a class="mui-tab-item" id="self"> < span class="mui-icon mui-icon-gear"> < /span> < span class="mui-tab-label"> 个人中心< /span> < /a>

openwindow:

文章图片

mui.openWindow({ url: "login.html", id: "login.html", styles: { top: "0px", bottom: "50px" }})

文章图片

进入登录页面后,为了不让用户返回,使用mui.back()进行限制

mui.back = function(){#或mui.back() mui.toast("当前页面不能返回"); };

简单的进行输入用户名和密码,向后端信息交互,进行验证,当验证通过时,进入用户信息页面userinfo.html

文章图片

< script src="https://www.songbingjia.com/android/js/md5.js" type="text/javascript" charset="utf-8"> < /script> #需要下载md5()加密,引入
document.getElementById(‘login_btn‘).addEventListener(‘tap‘,function () { mui.post(window.serv + ‘/login‘,{ username:document.getElementById("username").value, password:hex_md5(document.getElementById("password").value) #为了信息安全前端将密码加密 hex_md5() },function(data){ console.log(JSON.stringify(data)); if(data.code==0){ window.localStorage.setItem("user",data.data._id); #这里注意,使用的是window.localStorage.setItem(Key,value) #进行全局创建,将用户信息user表中的obj(_id)作为值传过去,对我们查找用户信息有很大帮助 //console.log(window.localStorage.getItem("user")); mui.openWindow({ url:"userinfo.html", id:"userinfo.html", styles:{ top:"0px", bottom:"50px" }, extras:data.data, createNew:true#这里是当访问发回后,刷新页面,为了信息实时沟通createNew:true }) } },‘json‘ ); })

文章图片

关于注册
【app开发-2】注册和以前一样,获取数据发送数据的过程,这次加入了单选我是爸爸或我是妈妈

文章图片

< div class="mui-input-row mui-radio mui-left"> < label> 我是妈妈< /label> < input name="gender" type="radio" checked value="https://www.songbingjia.com/android/1"> #checked 默认选择 < /div> < div class="mui-input-row mui-radio mui-left"> < label> 我是爸爸< /label> < input name="gender" type="radio" value="https://www.songbingjia.com/android/2"> < /div>

文章图片

在判断性别上,用到了判断获取value

文章图片

function () { var gender_list = document.getElementsByName("gender"); #在获取性别上,通过document.getElementsByName进行判断,因为当选择时,checked就 #会在哪一个单选框 var gender = null; for (var i = 0; i < gender_list.length; i++) { if(gender_list[i].checked){ gender = gender_list[i].value; } }

文章图片

进入userinfo 用户中心页面

文章图片

var Sdata = https://www.songbingjia.com/android/null; mui.back = function() {}; mui.plusReady(function () { Sdata = plus.webview.currentWebview(); console.log(JSON.stringify(Sdata)); var index = plus.webview.getWebviewById("HBuilder"); #将login.html中用户的信息通过mui.fire传递到index.HTMLAllCollection #目的在用户已经登录的情况下,不在重复登录,直接进入到userinfo页面 mui.fire(index,‘new_ws‘); document.getElementById("avatar").src = "https://www.songbingjia.com/android/avatar/" + Sdata.avatar; #赋值 document.getElementById("nickname").innerText = Sdata.nickname; document.getElementById("username").innerText = Sdata.username; }); document.getElementById(‘logout_btn‘).addEventListener(‘tap‘, function() { window.localStorage.removeItem("user"); #退出登录移除window.localStorage.removeItem("user") mui.openWindow({ url: "login.html", id: "login.html", styles: { top: "0px", bottom: "50px" } }); })document.getElementById(‘scan‘).addEventListener(‘tap‘,function () {#进行调用扫码页面,进行扫描二维码 mui.openWindow({ url:"scanQR.html", id:"scanQR.html", }) })

文章图片

以上步骤简单的登录注册就差不多完成了,最后用户登录不在重复登录
index下验证window.localStorage.getItem("user") 做判断

文章图片

document.getElementById(‘self‘).addEventListener(‘tap‘, function() { if(window.localStorage.getItem("user")) {#哈哈,window.localStorage.getItem("user")终于用上了,当在用户登录后,会全局存在localStorage,这也是 #进行判断的重点 mui.post(window.serv + ‘/auto_login‘, { "_id": window.localStorage.getItem("user") }, function(data) { console.log(JSON.stringify(data)); mui.openWindow({ url: "userinfo.html", id: "userinfo.html", styles: { top: "0px", bottom: "50px" }, extras: data.data#在检测到"user" 后,进行登录验证,若存在,则将全部数据返回,并传到userinfo, #在userinfo将标签一一赋值 }) }, ‘json‘); } else { mui.openWindow({ url: "login.html", id: "login.html", styles: { top: "0px", bottom: "50px" }}) }});

文章图片

关于登录websocket的app 名字
index.html

文章图片

if(window.localStorage.getItem("user")) {#注意,也可以将localStorage作为appname 登录的 ws = new WebSocket("ws://192.168.13.55:3721/app/" + window.localStorage.getItem("user")); }; document.addEventListener("send_music", function(data) { var send_str = data.detail // {to_user:"toy123",music:Sdata.audio} ws.send(JSON.stringify(send_str)); }); document.addEventListener("new_ws",function(){ #这里监听的是userinfo传来的new_ws ws = new WebSocket("ws://192.168.13.55:3721/app/" + window.localStorage.getItem("user")); })

文章图片

调用联图接口生成二维码

文章图片

import requests,os,time,hashlib from uuid import uuid4 from setting import music_path,photo_path,MongoDB,LT_URL,QRCODE_PATH # LT_URL="http://qr.liantu.com/api.php?text=%s"调用联图接口生成二维码,值为qr_code def create_QR(count): qr_list= [] for i in range(count): qr_code = hashlib.md5(f"{uuid4()}{time.time()}{uuid4()}".encode("utf8")).hexdigest() res =requests.get(LT_URL%(qr_code)) qr_path = os.path.join(QRCODE_PATH,f"{qr_code}.jpg")with open(qr_path,"wb") as f: f.write(res.content)qr_dict ={"device_key":qr_code} qr_list.append(qr_dict) time.sleep(0.5)MongoDB.user.insert_many(qr_list)create_QR(10)