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="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'
              );  
        })

关于注册

注册和以前一样,获取数据发送数据的过程,这次加入了单选 我是爸爸或我是妈妈

<div class="mui-input-row mui-radio mui-left">
                    <label>我是妈妈</label>
                    <input name="gender" type="radio" checked value="1">#checked 默认选择
                </div>
                <div class="mui-input-row mui-radio mui-left">
                    <label>我是爸爸</label>
                    <input name="gender" type="radio" value="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 = 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 = "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)