uniapp+vue+uview适配安卓4.4项目实现简单登录和操作页面

我心飞翔 • 2023年7月18日上午10:36 • 前端教程 • 阅读 34

目录

前言

大家好我是歌谣最近遇到了一个新的问题就是兼容一个安卓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+vue+uview适配安卓4.4项目实现简单登录和操作页面

接着就开始换一种思路

利用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>

实现效果

uniapp+vue+uview适配安卓4.4项目实现简单登录和操作页面

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>

运行结果

uniapp+vue+uview适配安卓4.4项目实现简单登录和操作页面

总结

遇到问题不要慌张要想着如何去解决问题我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣学习前端知识

原文链接：https://juejin.cn/post/7256726151279935525 作者：歌谣

赞 (0)

0 0

html2Canvas：打印高清 PDF 的原理解析、MyBatis实现动态SQL更新、uni-app开发经验总结 |每日掘金第263期

上一篇 2023年7月18日上午10:31

hook+ant design实现input多行编写小案例

下一篇 2023年7月18日上午10:41

发表回复

登录后才能评论