目录
一.突如起来的变化及内部调整
当服务器端的第三方回调即将结束时，组内负责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进行项目的开发、数据的发送以及和后端的交互。
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
