赞
踩
大家好 我是歌谣 最近遇到了一个新的问题 就是兼容一个安卓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>

遇到问题不要慌张 要想着如何去解决问题 我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号 关注前端小歌谣学习前端知识
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。