当前位置:   article > 正文

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

uiapp集成vue

前言

大家好 我是歌谣 最近遇到了一个新的问题 就是兼容一个安卓4.4的平板仪器 利用react打包之后再用Hbulderx打包成apk之后白屏 于是就开始漫长的尝试过程

转折

多方测试发现 原生js可以识别 于是乎开始了原生js的开发

  1. <!DOCTYPE html>
  2. <html class="ui-page-login">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <link href="css/mui.min.css" rel="stylesheet" />
  8. <link href="css/style.css" rel="stylesheet" />
  9. <style>
  10. .area {
  11. margin: 20px auto 0px auto;
  12. }
  13. .mui-input-group {
  14. margin-top: 10px;
  15. }
  16. .mui-input-group:first-child {
  17. margin-top: 20px;
  18. }
  19. .mui-input-group label {
  20. width: 22%;
  21. }
  22. .mui-input-row label~input,
  23. .mui-input-row label~select,
  24. .mui-input-row label~textarea {
  25. width: 78%;
  26. }
  27. .mui-checkbox input[type=checkbox],
  28. .mui-radio input[type=radio] {
  29. top: 6px;
  30. }
  31. .mui-content-padded {
  32. margin-top: 25px;
  33. }
  34. .mui-btn {
  35. padding: 10px;
  36. }
  37. .link-area {
  38. display: block;
  39. margin-top: 25px;
  40. text-align: center;
  41. }
  42. .spliter {
  43. color: #bbb;
  44. padding: 0px 8px;
  45. }
  46. .oauth-area {
  47. position: absolute;
  48. bottom: 20px;
  49. left: 0px;
  50. text-align: center;
  51. width: 100%;
  52. padding: 0px;
  53. margin: 0px;
  54. }
  55. .oauth-area .oauth-btn {
  56. display: inline-block;
  57. width: 50px;
  58. height: 50px;
  59. background-size: 30px 30px;
  60. background-position: center center;
  61. background-repeat: no-repeat;
  62. margin: 0px 20px;
  63. /*-webkit-filter: grayscale(100%); */
  64. border: solid 1px #ddd;
  65. border-radius: 25px;
  66. }
  67. .oauth-area .oauth-btn:active {
  68. border: solid 1px #aaa;
  69. }
  70. .oauth-area .oauth-btn.disabled {
  71. background-color: #ddd;
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <header class="mui-bar mui-bar-nav">
  77. <h1 class="mui-title">登录</h1>
  78. </header>
  79. <div class="mui-content">
  80. <form id='login-form' class="mui-input-group">
  81. <div class="mui-input-row">
  82. <label>账号</label>
  83. <input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
  84. </div>
  85. <div class="mui-input-row">
  86. <label>密码</label>
  87. <input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
  88. </div>
  89. </form>
  90. <div class="mui-content-padded">
  91. <button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
  92. <!-- <div class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
  93. </div> -->
  94. </div>
  95. </div>
  96. <script src="js/mui.min.js"></script>
  97. <script src="js/mui.enterfocus.js"></script>
  98. <script src="js/app.js"></script>
  99. <script>
  100. var login=document.getElementById("login");
  101. var account=document.getElementById("account")
  102. var password=document.getElementById("password")
  103. var test=document.getElementById("test")
  104. //监听点击事件
  105. login.addEventListener("tap",function () {
  106. mui.ajax('http://xxxxxx/pda/login',{
  107. data:{
  108. account:document.getElementById("account").value,
  109. password:document.getElementById("password").value
  110. },
  111. dataType:'json',//服务器返回json格式数据
  112. type:'post',//HTTP请求类型
  113. timeout:10000,//超时时间设置为10秒;
  114. headers:{'Content-Type':'application/json'},
  115. success:function(response){
  116. // test.innerHTML=JSON.stringify(response)
  117. if(response.code==200){
  118. window.location.href="./home.html"
  119. mui.toast('登陆成功',{ duration:'long', type:'div' })
  120. }else{
  121. mui.toast('登陆失败',{ duration:'long', type:'div' })
  122. }
  123. //服务器返回响应,根据响应结果,分析是否登录成功;
  124. },
  125. error:function(xhr,type,errorThrown){
  126. // test.innerHTML=JSON.stringify(xhr)
  127. //异常处理;
  128. console.log(type);
  129. }
  130. });
  131. });
  132. //触发submit按钮的点击事件
  133. mui.trigger(login,'tap')
  134. </script>
  135. </body>
  136. </html>

结果

结果遇到了一些问题 无法进行数据的双向绑定

实现结果

在这里插入图片描述

接着就开始换一种思路

利用uniapp+uview1.8+vue开发 login.vue

  1. <template>
  2. <view class="content">
  3. <!-- <image class="logo" src="/static/logo.png"></image>
  4. <view class="text-area">
  5. <text class="title">
  6. uView - 多平台快速开发的UI框架
  7. </text>
  8. </view>
  9. <view class="button-demo">
  10. <u-button type="primary" plain @click="$u.route('/pages/login/login')">通用登录页展示</u-button>
  11. </view> -->
  12. <u-form :model="form" ref="uForm">
  13. <u-form-item label="姓名">
  14. <u-input v-model="form.account" placeholder="请输入账号"></u-input>
  15. </u-form-item>
  16. <u-form-item label="密码">
  17. <u-input v-model="form.password" placeholder="请输入密码"></u-input>
  18. </u-form-item>
  19. </u-form>
  20. <view style="padding: 20px;">
  21. <u-button v-on:click="handleClick" type="primary" text="登录">登录</u-button>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. title: 'Hello',
  30. form: {
  31. account: "",
  32. password:""
  33. },
  34. status:"1"
  35. }
  36. },
  37. onLoad() {
  38. },
  39. methods: {
  40. handleClick(){
  41. // this.status="-1"
  42. // var that=this
  43. uni.$u.http.post('http://xxxxxx',{account: this.form.account, password: this.form.password}).then(res => {
  44. console.log(this,"22222")
  45. // that.status="-1"
  46. uni.navigateTo({
  47. url: '/pages/index/index',
  48. });
  49. }).catch(err => {
  50. console.log("-----------”")
  51. console.log(err,"11111")
  52. console.log("-----------”")
  53. })
  54. }
  55. }
  56. }
  57. </script>
  58. <style lang="scss" scoped>
  59. .content {
  60. display: flex;
  61. flex-direction: column;
  62. align-items: center;
  63. justify-content: center;
  64. padding: 40rpx;
  65. }
  66. .logo {
  67. height: 200rpx;
  68. width: 200rpx;
  69. margin-top: 100rpx;
  70. margin-left: auto;
  71. margin-right: auto;
  72. margin-bottom: 50rpx;
  73. }
  74. .text-area {
  75. display: flex;
  76. justify-content: center;
  77. }
  78. .title {
  79. font-size: 28rpx;
  80. color: $u-content-color;
  81. }
  82. .button-demo {
  83. margin-top: 80rpx;
  84. }
  85. </style>

