前言
大家好 我是歌谣 最近遇到了一个新的问题 就是兼容一个安卓4.4的平板仪器 利用react打包之后再用Hbulderx打包成apk之后白屏 于是就开始漫长的尝试过程
转折
多方测试发现 原生js可以识别 于是乎开始了原生js的开发
<!DOCTYPE html> <html class="ui-page-login"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,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> </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 class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a> </div> --> </div> </div> <script src="js/mui.min.js"></script> <script src="js/mui.enterfocus.js"></script> <script src="js/app.js"></script> <script> var login=document.getElementById("login"); var account=document.getElementById("account") var password=document.getElementById("password") var test=document.getElementById("test") //监听点击事件 login.addEventListener("tap",function () { mui.ajax('http://xxxxxx/pda/login',{ data:{ account:document.getElementById("account").value, password:document.getElementById("password").value }, dataType:'json',//服务器返回json格式数据 type:'post',//HTTP请求类型 timeout:10000,//超时时间设置为10秒； headers:{'Content-Type':'application/json'}, success:function(response){ // test.innerHTML=JSON.stringify(response) if(response.code==200){ window.location.href="./home.html" mui.toast('登陆成功',{ duration:'long', type:'div' }) }else{ mui.toast('登陆失败',{ duration:'long', type:'div' }) } //服务器返回响应，根据响应结果，分析是否登录成功； }, error:function(xhr,type,errorThrown){ // test.innerHTML=JSON.stringify(xhr) //异常处理； console.log(type); } }); }); //触发submit按钮的点击事件 mui.trigger(login,'tap') </script> </body> </html>
结果
结果遇到了一些问题 无法进行数据的双向绑定
实现结果
接着就开始换一种思路
利用uniapp+uview1.8+vue开发 login.vue
<template> <view class="content"> <!-- <image class="logo" src="/static/logo.png"></image> <view class="text-area"> <text class="title"> uView - 多平台快速开发的UI框架 </text> </view> <view class="button-demo"> <u-button type="primary" plain @click="$u.route('/pages/login/login')">通用登录页展示</u-button> </view> --> <u-form :model="form" ref="uForm"> <u-form-item label="姓名"> <u-input v-model="form.account" placeholder="请输入账号"></u-input> </u-form-item> <u-form-item label="密码"> <u-input v-model="form.password" placeholder="请输入密码"></u-input> </u-form-item> </u-form> <view style="padding: 20px;"> <u-button v-on:click="handleClick" type="primary" text="登录">登录</u-button> </view> </view> </template> <script> export default { data() { return { title: 'Hello', form: { account: "", password:"" }, status:"1" } }, onLoad() { }, methods: { handleClick(){ // this.status="-1" // var that=this uni.$u.http.post('http://xxxxxx',{account: this.form.account, password: this.form.password}).then(res => { console.log(this,"22222") // that.status="-1" uni.navigateTo({ url: '/pages/index/index', }); }).catch(err => { console.log("-----------”") console.log(err,"11111") console.log("-----------”") }) } } } </script> <style lang="scss" scoped> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40rpx; } .logo { height: 200rpx; width: 200rpx; margin-top: 100rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 28rpx; color: $u-content-color; } .button-demo { margin-top: 80rpx; } </style>
