uni登录 uni登录注册

今天给各位分享uni登录的知识，其中也会对uni登录注册进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

uniapp小程序一键登录

1.一键登录使用自身提供的api 第一步在onload里面调用他的uni.login的api获取到 openid 用户唯一标识，unionid 开放平台唯一标识 ，session_key  会话密钥  

2.button  open-type="getPhoneNumber"  @getphonenumber="onGetPhoneNumber"  微信一键登录/button

以上有不足还请多多指教  

uniapp点击按钮进行登录

view class="0ad6-a4f1-a01e-cc4e content start-bg"

image class="a4f1-a01e-cc4e-5aa2 bg-image"/image

view class="a01e-cc4e-5aa2-57c4 uni-padding-wrap uni-common-mt login-area"

view class="cc4e-5aa2-57c4-bfb3 uni-flex uni-row login-row"

view class="5aa2-57c4-bfb3-94b7 text" style="-webkit-flex: 1;flex: 1;"

input class="27f2-a4ac-171a-3f32 uni-input" placeholder-class="a4ac-171a-3f32-297e uni-input-placeholder" type="text"

placeholder="请输入用户名" v-model="username"

/view

/view

view class="171a-3f32-297e-a0c8 uni-flex uni-row login-row"

view class="3f32-297e-a0c8-b2f8 text" style="-webkit-flex: 1;flex: 1;"

input class="297e-a0c8-b2f8-fc13 uni-input" placeholder-class="a0c8-b2f8-fc13-bfc1 uni-input-placeholder" type="password"

placeholder="请输入密码" v-model="password"

password="true"

/view

/view

/view

view class="b2f8-fc13-bfc1-2c8d btn-area"

button class="fc13-bfc1-2c8d-0ad6 btn-login" href="javascript:;" @click="login"登录/button

/view

/view

在script中定义

username: '',

password: '',

cid: ''

login() {

var _self = this;

uni.request({

url: getApp().globalData.server_ip + '/api/login', //登录(key-value)。

data: {

account: _self.username,

password: _self.password,

deviceToken: "121"

},

method: "POST",

header: {

'content-type': 'application/x-www-form-urlencoded', // 对应后台key-value传值

},

success: (res) = {

if (res.data.code == 20000) {

// 成功后uni登录，将用户信息存储到本地

uni.setStorage({

key: 'user_info',

data: res.data,

success: function() {

uni.redirectTo({

url: 'shouye',

})

}

});

} else {

uni.showToast({

title: res.data.message,

position: 'bottom'

});

}

},

});

},

}

其中styleuni登录的样式

template {

height: 100%;

width: 100%;

}

.start-bg {

background-color: #FFFFFF;

width: 100%;

height: 100%;

}

.bg-image {

width: 100%;

height: 509rpx;

}

.content {

display: flex;

flex-direction: column;

align-items: center;

}

.login-area {

width: 80%;

margin-left: 10%;

}

.login-label-text {

font-family: AdobeHeitiStd-Regular;

font-size: 25rpx;

font-weight: normal;

font-stretch: normal;

letter-spacing: 0px;

color: #a1a1a1;

text-align: center;

}

.login-label-icon {

text-align: center;

}

.login-input {

float: left;

vertical-align: bottom;

width: 100%;

}

.uni-input-placeholder {

font-size: 25rpx;

color: #c2bebe;

}

.btn-area {

margin-top: 100rpx;

display: flex;

justify-content: center;

}

.btn-login{

background-color: #4da2ff;

border-radius: 49px;

color: #FFFFFF;

width: 616rpx;

height: 100rpx;

line-height: 100rpx;

text-align: center;

vertical-align: middle;

}

/style

uniapp预登录成功一键登录失败

uniapp预登录成功一键登录失败的原因是uni.preLogin明确提到不支持H5。uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

uni-app app端微信登录

打开 manifest.json - App模块权限配置，勾选 OAuth(登录鉴权)。

打开 manifest.json - App SDK配置，查看到登录鉴权。在说明中有蓝色链接，其中包括向微信、QQ、微博等平台申请sdk的链接。

向微信、QQ、微博等平台申请到sdk的信息后，回填到manifest里。

这些配置需要打包生效，真机运行仍然是HBuilder基座的设置，可使用 自定义基座包 (opens new window) 。离线打包请参考离线打包文档在原生工程中配置。

配置并打包后，通过uni.getProvider可以得到配置的结果列表，注意这里返回的是manifest配置的，与手机端是否安装微信、QQ、微博无关。

// 微信登录

wechatLogin() {

let _this = this;

if(uni.getSystemInfoSync().platform == 'android' || uni.getSystemInfoSync().platform == 'ios') {

uni.getProvider({

service: 'oauth',

success: function (res) {

// console.log(111,res)

uni.login({

provider: 'weixin',

// onlyAuthorize: true,

success: function(loginRes) {

// console.log(loginRes)

// 获取用户信息

uni.getUserInfo({

provider: 'weixin',

success: function (infoRes) {

// console.log('用户昵称为：' + JSON.stringify(infoRes));

let obj = JSON.parse(JSON.stringify(infoRes))

let newObj = {

access_token: loginRes.authResult.access_token,

openId: obj.userInfo.openId,

nickName: obj.userInfo.nickName,

avatarUrl: obj.userInfo.avatarUrl,

unionId: obj.userInfo.unionId,

};

// console.log(newObj)

_this.getOpenidAndUserinfo(newObj)

},

fail:function(fail){

console.log(fail)

}

});

}

});

}

});

}

},

关于uni登录和uni登录注册的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。