实现效果

在这里插入图片描述

index.vue

  1. <template>
  2. <view class="content">
  3. <u-form ref="uForm">
  4. <u-form-item label="扫码">
  5. <u-input v-on:change="changeData" v-model="barcode" placeholder="请扫码"></u-input>
  6. </u-form-item>
  7. </u-form>
  8. <view>
  9. 款式:{{this.styleName||"暂无"}}
  10. </view>
  11. <view style="width: 100%;">
  12. <u-tabs :list="list" :is-scroll="false" :current="current" @change="changeIndex"></u-tabs>
  13. </view>
  14. <view v-if="current==0">
  15. <view v-for="(item,index) in styleShowStandardList" :key="item.id">
  16. <view @click="handleStandVisable(item.id)" style="width:100%;height:40px;position: relative;">
  17. {{item.standard}}
  18. <u-badge v-if="item.isCheck==1" style="position: absolute;top:0px;left: 10px;" type="success">
  19. </u-badge>
  20. </view>
  21. </view>
  22. </view>
  23. <view v-if="current==1">
  24. <view v-for="(item,index) in styleShowQustion" :key="item.id">
  25. <view @click="handleQustionVisable(item.id)" style="width:100%;height:40px;line-height:40px;position: relative;">
  26. {{item.question}}
  27. <u-badge style="position: absolute;top:0px;left: 10px;" :count="item.isCheck==1?item.rejectQty:0" type="success">
  28. </u-badge>
  29. </view>
  30. </view>
  31. </view>
  32. <u-popup mode="top" v-model="standShow">
  33. <u-form :model="form" ref="uForm">
  34. <u-form-item label="标准"><u-input v-model="standard" /></u-form-item>
  35. </u-form>
  36. <u-button @click="handleStandSubmit" type="success">保存</u-button>
  37. </u-popup>
  38. <u-popup mode="top" v-model="questionShow">
  39. <u-form :model="form" ref="uForm">
  40. <u-form-item label="不合格数量"><u-input v-model="count" /></u-form-item>
  41. </u-form>
  42. <u-button @click="handleQuestionSubmit" type="success">保存</u-button>
  43. </u-popup>
  44. <view style="width: 100%;">
  45. <u-tabs :list="partList" :show-bar="false" :is-scroll="true" :current="currentPart" @change="changePart"></u-tabs>
  46. </view>
  47. <view style="width: 100%;">
  48. <u-tabs :list="listdata" :is-scroll="false" :current="currentData" @change="changeDataIndex"></u-tabs>
  49. </view>
  50. <view v-if="currentData==0">
  51. <view v-for="(item,index) in partShowStandardList" :key="item.id">
  52. <!-- <u-badge :is-dot="item.rejectQty==0?true:false" type="success"> -->
  53. <view @click="handlePartStandVisable(item.id)" style="width:100%;height:40px;line-height:40px;position: relative;">
  54. {{item.standard}}
  55. <u-badge v-if="item.isCheck==1" style="position: absolute;top:0px;left: 10px;" type="success">
  56. </u-badge>
  57. </view>
  58. <!-- </u-badge> -->
  59. </view>
  60. </view>
  61. <view v-if="currentData==1">
  62. <view v-for="(item,index) in partShowQustion" :key="item.id">
  63. <view @click="handleQustionPartVisable(item.id)" style="width:100%;height:40px;line-height:40px;position: relative;">
  64. <span>{{item.question}}</span>
  65. <u-badge style="position: absolute;top:0px;left: 10px;" :count="item.isCheck==1?item.rejectQty:0" type="success">
  66. </u-badge>
  67. </view>
  68. </view>
  69. </view>
  70. <u-popup mode="top" v-model="partStandShow">
  71. <u-form :model="form" ref="uForm">
  72. <u-form-item label="标准"><u-input v-model="standardPart" /></u-form-item>
  73. </u-form>
  74. <u-button @click="handleStandPartSubmit" type="success">保存</u-button>
  75. </u-popup>
  76. <u-popup mode="top" v-model="questionPartShow">
  77. <u-form :model="form" ref="uForm">
  78. <u-form-item label="不合格数量"><u-input v-model="countPart" /></u-form-item>
  79. </u-form>
  80. <u-button @click="handleQuestionPartSubmit" type="success">保存</u-button>
  81. </u-popup>
  82. </view>
  83. </template>
  84. <script>
  85. export default {
  86. data() {
  87. return {
  88. countPart:0,
  89. standardPart:null,
  90. partStandShow:false,
  91. currentData:0,
  92. currentPart:0,
  93. questionShow:false,
  94. questionId:null,
  95. count:null,
  96. standardId: null,
  97. standard: null,
  98. standShow: false,
  99. title: 'Hello',
  100. styleName: "",
  101. barcode: "",
  102. chkBillId: null,
  103. styleChkBillId: null,
  104. partList: [],
  105. partShowStandardList:[],
  106. partShowQustion:[],
  107. regionId:0,
  108. questionPartId:null,
  109. list: [{
  110. name: '款式标准'
  111. }, {
  112. name: '款式问题'
  113. }],
  114. listdata: [{
  115. name: '款式部件标准'
  116. }, {
  117. name: '款式部件问题'
  118. }],
  119. current: 0,
  120. styleShowStandardList: [],
  121. styleShowQustion: [],
  122. questionPartShow:false
  123. }
  124. },
  125. watch: {
  126. barcode: {
  127. handler(oldValue, newValue) {
  128. this.changeData()
  129. },
  130. },
  131. currentData: {
  132. handler(oldValue, newValue) {
  133. console.log(newValue,"111111")
  134. if(newValue==0){
  135. uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectStandardByRegionId', {
  136. regionId: this.partList[index].id,
  137. billId: this.chkBillId
  138. }).then((response1) => {
  139. console.log(response1,"response1")
  140. this.partShowStandardList=response1
  141. })
  142. }else{
  143. uni.$u.http.get('http://xxxxxx/pda/scanCode/selectChkItemByRegionId', {
  144. regionId: this.partList[index].id,
  145. billId: this.chkBillId
  146. }).then((response1) => {
  147. console.log(response1,"response1")
  148. this.partShowQustion=response1
  149. })
  150. }
  151. },
  152. },
  153. },
  154. methods: {
  155. handleStandSubmit() {
  156. console.log(this.standard, this.styleChkBillId, this.id, this.standardId, "22222")
  157. uni.$u.http.post('http://xxxxxxx/pda/chkBill/standard/updateStandardByBillIdAndStyleId', {
  158. checkValue: this.standard,
  159. billId: this.styleChkBillId,
  160. styleId: this.id,
  161. standardId: this.standardId
  162. }).then((response1) => {
  163. this.standShow = false
  164. this.changeData()
  165. })
  166. },
  167. handleStandPartSubmit() {
  168. console.log(this.standard, this.styleChkBillId, this.id, this.standardId, "22222")
  169. uni.$u.http.post('http://xxxxxxxxx/pda/chkBill/standard/update', {
  170. checkValue: this.standardPart,
  171. billId: this.chkBillId,
  172. regionId: this.regionId,
  173. standardId: this.standardPartId
  174. }).then((response1) => {
  175. uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectStandardByRegionId', {
  176. regionId: this.regionId,
  177. billId: this.chkBillId
  178. }).then((response1) => {
  179. console.log(response1,"response1")
  180. this.partShowStandardList=response1
  181. })
  182. this.partStandShow = false
  183. })
  184. },
  185. handleQuestionSubmit() {
  186. console.log(11111)
  187. console.log(this.standard, this.styleChkBillId, this.id, this.standardId, "22222")
  188. uni.$u.http.post('http://xxxxxxxxx/pda/chkBill/item/updateRejectQtyByBillIdAndStyleId', {
  189. rejectQty: this.count,
  190. billId: this.styleChkBillId,
  191. styleId: this.id,
  192. questionId: this.questionId
  193. }).then((response1) => {
  194. this.questionShow = false
  195. this.changeData()
  196. })
  197. },
  198. handleQuestionPartSubmit() {
  199. console.log(11111)
  200. console.log(this.standard, this.styleChkBillId, this.id, this.standardId, "22222")
  201. uni.$u.http.post('http://xxxxxxxxxx/pda/chkBill/item/update', {
  202. rejectQty: this.countPart,
  203. billId: this.chkBillId,
  204. regionId: this.regionId,
  205. questionId: this.questionPartId
  206. }).then((response1) => {
  207. uni.$u.http.get('http://xxxxxxxxx/pda/scanCode/selectChkItemByRegionId', {
  208. regionId: this.regionId,
  209. billId: this.chkBillId
  210. }).then((response1) => {
  211. console.log(response1,"response1")
  212. this.partShowQustion=response1
  213. })
  214. this.questionPartShow=false
  215. })
  216. },
  217. handlePartStandVisable(standardPartId) {
  218. this.standardPartId = standardPartId
  219. this.partStandShow = true
  220. },
  221. handleStandVisable(standardId) {
  222. this.standardId = standardId
  223. this.standShow = true
  224. },
  225. handleQustionVisable(questionId){
  226. this.questionId = questionId
  227. this.questionShow = true
  228. },
  229. handleQustionPartVisable(questionPartId){
  230. this.questionPartId = questionPartId
  231. this.questionPartShow = true
  232. },
  233. changePart(index){
  234. console.log(this.chkBillId,this.partList[index].id,"index")
  235. this.currentPart=index
  236. this.regionId=this.partList[index].id
  237. if(this.currentData==0){
  238. uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectStandardByRegionId', {
  239. regionId: this.partList[index].id,
  240. billId: this.chkBillId
  241. }).then((response1) => {
  242. console.log(response1,"response1")
  243. this.partShowStandardList=response1
  244. })
  245. }else{
  246. uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectChkItemByRegionId', {
  247. regionId: this.partList[index].id,
  248. billId: this.chkBillId
  249. }).then((response1) => {
  250. console.log(response1,"response1")
  251. this.partShowQustion=response1
  252. })
  253. }
  254. },
  255. changeIndex(index) {
  256. this.current = index
  257. },
  258. changeDataIndex(index){
  259. this.currentData = index
  260. },
  261. //数据改变得函数
  262. changeData() {
  263. uni.$u.http.get('http://xxxxxx/pda/scanCode/scanCode', {
  264. barCode: this.barcode
  265. }).then((response) => {
  266. let arr = []
  267. response.regionList && response.regionList.map((item, index) => {
  268. arr.push({
  269. id: item.id,
  270. name: item.name
  271. })
  272. })
  273. this.styleName = response.name
  274. this.partList = arr
  275. console.log(response,"responseresponseresponse")
  276. this.chkBillId = response.chkBillId
  277. this.styleChkBillId = response.styleChkBillId
  278. this.id = response.id
  279. uni.$u.http.get('http://xxxxxx/pda/scanCode/selectChkItemByStyleId', {
  280. styleId: response.id,
  281. billId: response.styleChkBillId
  282. }).then((response1) => {
  283. console.log(response1, "response1")
  284. this.styleShowQustion = response1
  285. })
  286. uni.$u.http.get('http://xxxxxxxx/pda/scanCode/selectStandardByStyleId', {
  287. styleId: response.id,
  288. billId: response.styleChkBillId
  289. }).then((response2) => {
  290. console.log(response2, "response2")
  291. this.styleShowStandardList = response2
  292. })
  293. })
  294. }
  295. }
  296. }
  297. </script>
  298. <style lang="scss" scoped>
  299. .content {
  300. display: flex;
  301. flex-direction: column;
  302. align-items: center;
  303. justify-content: center;
  304. padding: 40rpx;
  305. }
  306. .logo {
  307. height: 200rpx;
  308. width: 200rpx;
  309. margin-top: 100rpx;
  310. margin-left: auto;
  311. margin-right: auto;
  312. margin-bottom: 50rpx;
  313. }
  314. .text-area {
  315. display: flex;
  316. justify-content: center;
  317. }
  318. .title {
  319. font-size: 28rpx;
  320. color: $u-content-color;
  321. }
  322. .button-demo {
  323. margin-top: 80rpx;
  324. }
  325. </style>

运行结果

在这里插入图片描述

总结

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/367659
推荐阅读
相关标签