学习使用的第一个月
你好！ 这是我第一次使用 uni-app开发项目
##原先是做java开发的emmm…
- uni-app ，前端框架；
- 官网内容很方便使用 将代码片显示选择的高亮样式 进行展示；
- 还有手机端的页面展示效果，在文档中方便查找
- uni-app是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台
- …
直接上手第一个项目
一款游戏平台，没有上市，但是功能基本都实现了 (⊙﹏⊙)
开始进入知识点回顾咯
首先在main.js中加入连接的服务器路径
Vue.prototype.baseUrl=“服务器ip”;
首先需要了解结构
首先了解官方文档，这样看内容才会更加的清晰明了啊
先从登录开始
// 登录
<template>
<view class="uni-all">
<view class="uni-back">
<view class="jian">
<!-- <image src="../../static/icoj.png" @click="back"></image> -->
</view>
<view class="image">
<image class="tu" src="../../static/login.png"></image>
</view>
<view class="input-cell">
<image src="../../static/icz.png"></image>
<text class="uni-text">账号</text>
<input v-model="phone" class="account" type="number" placeholder="请 输 入 手 机 号" maxlength="11" style="margin-left: 45upx;">
</view>
<view class="input-cell">
<image src="../../static/ics.png"></image>
<text class="uni-text">密 码</text>
<input v-model="password" class="password" type="password" placeholder="请 输 入 密 码" style="margin-left: 45upx;">
<image class="pwd" src="../../static/mmmy.png"></image>
</view>
<view class="comment" @tap="denglu">
登录
</view>
<view class="kuang">
<view class="wei">
<view class="zuo" @tap="zhuce">
快速注册
</view>
<view class="you" @tap="nonepwd">
忘记密码？
</view>
</view>
</view>
<!-- 新增功能，其他软件进行登录 存储token 使用继承js
* 前端最好有token管理 继承父类 验证登陆权限的JS继承
* 以后需要判断权限登陆的地方都可以直接继承该JS就可以了 -->
<view class="provide">
<view class="qq" @tap="toqqlogin">
<image src="../../static/qqlogin.png"></image>
</view>
<view class="wx" @tap="towxlogin">
<image src="../../static/wxlogin.png"></image>
</view>
</view>
<view class="uni-wei">
<image src="../../static/bg.png"></image>
</view>
</view>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex'
export default {
data() {
return { //声明全局变量并赋值
"title": "登录/注册",
phone: '',
password: '',
positionTop: 0,
openid: "",
username: "",
avatar: '',
mobile: ''
}
},
methods: {
initPosition() {
/**
* 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
* 反向使用 top 进行定位，可以避免此问题。
*/
this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
},
toqqlogin() {
//首先获得服务商
uni.getProvider({
service: 'oauth', //授权登录
success: function(res) {
// console.log(res.provider)
uni.login({
provider: 'qq',
success: function(loginRes) {
console.log(JSON.stringify(loginRes));
// 获取用户信息
uni.getUserInfo({
provider: 'qq',
success: function(infoRes) {
console.log('用户昵称为：' + infoRes.userInfo.nickName);
console.log('openid: ' + infoRes.userInfo.openId)
console.log('用户头像路径为：' + infoRes.userInfo.avatarUrl);
var that = this
that.openid = infoRes.userInfo.openId
that.username = infoRes.userInfo.nickName
that.avatar = infoRes.userInfo.avatarUrl
//登录接口
uni.request({
url: 'http://47.92.196.173:1111/api/user/qqLogin', //地址---需要修改
method: 'POST',
data: {
"openid": that.openid,
"username": that.username,
"avatar": that.avatar,
"mobile": that.mobile
},
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
success: (ret) => {
console.log("登录" + ret.data.data)
if (ret.data.code == 1) {
uni.hideLoading();
uni.showToast({
title: '登录成功',
icon: 'none'
});
uni.switchTab({
url: '../index1-bt/index1-bt'
});
uni.setStorage({
key: 'user_info',
data: ret.data.data,
success: function() {
that.user_info = ret.data.data
}
});
} else {
uni.showToast({
title: ret.data.msg,
icon: 'none'
});
}
},
error: (e) => {
uni.hideLoading();
uni.showToast({
title: ret.data.msg,
icon: 'none'
});
}
});
},
});
}
});
}
});
},
towxlogin() {
//首先获得服务商
uni.getProvider({
service: 'oauth', //授权登录
success: function(res) {
// console.log(res.provider)
uni.login({
provider: 'weixin',
success: function(loginRes) {
console.log(JSON.stringify(loginRes));
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
console.log('用户昵称为：' + infoRes.userInfo.nickName);
console.log('openid: ' + infoRes.userInfo.openId)
console.log('用户头像路径为：' + infoRes.userInfo.avatarUrl);
var that = this
that.openid = infoRes.userInfo.openId
uni.request({
url: 'http://47.92.196.173:11112/api/user/qqLogin', //地址---需要修改
method: 'POST',
data: {
"openid": that.openid
},
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
success: (ret) => {
console.log("登录" + ret.data.data)
if (ret.data.code == 1) {
uni.hideLoading();
uni.showToast({
title: '登录成功',
icon: 'none'
});
uni.switchTab({
url: '../index1-bt/index1-bt'
});
uni.setStorage({
key: 'user_info',
data: ret.data.data,
success: function() {
that.user_info = ret.data.data
}
});
} else if (ret.data.code == 211) {
uni.hideLoading();
uni.showToast({
title: '您还没有注册过账号！将为您跳转注册',
icon: 'none'
});
uni.switchTab({
url: '../register/register'
});
} else {
uni.showToast({
title: ret.data.msg,
icon: 'none'
});
}
},
error: (e) => {
uni.hideLoading();
uni.showToast({
title: ret.data.msg,
icon: 'none'
});
}
});
},
});
}
});
},
});
},
denglu() { //登录接口
var that = this;
if (that.phone == '') {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return false;
} else if (that.password == '') {
uni.showToast({
title: '请输入密码',
icon: 'none'
});
return false;
};
uni.request({
url: this.baseUrl + '/api/user/login', //地址---需要修改
method: 'POST',
data: {
"account": that.phone,
"password": that.password,
},
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
success: (ret) => {
console.log(ret);
if (ret.data.code == 1) { //判断字段
uni.hideLoading();
uni.showToast({
title: '登录成功',
icon: 'none'
});
uni.switchTab({
url: '../index1-bt/index1-bt'
});
uni.setStorage({
key: 'user_info',
data: ret.data.data.userinfo,
success: function() {
that.user_info = ret.data.data.userinfo
}
});
uni.setStorage({
key: 'code',
data: ret.data.code,
});
} else {
uni.showToast({
title: ret.data.msg,
icon: 'none'
});
}
},
error: (e) => {
uni.hideLoading();
uni.showToast({
title: e.response.data.msg,
icon: 'none'
});
}
});
},
zhuce() {
uni.navigateTo({
url: '/pages/register/register'
});
},
nonepwd() {
uni.navigateTo({
url: '../forgetPwd/forgetPwd'
});
}
}
}
</script>
<style lang="scss">
.uni-all {
width: 100%;
display: flex;
flex-direction: column;
}
.uni-back {
width: 100%;
height: 80%;
background: #f7f7f7;
}
.input-cell {
display: flex;
align-items: center;
width: 600upx;
padding: 20upx;
margin-bottom: 20upx;
background: #fff;
border: 1upx #F5F5F5 solid;
margin-left: 50upx;
border-radius: 10upx;
justify-content: space-between;
}
.input-cell {
image {
width: 40upx;
height: 45upx;
}
}
.input-cell input {
flex: 1;
}
.image {
width: 100%;
margin: 3rem auto;
text-align: center;
color: #FFFFFF;
margin-top: 2rem;
}
.jian {
width: 25upx;
height: 30upx;
margin-top: 90upx;
margin-left: 20upx;
}
.tu {
width: 38%;
height: 70upx;
margin: 0 auto;
}
.input-cell .pwd {
height: 25upx;
width: 45upx;
}
.uni-text {
margin-left: 16upx;
}
.comment {
background: #feda00;
height: 90upx;
width: 645upx;
margin: 0 auto;
text-align: center;
line-height: 100upx;
border-radius: 10upx;
box-shadow: #DDDDDD 2px 2px 2px 0px;
}
.kuang {
width: 90%;
margin-left: 38upx;
}
.wei {
height: 100upx;
align-items: center;
display: flex;
justify-content: space-between;
}
.wei .zuo {
text-align: left;
color: #1971d2;
}
.wei .you {
text-align: right;
}
.provide {
height: 8rem;
display: flex;
justify-content: center;
}
.qq image {
width: 70upx;
height: 70upx;
padding: 30upx;
}
.wx image {
width: 80upx;
height: 80upx;
padding: 30upx;
}
.uni-wei {
width: 100%;
height: 5rem;
}
.uni-wei image {
width: 100%;
height: 360upx;
}
</style>
当时第三方的登录，客户没有搞定appid,目前可能会出现调试错误
由于第一次排版，看上去比较乱，，，
注册
这里仅仅展示发送短信验证
<input v-model="captcha" class="text" type="text" placeholder="请 输 入 验 证 码">
<view class="btn" v-if="stop==true" @tap="getcaptcha">获取验证码</view>
<view style="margin-left: 1.5rem;" v-if="stop==false">{{countdown}}秒</view>
发送短信验证的请求
uni.request({
url: this.baseUrl + '/api/sms/send', //发送短信验证
method: 'POST',
data: {
"mobile": that.mobile
},
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
success: (ret) => {
console.log(ret, '发送注册')
if (ret.data.code == 1) { //判断字段
uni.hideLoading();
uni.showToast({
title: '发送成功',
icon: 'none'
});
} else {
uni.showToast({
title: ret.data.msg,
icon: 'none'
})
}
},
error: (e) => {
uni.hideLoading();
}
});
that.stop = false;
that.timer = setInterval(() => {
that.countdown--
if (that.countdown <= 0) {
clearInterval(that.timer)
that.countdown = 0
that.stop = true
}
}, 1000);
6108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
