uni-app官方教程,uniapp实现登录
UNI-APP开发(仿饿)开发课程：进入学习
推荐（免费）：uni-app开发教程
文章目录
前言，总体配置1。微信小程序配置2。APP配置2。微信小程序1的第三方登录。判断是否登录2。登录页面3的开发。APP 4的第三方登录。共享界面1。小程序分享2。应用程序共享摘要前言
主要介绍app开发的两个基本功能，第三方登录和分享：包括一般登录配置，微信小程序和APP的第三方登录方式，分享到聊天和朋友圈。uni-app有不同的接口和实现方式。
一、通用配置
因为小程序和APP登录接口不同，前端需要跨端兼容处理。同时，微信等平台的小程序一般只支持其宿主程序的第三方登录，而不能包括其他常见的第三方登录方式，如微博、QQ等。所以需要和APP分开。
1.微信小程序端配置
微信小程序必须配置appid。你需要申请小程序开发者，并获得appid和相关密钥，以支持个人开发者。
获取appid后，编辑manifest.json可以选择要配置的微信小程序，也可以选择source视图填充，如下图：
mp-weixin :
Appid: appid}可以点击https://developers . weixin . QQ . com/mini program/dev/API/open-API/user-info/wx . get userinfo . html查看微信官方文档。
使用HBuilder提供的测试AppID可能会报错，比如无法读取undefined的属性 force update ，可以在微信公众平台https://developers.weixin.qq.com/community/welogin? Redirect _ URL=/沙盒环境测试号AppID和AppSecret信息申请项目测试，不会再输出错误。
2.APP端配置
APP支持微信、QQ、微博等多种第三方登录方式。这些都需要申请相应的开发者，获得相应的appid。
获取对应的appid后，编辑manifest.json，进行可视化操作，选择App模块配置，进行OAuth认证配置，选择需要的登录方式，如QQ、微信，如下：
选择相应的登录方式后，需要填写AppID等信息。
二、微信小程序第三方登录
1.判断是否登录
微信小程序登录前，需要确定是否登录。此时可以在App.vue中定义，因为app.vue中定义的变量和方法是全局变量和方法，所以可以在其他页面中调用，只需要用global关键字声明即可。
登录的一般原则是：
根据密钥从本地缓存中获取用户id、随机码等信息，然后请求服务器验证用户是否存在。随机码是为了提高数据接口的安全性而建立的。除此之外还有Redis，MemCache等。也可以用来保证安全。
首先定义一个判断是否登录App.vue的全局方法，如下：
脚本
导出默认值{
onLaunch: function() {
console.log(“应用程序启动”)
},
onShow: function() {
console.log(“应用程序显示”)
},
onHide: function() {
console.log(“应用程序隐藏”)
}
}
global.isLogin=function() {
尝试{
var suid=uni . getstoragesync( suid )；
var srand=uni . getstoragesync( srand )；
}catch(e){
//TODO处理异常
}
if(suid== srand==){
返回false
}
否则{
return [suid，srand]；
}
}/脚本样式
/*每个页面的通用CSS */。红色{
颜色：# ff0000
}/style然后调用index.vue中的全局方法，如下所示：
模板
视角
索引./view/templatescript
导出默认值{
data() {
返回{
}
},
onLoad() {
var RES=global . is login()；
如果(！res){
uni.showModal({
标题：“登录提醒”，
内容：请登录，
成功：函数(){
uni.navigateTo({
URL:“/pages/log in”
})
}
})
}
},
昂秀(){
},
onHide() {
},
方法：{
}
}/scriptstyle/style同时，在pages目录中创建新的login.vue页面，如下所示：
模板
视角
注册./view/templatescript
导出默认值{
data() {
返回{
}
},
onLoad() {
},
昂秀(){
},
onHide() {
},
方法：{
}
}/scriptstyle/style并将其添加到pages.json中，如下所示：
{
pages :[//pages数组中的第一项表示应用程序的启动页面，引用：https://uniapp.dcloud.io/collocation/pages.
{
路径:页面/索引/索引，
样式:{
navigationBarTitleText : Uni Index ，
backgroundColor: #F0AD4E ，
navigationBarTextStyle:black
}
},
{
路径：页数/关于/关于，
样式:{
navigationBarTitleText : Uni About
}
},
{
路径:页面/新闻，
样式:{
navigationBarTitleText: Uni新闻，
navigationBarBackgroundColor : # DD 524d
}
},
{
路径:页面/登录，
样式:{
navigationBarTitleText: Uni登录，
navigationBarBackgroundColor : # 00 aaff
}
}
],
globalStyle: {
navigationBarTextStyle“:”白色，
navigationBarTitleText“:”你好uniapp ，
navigationBarBackgroundColor : # ff 557 f ，
backgroundColor: #fffae8
},
tabBar: {
颜色： #F0AD4E ，
selectedColor:#007AFF ，
backgroundColor:#FFFFFF ，
列表:[
{
页面路径:页面/索引/索引，
iconPath : static/imgs/index _ 0。巴布亚新几内亚，
selectedIconPath : static/imgs/index _ 1。巴布亚新几内亚，
文本: 首页
},
{
pagePath:pages/about/about ，
iconPath : static/imgs/about _ 0。巴布亚新几内亚，
selectedIconPath : static/imgs/about _ 1。巴布亚新几内亚，
文本:关于我们
}
]
},
条件:{ //模式配置，仅开发期间生效
current: 0，//当前激活的模式（列表的索引项)
列表:[{
名称:索引,//模式名称
路径:页面/索引/索引,//启动页面，必选
查询： interval=4000autoplay=false //启动参数，在页面的装载函数里面得到。
},
{
名称:关于,//模式名称
路径： pages/about/about ，//启动页面，必选
查询： interval=4000autoplay=false //启动参数，在页面的装载函数里面得到。
}
]
}}显示：
显然，获取到了未登录的状态后，跳转到了登录页。
2.登录页面开发
登录需要判断所在平台、进行跨端开发，因此需要进行条件编译,登录。某视频剪辑软件如下：
模板
视角
！- #ifdef MP-WEIXIN -
button type= primary open-type= get userinfo @ get userinfo= get userinfo with credentials= true 微信登录/按钮
！- #endif -
/view/templatescript
导出默认值{
data() {
返回{}
},
onLoad() {}，
onShow() {}，
onHide() {}，
方法：{
getuserinfo: function(res){
console.log(res)
}
}
}/脚本样式/样式显示：
可以看到，在成功登录后，会返回用户的相关信息；
在清除缓存并重新编译后，之前的登录状态不存在，需要重新登录。
登录后查看返回值表示留数包含了一些不加密的基础信息，详细信息属性下面有iv属性,是加密算法的初始向量,可以解密得到信息，还可以作为是否授权登录的判断标准；
原始数据，不包括敏感信息的原始数据字符串，用于计算签名。
其中不包含信息和会话密钥等信息，需要进一步获取：
先通过uni.login(对象)获取到代码，即用户登录凭证；
再携带代码，通过统一请求(对象)获取到信息和会话密钥。
login.vue如下：
模板
视角
！- #ifdef MP-WEIXIN -
button type= primary open-type= get userinfo @ get userinfo= get userinfo with credentials= true 微信登录/按钮
！- #endif -
/view/templatescript
导出默认值{
data() {
返回{}
},
onLoad() {}，
onShow() {}，
onHide() {}，
方法：{
getuserinfo: function(res1) {
console.log(res1)
如果(!res1.detail.iv) {
uni.showToast({
标题： 您已取消授权，登录失败，
图标："无"
})
返回错误的
}
uni.login({
提供商：微信，
成功：函数(res2) {
控制台。日志(res2)；
uni.request({
网址： https://API . weixin . QQ . com/SNS/jscode 2 session？appid=wxd 3d 4 ee 5 ed 8017903 secret=83c 0 D5 EFD FCA 99 fc 0509 ff 0d 8956 b 830 js _ code= res2。代码 grant _ type=authorization _ code ，
成功：函数(res3){
//获取信息和版本密钥
console.log(res3)
},
失败：函数(res4){
console.log(re4)
}
})
},
失败：函数(r){
控制台。对数(r)
}
});
}
}
}/脚本样式/样式显示：
显然，此时获取到了信息和会话密钥。
此外还可以获取unionid，其在满一定条件的情况下才会返回。
获取到了信息和会话密钥后，可以解密四。
通过微信官方提供的软件开发工具包(软件开发工具包)进行解密，可以实现解密的接口，如下：
login.vue如下：
模板
视角
！- #ifdef MP-WEIXIN -
button type= primary open-type= get userinfo @ get userinfo= get userinfo with credentials= true 微信登录/按钮
！- #endif -
/view/templatescript
导出默认值{
data() {
返回{}
},
onLoad() {}，
onShow() {}，
onHide() {}，
方法：{
getuserinfo: function(res1) {
console.log(res1)
如果(!res1.detail.iv) {
uni.showToast({
标题： 您已取消授权，登录失败，
图标："无"
})
返回错误的
}
uni.login({
提供商：微信，
成功：函数(res2) {
控制台。日志(res2)；
uni.request({
网址： https://API . weixin . QQ . com/SNS/jscode 2 session？appid=wxd 3d 4 ee 5 ed 8017903 secret=83c 0 D5 EFD FCA 99 fc 0509 ff 0d 8956 b 830 js _ code= res2。代码 grant _ type=authorization _ code ，
成功：函数(res3){
//获取信息和版本密钥
console.log(res3)
//解密
uni.request({
方法： POST ，
网址： https://hoa.hcoder.net/xcxencode/，
头：{ content-type : application/x-www-form-urlencoded }，
数据：{
appid: wxd3d4ee5ed8017903 ，
会话密钥：res3。数据。会话密钥，
四：res1.detail.iv，
加密数据：res1。细节。加密数据}，
成功：函数(res4){
console.log(res4)
}
})
},
失败：函数(res5){
console.log(re5)
}
})
},
失败：函数(r){
控制台。对数(r)
}
});
}
}
}/脚本样式/样式小程序登录时，可以设置选择携带手机号。
从之前按钮组件的开放式属性中可以发现，获取电话号码属性可以获取用户手机号，可以从@getphonenumber回调中获取到用户信息。
三、APP第三方登录
实现应用登录也是通过条件编译实现。
login.vue如下：
模板
视角
！- #ifdef MP-WEIXIN -
button type= primary open-type= get userinfo @ get userinfo= get userinfo with credentials= true 微信登录/按钮
！- #endif -
！- #ifdef APP-PLUS -
按钮类型= primary @ click= appWxLoin ，凭据= true 用微信登录/按钮
！- #endif -
button style= margin-top:50px；手机号码登录/按钮
/view/templatescript
导出默认值{
data() {
返回{}
},
onLoad() {}，
onShow() {}，
onHide() {}，
方法：{
//迷你程序
getuserinfo: function(res1) {
console.log(res1)
如果(!res1.detail.iv) {
uni.showToast({
标题： 您已取消授权，登录失败，
图标："无"
})
返回错误的
}
uni.login({
提供商：微信，
成功：函数(res2) {
控制台。日志(res2)；
uni.request({
网址： https://API . weixin . QQ . com/SNS/jscode 2 session？appid=wxd 3d 4 ee 5 ed 8017903 secret=83c 0 D5 EFD FCA 99 fc 0509 ff 0d 8956 b 830 js _ code=
res2。代码 grant _ type=authorization _ code ，
成功：函数(res3) {
//获取信息和版本密钥
console.log(res3)
//解密
uni.request({
方法： POST ，
网址： https://hoa.hcoder.net/xcxencode/，
标题：{
"内容类型":"应用程序/x-www-form-urlencoded "
},
数据：{
appid: wxd3d4ee5ed8017903 ，
会话密钥：res3。数据。会话密钥，
四：res1.detail.iv，
加密数据：res1。细节。加密数据}，
成功：函数(res4) {
console.log(res4)
}
})
},
失败：函数(res5) {
console.log(re5)
}
})
},
失败：函数(r) {
控制台。对数(r)
}
});
},
appWxLoin: function(){
console.log(登录.)
}
}
}/脚本样式/样式此时不需要开放式等属性，只需要进行事件绑定就可以。
显示：
手机端显示：
显然，此时实现了条件编译，在不同的设备显示不同的按钮；
同时手机端点击时，控制台也输出信息。
先实现登录，需要获取服务商,判断是否安装微信，如果已安装则申请登录验证，如下：
模板
视角
！- #ifdef MP-WEIXIN -
button type= primary open-type= get userinfo @ get userinfo= get userinfo with credentials= true 微信登录/按钮
！- #endif -
！- #ifdef APP-PLUS -
按钮类型= primary @ click= appWxLogin ，凭据= true 用微信登录/按钮
！- #endif -
button style= margin-top:50px；手机号码登录/按钮
/view/templatescript
导出默认值{
data() {
返回{}
},
onLoad() {}，
onShow() {}，
onHide() {}，
方法：{
//迷你程序
getuserinfo: function(res1) {
console.log(res1)
如果(!res1.detail.iv) {
uni.showToast({
标题： 您已取消授权，登录失败，
图标："无"
})
返回错误的
}
uni.login({
提供商：微信，
成功：函数(res2) {
控制台。日志(res2)；
uni.request({
网址： https://API . weixin . QQ . com/SNS/jscode 2 session？appid=wxd 3d 4 ee 5 ed 8017903 secret=83c 0 D5 EFD FCA 99 fc 0509 ff 0d 8956 b 830 js _ code=
res2。代码 grant _ type=authorization _ code ，
成功：函数(res3) {
//获取信息和版本密钥
console.log(res3)
//解密
uni.request({
方法： POST ，
网址： https://hoa.hcoder.net/xcxencode/，
标题：{
"内容类型":"应用程序/x-www-form-urlencoded "
},
数据：{
appid: wxd3d4ee5ed8017903 ，
会话密钥：res3。数据。会话密钥，
四：res1.detail.iv，
加密数据：res1。细节。加密数据}，
成功：函数(res4) {
console.log(res4)
}
})
},
失败：函数(res5) {
console.log(re5)
}
})
},
失败：函数(r) {
控制台。对数(r)
}
});
},
appWxLogin: function() {
console.log(登录.);
uni.getProvider({
服务：“oauth”，
成功：函数(资源){
console.log(资源提供者)
if(~ RES . provider。索引(微信){
uni.login({
提供商：微信，
成功：函数（登录){
控制台。log(JSON。stringify(log in RES))；
uni.getUserInfo({
提供商：微信，
成功：函数（信息){
控制台。log(JSON。stringify(infoRes))；
console.log(用户昵称为：信息。用户信息。昵称)；
}
});
}
});
}
}
});
}
}
}/脚本样式/样式显示：
手机端显示：
显然，实现了在应用端调用微信登录；
登录后，输出了相应的信息。
四、分享接口
分享是一个很重要的功能。
1.小程序分享
小程序只支持分享到聊天界面（包括微信好友和微信群),不支持分享到朋友圈，是使用onShareAppMessage生命周期实现的。
索引。某视频剪辑软件如下：
模板
视角
索引./view/templatescript
导出默认值{
data() {
返回{
}
},
onLoad() {
var RES=全局。是log in()；
如果(!res){
uni.showModal({
标题： 登录提醒，
内容： 请登录，
成功：函数(){
uni.navigateTo({
URL:"/页面/登录"
})
}
})
}
},
昂秀(){
},
onHide() {
},
onShareAppMessage:function(){
返回{
标题："共享测试…",
路径："页面/索引/索引"
}
},
方法：{
}
}/脚本样式/样式显示：
可以看到，实现了分享功能。
2.APP分享
应用中要实现分享，需要在manifest.json中进行配置，如下：
先实现分享纯文字，index.vue如下：
模板
视角
！- #ifdef APP-PLUS -
按钮类型=主要@click=共享点击分享/按钮
！- #endif -
/view/templatescript
导出默认值{
data() {
返回{
}
},
onLoad() {
},
昂秀(){
},
onHide() {
},
onShareAppMessage:function(){
返回{
标题："共享测试…",
路径："页面/索引/索引"
}
},
方法：{
share: function(){
uni.share({
提供商：微信，
场景： WXSceneSession ，
类型：1,
摘要： 我正在参加程序员年度博客之星活动，请点击链接https://bss.csdn.net/m/topic/blog_star2020/detail?用户名=cufeecr投一票吧，先在此谢过啦！
成功：函数(资源){
控制台。log( success: JSON。stringify(RES))；
},
失败：函数（错误){
控制台。log( fail: JSON。stringify(err))；
}
});
}
}
}/脚本样式/样式显示：
手机端显示：
显然，控制台输出了分享成功的信息；
同时，应用程序成功调用了微信分享。
再实现分享图文，如下：
模板
视角
！- #ifdef APP-PLUS -
按钮类型=主要@click=共享点击分享/按钮
！- #endif -
/view/templatescript
导出默认值{
data() {
返回{
}
},
onLoad() {
},
昂秀(){
},
onHide() {
},
onShareAppMessage:function(){
返回{
标题："共享测试…",
路径："页面/索引/索引"
}
},
方法：{
share: function(){
uni.share({
提供商：微信，
场景： WXSceneSession ，
类型：0,
https://bss.csdn.net/m/topic/blog_star2020/detail？用户名=cufeecr ，
标题：" cufeecr "年度博客之星评选，
摘要： 我正在参加程序员年度博客之星活动，请点击链接https://bss.csdn.net/m/topic/blog_star2020/detail?用户名=cufeecr投一票吧，先在此谢过啦！
图片来源： https://img-blog . csdnimg . cn/20210112093810423 . png ，
成功：函数(资源){
控制台。log( success: JSON。stringify(RES))；
},
失败：函数（错误){
控制台。log( fail: JSON。stringify(err))；
}
});
}
}
}/脚本样式/样式显示：
手机端显示：
显然，实现了分享图文到微信好友或微信群。
还可以分享到微信朋友圈，如下：
模板
视角
！- #ifdef APP-PLUS -
按钮类型=主要@click=共享点击分享/按钮
！- #endif -
/view/templatescript
导出默认值{
data() {
返回{
}
},
onLoad() {
},
昂秀(){
},
onHide() {
},
onShareAppMessage:function(){
返回{
标题："共享测试…",
路径："页面/索引/索引"
}
},
方法：{
share: function(){
uni.share({
提供商：微信，
场景： WXSenceTimeline ，
类型：2,
图片来源： https://img-blog . csdnimg . cn/20210112093810423 . png ，
成功：函数(资源){
控制台。log( success: JSON。stringify(RES))；
},
失败：函数（错误){
控制台。log( fail: JSON。stringify(err))；
}
});
}
}
}/脚本样式/样式显示：
手机端显示：
已经实现了分享消息到朋友圈。
总结
第三方登录和分享是应用和小程序的基本功能，对于应用和小程序有不同的实现方式，相比较而言，应用程序实现更简单，都是其他功能的基础和起步。
更多相关免费了解敬请关注uni_app教程栏目！以上就是单一应用程序入门教程之第三方登录和分享的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。