uniapp+vue+uview适配安卓4.4项目实现简单登录和操作页面
前言
大家好 我是歌谣 最近遇到了一个新的问题 就是兼容一个安卓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>实现效果
index.vue
<template>
<view class="content">
<u-form ref="uForm">
<u-form-item label="扫码">
<u-input v-on:change="changeData" v-model="barcode" placeholder="请扫码"></u-input>
</u-form-item>
</u-form>
<view>
款式:{{this.styleName||"暂无"}}
</view>
<view style="width: 100%;">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="changeIndex"></u-tabs>
</view>
<view v-if="current==0">
<view v-for="(item,index) in styleShowStandardList" :key="item.id">
<view @click="handleStandVisable(item.id)" style="width:100%;height:40px;position: relative;">
{{item.standard}}
<u-badge v-if="item.isCheck==1" style="position: absolute;top:0px;left: 10px;" type="success">
</u-badge>
</view>
</view>
</view>
<view v-if="current==1">
<view v-for="(item,index) in styleShowQustion" :key="item.id">
<view @click="handleQustionVisable(item.id)" style="width:100%;height:40px;line-height:40px;position: relative;">
{{item.question}}
<u-badge style="position: absolute;top:0px;left: 10px;" :count="item.isCheck==1?item.rejectQty:0" type="success">
</u-badge>
</view>
</view>
</view>
<u-popup mode="top" v-model="standShow">
<u-form :model="form" ref="uForm">
<u-form-item label="标准"><u-input v-model="standard" /></u-form-item>
</u-form>
<u-button @click="handleStandSubmit" type="success">保存</u-button>
</u-popup>
<u-popup mode="top" v-model="questionShow">
<u-form :model="form" ref="uForm">
<u-form-item label="不合格数量"><u-input v-model="count" /></u-form-item>
</u-form>
<u-button @click="handleQuestionSubmit" type="success">保存</u-button>
</u-popup>
<view style="width: 100%;">
<u-tabs :list="partList" :show-bar="false" :is-scroll="true" :current="currentPart" @change="changePart"></u-tabs>
</view>
<view style="width: 100%;">
<u-tabs :list="listdata" :is-scroll="false" :current="currentData" @change="changeDataIndex"></u-tabs>
</view>
<view v-if="currentData==0">
<view v-for="(item,index) in partShowStandardList" :key="item.id">
<!-- <u-badge :is-dot="item.rejectQty==0?true:false" type="success"> -->
<view @click="handlePartStandVisable(item.id)" style="width:100%;height:40px;line-height:40px;position: relative;">
{{item.standard}}
<u-badge v-if="item.isCheck==1" style="position: absolute;top:0px;left: 10px;" type="success">
</u-badge>
</view>
<!-- </u-badge> -->
</view>
</view>
<view v-if="currentData==1">
<view v-for="(item,index) in partShowQustion" :key="item.id">
<view @click="handleQustionPartVisable(item.id)" style="width:100%;height:40px;line-height:40px;position: relative;">
<span>{{item.question}}</span>
<u-badge style="position: absolute;top:0px;left: 10px;" :count="item.isCheck==1?item.rejectQty:0" type="success">
</u-badge>
</view>
</view>
</view>
<u-popup mode="top" v-model="partStandShow">
<u-form :model="form" ref="uForm">
<u-form-item label="标准"><u-input v-model="standardPart" /></u-form-item>
</u-form>
<u-button @click="handleStandPartSubmit" type="success">保存</u-button>
</u-popup>
<u-popup mode="top" v-model="questionPartShow">
<u-form :model="form" ref="uForm">
<u-form-item label="不合格数量"><u-input v-model="countPart" /></u-form-item>
</u-form>
<u-button @click="handleQuestionPartSubmit" type="success">保存</u-button>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
countPart:0,
standardPart:null,
partStandShow:false,
currentData:0,
currentPart:0,
questionShow:false,
questionId:null,
count:null,
standardId: null,
standard: null,
standShow: false,
title: 'Hello',
styleName: "",
barcode: "",
chkBillId: null,
styleChkBillId: null,
partList: [],
partShowStandardList:[],
partShowQustion:[],
regionId:0,
questionPartId:null,
list: [{
name: '款式标准'
}, {
name: '款式问题'
}],
listdata: [{
name: '款式部件标准'
}, {
name: '款式部件问题'
}],
current: 0,
styleShowStandardList: [],
styleShowQustion: [],
questionPartShow:false
}
},
watch: {
barcode: {
handler(oldValue, newValue) {
this.changeData()
},
},
currentData: {
handler(oldValue, newValue) {
console.log(newValue,"111111")
if(newValue==0){
uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectStandardByRegionId', {
regionId: this.partList[index].id,
billId: this.chkBillId
}).then((response1) => {
console.log(response1,"response1")
this.partShowStandardList=response1
})
}else{
uni.$u.http.get('http://xxxxxx/pda/scanCode/selectChkItemByRegionId', {
regionId: this.partList[index].id,
billId: this.chkBillId
}).then((response1) => {
console.log(response1,"response1")
this.partShowQustion=response1
})
}
},
},
},
methods: {
handleStandSubmit() {
console.log(this.standard, this.styleChkBillId, this.id, this.standardId, "22222")
uni.$u.http.post('http://xxxxxxx/pda/chkBill/standard/updateStandardByBillIdAndStyleId', {
checkValue: this.standard,
billId: this.styleChkBillId,
styleId: this.id,
standardId: this.standardId
}).then((response1) => {
this.standShow = false
this.changeData()
})
},
handleStandPartSubmit() {
console.log(this.standard, this.styleChkBillId, this.id, this.standardId, "22222")
uni.$u.http.post('http://xxxxxxxxx/pda/chkBill/standard/update', {
checkValue: this.standardPart,
billId: this.chkBillId,
regionId: this.regionId,
standardId: this.standardPartId
}).then((response1) => {
uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectStandardByRegionId', {
regionId: this.regionId,
billId: this.chkBillId
}).then((response1) => {
console.log(response1,"response1")
this.partShowStandardList=response1
})
this.partStandShow = false
})
},
handleQuestionSubmit() {
console.log(11111)
console.log(this.standard, this.styleChkBillId, this.id, this.standardId, "22222")
uni.$u.http.post('http://xxxxxxxxx/pda/chkBill/item/updateRejectQtyByBillIdAndStyleId', {
rejectQty: this.count,
billId: this.styleChkBillId,
styleId: this.id,
questionId: this.questionId
}).then((response1) => {
this.questionShow = false
this.changeData()
})
},
handleQuestionPartSubmit() {
console.log(11111)
console.log(this.standard, this.styleChkBillId, this.id, this.standardId, "22222")
uni.$u.http.post('http://xxxxxxxxxx/pda/chkBill/item/update', {
rejectQty: this.countPart,
billId: this.chkBillId,
regionId: this.regionId,
questionId: this.questionPartId
}).then((response1) => {
uni.$u.http.get('http://xxxxxxxxx/pda/scanCode/selectChkItemByRegionId', {
regionId: this.regionId,
billId: this.chkBillId
}).then((response1) => {
console.log(response1,"response1")
this.partShowQustion=response1
})
this.questionPartShow=false
})
},
handlePartStandVisable(standardPartId) {
this.standardPartId = standardPartId
this.partStandShow = true
},
handleStandVisable(standardId) {
this.standardId = standardId
this.standShow = true
},
handleQustionVisable(questionId){
this.questionId = questionId
this.questionShow = true
},
handleQustionPartVisable(questionPartId){
this.questionPartId = questionPartId
this.questionPartShow = true
},
changePart(index){
console.log(this.chkBillId,this.partList[index].id,"index")
this.currentPart=index
this.regionId=this.partList[index].id
if(this.currentData==0){
uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectStandardByRegionId', {
regionId: this.partList[index].id,
billId: this.chkBillId
}).then((response1) => {
console.log(response1,"response1")
this.partShowStandardList=response1
})
}else{
uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectChkItemByRegionId', {
regionId: this.partList[index].id,
billId: this.chkBillId
}).then((response1) => {
console.log(response1,"response1")
this.partShowQustion=response1
})
}
},
changeIndex(index) {
this.current = index
},
changeDataIndex(index){
this.currentData = index
},
//数据改变得函数
changeData() {
uni.$u.http.get('http://xxxxxx/pda/scanCode/scanCode', {
barCode: this.barcode
}).then((response) => {
let arr = []
response.regionList && response.regionList.map((item, index) => {
arr.push({
id: item.id,
name: item.name
})
})
this.styleName = response.name
this.partList = arr
console.log(response,"responseresponseresponse")
this.chkBillId = response.chkBillId
this.styleChkBillId = response.styleChkBillId
this.id = response.id
uni.$u.http.get('http://xxxxxx/pda/scanCode/selectChkItemByStyleId', {
styleId: response.id,
billId: response.styleChkBillId
}).then((response1) => {
console.log(response1, "response1")
this.styleShowQustion = response1
})
uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectStandardByStyleId', {
styleId: response.id,
billId: response.styleChkBillId
}).then((response2) => {
console.log(response2, "response2")
this.styleShowStandardList = response2
})
})
}
}
}
</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>运行结果
总结
遇到问题不要慌张 要想着如何去解决问题 我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号 关注前端小歌谣学习前端知识
