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>

运行结果

在这里插入图片描述

总结

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

posted @   前端导师歌谣  阅读(496)  评论(0)  编辑  收藏  举报  
相关博文：
·  前端项目实战壹佰伍拾捌react-admin+material ui-react-admin之useLogin
·  前端项目实战214-react实现移动端控制界面设置
·  Uni-app Hello World
·  项目开始，问题的开始
·  uniapp---使用uView
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示