山东大学软件学院创新实训——飞讯（六）
目录
一.突如起来的变化及内部调整
二.uni-app的学习
三.uni-app的搭建
登录界面
（1）界面设计
（2）核心代码
注册界面
（1）界面设计
（2）核心代码
四.总结
一.突如起来的变化及内部调整
当服务器端的第三方回调即将结束时，组内负责android前端的成员退出了，当下，我们组内立刻讨论了相关的解决方案，android作为最为重要的一端，不能将其放弃，也是计划中最具有价值的一端，因为飞讯是便于团队成员合作和沟通的通讯软件，其便捷性需要保证，而且问卷的填写也需要移动端的支持，于是，经过讨论，我和负责PC端的组员联合优先完成移动端的开发。选用uni-app进行移动端的开发，该框架可实现web，小程序，android和ios的跨平台运行，可以弥补android端的缺失。
二.uni-app的学习
因为无android端的学习知识，但了解过一些vue的相关知识，所以选用了uni-app进行开发。首先，需要对uni-app进行基础的学习才可进行一定的开发。因此，我和原PC端的成员利用后面的几天进行uni-app的紧凑学习。
我们采用HBuilder进行uniapp的编写，uniapp的目录结构如下：
其中components存放组件，pages存放页面，static存放静态文件，uni_modules存放插件包，unpackage存放打包好的文件，APP.vue是uniapp的启动入口，manifest.json配置uniapp的相关模块，pages.json进行路由，uni.scss存放样式。
三.uni-app的搭建
由于负责android端成员的离开，我们剩下的时间并不多了，android端需要从0开始，而且又无相关的经验，只能寻找基础的教程以及一些简单的实战尽可能在最短的时间进行弥补。后面的几天计划将自己负责的后端和另一个成员的PC端先放下，共同学习uni-app的使用。在繁忙的几天抽出时间学习2,3天后，我和另一位同学经过讨论，我负责整体逻辑代码的构建和编写，他负责css等样式的设计，最终使样式和逻辑代码结合，尽可能在剩余的时间完成多一点内容。
因此，经过3天短暂的了解，开始了自己的第一个样例，样例如下：
登录界面
（1）界面设计
（2）核心代码
login: function(){if(this.username && this.password){console.log("提交");uni.request({url:"http://:8081/user/login",method:"POST",data:{userid:this.username,password:this.password},success:(res)=> {if(res.data.code == '400'){uni.showModal({title: "提示",content: res.data.msg,showCancel:false,success: (res)=> {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}});}else if(res.data.code == '200'){this.userSig = res.data.data.userSig;let promise = tim.login({userID: this.username, userSig: this.userSig});promise.then((imResponse)=> {//console.log(imResponse.data); // 登录成功uni.showLoading({title: '初始化中'});/* TUICalling.login({sdkAppID: , userID: this.username,userSig: this.userSig}); */if (imResponse.data.repeatLogin === true) {uni.showModal({title: "提示",content: "重复登录",showCancel:false,success: function (res) {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}});}else{uni.hideLoading();uni.switchTab({url:"../index/index"})}}).catch(function(imError) {uni.showModal({title: "提示",content: "服务器出了点问题",showCancel:false,success: function (res) {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}});});}}})}}注册界面
（1）界面设计
（2）核心代码
looks:function(){if(this.look){this.type = "password";this.look = !this.look;this.lookurl = "../../static/images/register/hide.png";}else{this.type = "text";this.look = !this.look;this.lookurl = "../../static/images/register/look.png";}},isEmail: function(e){let reg = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;this.email = e.detail.value;if(this.email.length > 0){if(reg.test(this.email)){this.invalid = false;this.isemail = true;}else{this.invalid = true;this.isemail = false;}}else{this.invalid = false;this.isemail = false;}this.isOk();},getUsername: function(e){this.username = e.detail.value;uni.request({url:"http://124.221.248.254:8081/user/registerCheck",method:"POST",data:{userid:this.username,},success:(res)=> {console.log(res.data.data.exist);this.exist = res.data.data.exist;if(this.exist == 'yes'){this.usernameemploy = true;this.isuser = false;this.userinvalid = false;}else if(this.exist == 'no'){this.usernameemploy = false;let reg = /^[a-zA-Z0-9_-]{6,16}$/;if(reg.test(this.username)){this.userinvalid = false;this.isuser = true;}else{this.userinvalid = true;this.isuser = false;}}this.isOk();}})},getPassword: function(e){this.password = e.detail.value;let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;if(reg.test(this.password)){this.ispassword = true;}else{this.ispassword = false;}this.isOk();},isOk: function(){if(this.isuser && this.isemail && this.ispassword){this.isok = true;}else{this.isok = false;}},四.总结
通过对uniapp的学习，我对uniapp的整体结构有了一定的了解，同时通过几天的学习和登录注册界面的实现，我对uniapp的有关操作有了一定的认识，并且知道了如何使用uniapp进行项目的开发、数据的发送以及和后端的交互。
山东大学软件学院创新实训——飞讯（六）相关推荐
- 山东大学软件学院创新实训——飞讯（四）
目录 一.目标概述 二.腾讯云im第三方回调 二.回调分类 三.回调示例 1.请求url 2.请求包示例 3.应答包示例 四.回调的保存 1.分析 2.实体类 3.controller层 4.serv ...
- 山东大学软件学院创新实训——飞讯（一）
目录 一.项目介绍 二.docker的安装 1.服务器的配置 2.安装需要的包 3.添加GPG密匙,并添加Docker-ce软件源 4.安装Docker-ce 5.测试运行 6.添加当前用户到 doc ...
- 山东大学软件学院创新实训——飞讯（八）
目录 一.目标概述 二.功能设计与实现 搜索好友 (1)界面设计 (2)功能实现 消息发送组件 (1)发送消息界面概览 (2)功能实现 三.总结 一.目标概述 经过前面对uniapp的学习和飞讯项目的 ...
- 山东大学软件学院创新实训——飞讯（十二）
目录 一.目标概述 二.功能设计与实现 问卷首页 (1)界面设计 (2)功能实现 问卷详情页 (1)界面设计 (2)功能实现 问卷二维码 (1)界面设计 (2)功能实现 回答详情 (1)界面设计 (2 ...
- 山东大学软件学院创新实训——飞讯（二）
目录 一.后端框架-springboot 二.springboot项目的创建 1.启动idea,依次选择File -->> New -->> project,弹出下框 编辑2 ...
- 山东大学软件学院创新实训——飞讯（十三）
目录 一.目标概述 二.功能代码 1.问卷的创建 2.问题的回答 三.界面展示 四.总结 一.目标概述 这次项目完成的功能是问卷的创建和回答部分,我负责后端的编写,另外一位同学负责前端的编写,从而完成 ...
- 山东大学软件学院创新实训——飞讯（十）
目录 一.目标概述 二.功能设计与实现 1.配置配置文件 2.编写后端代码 3.前端代码 三.总结 一.目标概述 这一次项目实施的目的是实现图片的上传和url的生成,因此,主要是前端上传图片代码和后端 ...
- 山东大学软件学院创新实训——飞讯（十一）
目录 一.目标概述 二.数据库设计 三.功能代码 1.工作日志的查询和展示 2.工作日志的添加 3.工作日志的修改 4.工作日志的删除 三.前后端联调后界面展示 四.总结 一.目标概述 本次项目实施的 ...
- 山东大学软件学院创新实训——飞讯（九）
目录 一.内部又一次调整 二.目标概述 三.功能设计与实现 界面设计 功能实现 三.总结 一.内部又一次调整 今天,组内的又一名同学决定退群,此时,我们组内已经退了两名成员,因此,任务越来越紧迫,我们 ...
最新文章
- 从网络上获取一张图片简单的
- apache 启动故障（httpd: apr_sockaddr_info_get() failed fo）
- 图形处理相关资源（面部识别、姿态估计、变形、、、）
- 一个很全的中断资料网站
- 怎样将WPS转换word格式？如何进行操作
- jQuery常用方法
- 【大开眼界】Python爬虫骚操作
- 使用TopShelf做windows服务安装 ---安装参数解释
- GRE阅读高频机经原文及答案之Design-Engineering
- github copilot插件安装
- C语言零基础入门级学习程序框架【系统学习第一天】
- 腾讯CDC标叔的十年交互设计感悟-20141117早读课
- Moss到底算不算叛逃？
- 腾讯云主机安装mysql
- Vagrant 手册之同步目录 - 基本用法
- Spring自定义AOP切面
- 消息队列8：RabbitMq的QOS实验
- pyepics --Auto-saving: simple save/restore PVs
- 玩转电源设计，8个优选逆变电源参考方案大合辑
- 深入浅出神经网络pdf,神经网络 pdf