uni-app 입문 튜토리얼 - 타사 로그인 및 공유
- coldplay.xixi앞으로
- 2021-01-18 17:37:203839검색
추천(무료): uni-app development tutorial
기사 디렉토리
- 서문
- 1. 일반 구성
- 1. 애플릿 구성
- 2 .APP 측면 구성
- 2. WeChat 애플릿의 타사 로그인
- 1. 로그인 여부 결정
- 2. 로그인 페이지 개발
- 3. APP 타사 로그인
- 4. 인터페이스 공유
-
- 1. 미니 프로그램 공유
- 2. 앱 공유
- 요약
서문
이 글에서는 주로 앱 개발의 두 가지 기본 기능인 타사 로그인과 공유를 소개합니다. 로그인 일반 구성, WeChat 미니 프로그램 및 앱의 타사 로그인 방법, 채팅 및 Moments 공유, uni-app 사용에는 인터페이스와 구현 방법이 다릅니다.
1. 일반 구성
미니 프로그램과 APP 로그인 인터페이스가 다르기 때문에, 크로스 엔드 호환성 처리는 동시에 프런트 엔드와 같은 플랫폼에서 미니 프로그램을 수행해야 합니다. WeChat은 일반적으로 자신이 속한 호스트 프로그램의 제3자 로그인만 지원합니다. Weibo, QQ 등과 같은 다른 일반적인 제3자 로그인 방법은 포함할 수 없으므로 앱과 분리되어야 합니다.
1. 위챗 미니 프로그램 구성
위챗 미니 프로그램은 appid로 구성해야 하며, appid 및 관련 키를 받아야 합니다. .
appid를 얻은 후 Manifest.json을 편집하여 WeChat 애플릿 구성을 완료하거나 소스 코드 보기를 입력할 수 있습니다. 지침은 다음과 같습니다. appid，需要申请小程序开发者并获取appid及相关秘钥，支持个人开发者。
获取appid后编辑manifest.json，可以选择微信小程序配置完成，也可以选择源码视图填充，示意如下:
"mp-weixin" : {
"appid" : "appid"}
可点击https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html查看微信官方文档。
在使用HBuilder提供的测试AppID可能会报错，例如Cannot read property 'forceUpdate' of undefined，此时可以在微信公众平台https://developers.weixin.qq.com/community/welogin?redirect_url=%2Fsandbox中申请沙箱环境测试号的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中定义全局的判断是否登录的方法，如下：
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
global.isLogin = function() {
try{
var suid = uni.getStorageSync('suid');
var srand = uni.getStorageSync('srand');
}catch(e){
//TODO handle the exception
}
if(suid == '' || srand == ''){
return false;
}
else{
return [suid, srand];
}
}</script><style>
/*每个页面公共css */
.red{
color:#ff0000;
}</style>
再在index.vue中调用全局方法，如下：
<template>
<view>
Index... </view></template><script>
export default {
data() {
return {
}
},
onLoad() {
var res = global.isLogin();
if(!res){
uni.showModal({
title: '登录提醒',
content: '请登录',
success:function(){
uni.navigateTo({
url: '/pages/login'
})
}
})
}
},
onShow() {
},
onHide() {
},
methods: {
}
}</script><style></style>
同时在pages目录下新建login.vue页面，如下：
<template>
<view>
login... </view></template><script>
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
},
onHide() {
},
methods: {
}
}</script><style></style>
并将其添加进pages.json中，如下：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "Uni Index",
"backgroundColor": "#F0AD4E",
"navigationBarTextStyle":"black"
}
},
{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "Uni About"
}
},
{
"path": "pages/news",
"style": {
"navigationBarTitleText": "Uni News",
"navigationBarBackgroundColor":"#DD524D"
}
},
{
"path": "pages/login",
"style": {
"navigationBarTitleText": "Uni Login",
"navigationBarBackgroundColor":"#00aaff"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "hello uniapp",
"navigationBarBackgroundColor": "#ff557f",
"backgroundColor": "#fffae8"
},
"tabBar": {
"color":"#F0AD4E",
"selectedColor":"#007AFF",
"backgroundColor":"#FFFFFF",
"list": [
{
"pagePath":"pages/index/index",
"iconPath":"static/imgs/index_0.png",
"selectedIconPath":"static/imgs/index_1.png",
"text": "首页"
},
{
"pagePath":"pages/about/about",
"iconPath":"static/imgs/about_0.png",
"selectedIconPath":"static/imgs/about_1.png",
"text":"关于我们"
}
]
},
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "index", //模式名称
"path": "pages/index/index", //启动页面，必选
"query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
},
{
"name": "about", //模式名称
"path": "pages/about/about", //启动页面，必选
"query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
}
]
}}
显示：
显然，获取到了未登录的状态后，跳转到了登录页。
2.登录页面开发
登录需要判断所在平台、进行跨端开发，因此需要进行条件编译，login.vue如下：
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
</view></template><script>
export default {
data() {
return {}
},
onLoad() {},
onShow() {},
onHide() {},
methods: {
getuserinfo: function(res){
console.log(res)
}
}
}</script><style></style>
显示：
可以看到，在成功登录后，会返回用户的相关信息；
在清除缓存并重新编译后，之前的登录状态不存在，需要重新登录。
登录后查看返回值res包含了一些不加密的基础信息，detail属性下面有iv属性，是加密算法的初始向量，可以解密得到信息，还可以作为是否授权登录的判断标准；
rawData，不包括敏感信息的原始数据字符串，用于计算签名。
其中不包含openid和session_key等信息，需要进一步获取：
先通过uni.login(OBJECT)获取到code，即用户登录凭证；
再携带code，通过uni.request(OBJECT)
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
</view></template><script>
export default {
data() {
return {}
},
onLoad() {},
onShow() {},
onHide() {},
methods: {
getuserinfo: function(res1) {
console.log(res1)
if (!res1.detail.iv) {
uni.showToast({
title: '您已取消授权，登录失败',
icon: "none"
})
return false;
}
uni.login({
provider: 'weixin',
success: function(res2) {
console.log(res2);
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code='+res2.code+'&grant_type=authorization_code',
success:function(res3){
// get the openid and seesion key
console.log(res3)
},
fail:function(res4){
console.log(re4)
}
})
},
fail:function(r){
console.log(r)
}
});
}
}
}</script><style></style>https://developers.weixin을 클릭할 수 있습니다. .qq.com/miniprogram/dev /api/open-api/user-info/wx.getUserInfo.html WeChat 공식 문서를 확인하세요. 🎜🎜HBuilder에서 제공하는 테스트 AppID를 사용할 때 Cannot read property 'forceUpdate' of undefine과 같은 오류가 보고될 수 있습니다. 이 경우 WeChat 공개 플랫폼 https:에 로그인할 수 있습니다. //developers.weixin.qq.com/community /welogin?redirect_url=%2Fsandbox에서 샌드박스 환경 테스트 번호의 🎜AppID 및 AppSecret🎜 정보를 신청하여 프로젝트 테스트에 사용하면 더 이상 오류가 출력되지 않습니다. 🎜🎜🎜2. 앱 측 구성 🎜🎜🎜앱 측에서는 WeChat, QQ, Weibo 등 다양한 타사 로그인 방법을 지원합니다. 해당 개발자를 신청하고 해당 앱 ID를 받아야 합니다. 해당 appid를 얻은 후 다음과 같이 매니페스트.json을 편집하고 시각적 작업을 수행하고 앱 모듈 구성을 선택하고 OAuth 인증 구성을 수행하고 필요한 로그인 방법(QQ, WeChat 등)을 선택합니다.
🎜🎜선택 후 필수 해당 로그인 방법 AppID 및 기타 정보를 입력하세요. 🎜🎜🎜 2. 위챗 미니 프로그램 제3자 로그인 🎜🎜🎜🎜1. 로그인 여부 결정 🎜🎜🎜 위챗 미니 프로그램에 로그인하기 전, 로그인 여부를 결정해야 합니다. App.vue에 정의되어 있으므로 App.vue에서 정의할 수 있습니다. 변수와 메서드는 🎜전역 변수 및 메서드🎜로, 다른 페이지에서 호출할 수 있으며
global로만 선언하면 됩니다. > 키워드. 🎜🎜로그인의 일반적인 원칙은 다음과 같습니다.키에 따라 로컬 캐시에서 사용자 ID, 임의 코드 및 기타 정보를 가져온 다음 서버에 사용자 존재 여부를 확인하도록 요청합니다.
🎜Random code🎜는 데이터 인터페이스의 보안을 향상시키기 위해 확립되었습니다. 또한 Redis, MemCache 등을 사용하여 보안을 보장할 수도 있습니다. 🎜🎜먼저 App.vue에 로그인할지 여부를 결정하는 전역 메소드를 다음과 같이 정의합니다. 🎜
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
</view></template><script>
export default {
data() {
return {}
},
onLoad() {},
onShow() {},
onHide() {},
methods: {
getuserinfo: function(res1) {
console.log(res1)
if (!res1.detail.iv) {
uni.showToast({
title: '您已取消授权，登录失败',
icon: "none"
})
return false;
}
uni.login({
provider: 'weixin',
success: function(res2) {
console.log(res2);
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code='+res2.code+'&grant_type=authorization_code',
success:function(res3){
// get the openid and seesion key
console.log(res3)
// decrypt
uni.request({
method: 'POST',
url: 'https://hoa.hcoder.net/xcxencode/',
header: {'content-type':'application/x-www-form-urlencoded'},
data: {
appid: 'wxd3d4ee5ed8017903',
sessionKey: res3.data.session_key,
iv: res1.detail.iv,
encryptedData: res1.detail.encryptedData },
success:function(res4){
console.log(res4)
}
})
},
fail:function(res5){
console.log(re5)
}
})
},
fail:function(r){
console.log(r)
}
});
}
}
}</script><style></style>🎜 그런 다음 index.vue에서 전역 메소드를 다음과 같이 호출합니다. 🎜<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button type="primary" @click="appWxLoin" withCredentials="true">用微信登录</button>
<!-- #endif -->
<button style="margin-top:50px;">手机号码登录</button>
</view></template><script>
export default {
data() {
return {}
},
onLoad() {},
onShow() {},
onHide() {},
methods: {
// miniprogram
getuserinfo: function(res1) {
console.log(res1)
if (!res1.detail.iv) {
uni.showToast({
title: '您已取消授权，登录失败',
icon: "none"
})
return false;
}
uni.login({
provider: 'weixin',
success: function(res2) {
console.log(res2);
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code=' +
res2.code + '&grant_type=authorization_code',
success: function(res3) {
// get the openid and seesion key
console.log(res3)
// decrypt
uni.request({
method: 'POST',
url: 'https://hoa.hcoder.net/xcxencode/',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
appid: 'wxd3d4ee5ed8017903',
sessionKey: res3.data.session_key,
iv: res1.detail.iv,
encryptedData: res1.detail.encryptedData },
success: function(res4) {
console.log(res4)
}
})
},
fail: function(res5) {
console.log(re5)
}
})
},
fail: function(r) {
console.log(r)
}
});
},
appWxLoin: function(){
console.log('login...')
}
}
}</script><style></style>🎜동시에 새 로그인을 생성합니다. 다음과 같이 페이지 디렉토리의 페이지를 확인하세요. 🎜<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button type="primary" @click="appWxLogin" withCredentials="true">用微信登录</button>
<!-- #endif -->
<button style="margin-top:50px;">手机号码登录</button>
</view></template><script>
export default {
data() {
return {}
},
onLoad() {},
onShow() {},
onHide() {},
methods: {
// miniprogram
getuserinfo: function(res1) {
console.log(res1)
if (!res1.detail.iv) {
uni.showToast({
title: '您已取消授权，登录失败',
icon: "none"
})
return false;
}
uni.login({
provider: 'weixin',
success: function(res2) {
console.log(res2);
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code=' +
res2.code + '&grant_type=authorization_code',
success: function(res3) {
// get the openid and seesion key
console.log(res3)
// decrypt
uni.request({
method: 'POST',
url: 'https://hoa.hcoder.net/xcxencode/',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
appid: 'wxd3d4ee5ed8017903',
sessionKey: res3.data.session_key,
iv: res1.detail.iv,
encryptedData: res1.detail.encryptedData },
success: function(res4) {
console.log(res4)
}
})
},
fail: function(res5) {
console.log(re5)
}
})
},
fail: function(r) {
console.log(r)
}
});
},
appWxLogin: function() {
console.log('login...');
uni.getProvider({
service: 'oauth',
success: function(res) {
console.log(res.provider)
if (~res.provider.indexOf('weixin')) {
uni.login({
provider: 'weixin',
success: function(loginRes) {
console.log(JSON.stringify(loginRes));
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
console.log(JSON.stringify(infoRes));
console.log('用户昵称为：' + infoRes.userInfo.nickName);
}
});
}
});
}
}
});
}
}
}</script><style></style>🎜 그리고 다음과 같이 페이지.json에 추가하세요. 🎜<template>
<view>
Index... </view></template><script>
export default {
data() {
return {
}
},
onLoad() {
var res = global.isLogin();
if(!res){
uni.showModal({
title: '登录提醒',
content: '请登录',
success:function(){
uni.navigateTo({
url: '/pages/login'
})
}
})
}
},
onShow() {
},
onHide() {
},
onShareAppMessage:function(){
return {
title: 'Share test...',
path: 'pages/index/index'
}
},
methods: {
}
}</script><style></style>🎜Display:
🎜🎜분명히 비로그인 상태를 얻은 후 로그인 페이지로 점프합니다. 🎜🎜🎜2. 로그인 페이지 개발🎜🎜🎜로그인에서는 플랫폼을 결정하고 크로스엔드 개발을 진행해야 하므로 🎜조건부 컴파일🎜이 필요합니다. 🎜<template>
<view>
<!-- #ifdef APP-PLUS -->
<button type="primary" @click="share">点击分享</button>
<!-- #endif -->
</view></template><script>
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
},
onHide() {
},
onShareAppMessage:function(){
return {
title: 'Share test...',
path: 'pages/index/index'
}
},
methods: {
share: function(){
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 1,
summary: "我正在参加CSDN年度博客之星活动，请点击链接 https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr 投一票吧，先在此谢过啦！！",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
}
}
}</script><style></style>🎜Display:
🎜🎜성공한 후에 볼 수 있습니다 로그인하면 사용자가 반환됩니다. 관련 정보;캐시를 지우고 다시 컴파일한 후에는 이전 로그인 상태가 존재하지 않으므로 다시 로그인해야 합니다. 🎜🎜로그인 후 반환 값 res를 확인하세요. 여기에는 암호화되지 않은 일부 기본 정보가 포함되어 있습니다. 🎜암호화 알고리즘🎜의 초기 벡터인 🎜iv 속성🎜이 있습니다. 로그인 승인 여부를 결정하는 기준으로 사용됩니다.
서명을 계산하는 데 사용되는 민감한 정보를 제외한 원시 데이터 문자열입니다.
openid, session_key와 같은 추가 정보가 포함되어 있지 않습니다.
먼저
uni.login(OBJECT); <br> 그런 다음 코드를 운반하고 <code>uni.request(OBJECT)를 통해 openid와 session_key를 얻습니다. 🎜login.vue如下：
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
</view></template><script>
export default {
data() {
return {}
},
onLoad() {},
onShow() {},
onHide() {},
methods: {
getuserinfo: function(res1) {
console.log(res1)
if (!res1.detail.iv) {
uni.showToast({
title: '您已取消授权，登录失败',
icon: "none"
})
return false;
}
uni.login({
provider: 'weixin',
success: function(res2) {
console.log(res2);
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code='+res2.code+'&grant_type=authorization_code',
success:function(res3){
// get the openid and seesion key
console.log(res3)
},
fail:function(res4){
console.log(re4)
}
})
},
fail:function(r){
console.log(r)
}
});
}
}
}</script><style></style>
显示：
显然，此时获取到了openid和session key。
此外还可以获取unionid，其在满一定条件的情况下才会返回。
获取到了openid和session key后，可以解密iv。
通过微信官方提供的SDK进行解密，可以实现解密的接口，如下：
login.vue如下：
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
</view></template><script>
export default {
data() {
return {}
},
onLoad() {},
onShow() {},
onHide() {},
methods: {
getuserinfo: function(res1) {
console.log(res1)
if (!res1.detail.iv) {
uni.showToast({
title: '您已取消授权，登录失败',
icon: "none"
})
return false;
}
uni.login({
provider: 'weixin',
success: function(res2) {
console.log(res2);
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code='+res2.code+'&grant_type=authorization_code',
success:function(res3){
// get the openid and seesion key
console.log(res3)
// decrypt
uni.request({
method: 'POST',
url: 'https://hoa.hcoder.net/xcxencode/',
header: {'content-type':'application/x-www-form-urlencoded'},
data: {
appid: 'wxd3d4ee5ed8017903',
sessionKey: res3.data.session_key,
iv: res1.detail.iv,
encryptedData: res1.detail.encryptedData },
success:function(res4){
console.log(res4)
}
})
},
fail:function(res5){
console.log(re5)
}
})
},
fail:function(r){
console.log(r)
}
});
}
}
}</script><style></style>
小程序登录时，可以设置选择携带手机号。
从之前button组件的open-type属性中可以发现，getPhoneNumber属性可以获取用户手机号，可以从@getphonenumber回调中获取到用户信息。
三、APP第三方登录
实现APP登录也是通过条件编译实现。
login.vue如下：
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button type="primary" @click="appWxLoin" withCredentials="true">用微信登录</button>
<!-- #endif -->
<button style="margin-top:50px;">手机号码登录</button>
</view></template><script>
export default {
data() {
return {}
},
onLoad() {},
onShow() {},
onHide() {},
methods: {
// miniprogram
getuserinfo: function(res1) {
console.log(res1)
if (!res1.detail.iv) {
uni.showToast({
title: '您已取消授权，登录失败',
icon: "none"
})
return false;
}
uni.login({
provider: 'weixin',
success: function(res2) {
console.log(res2);
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code=' +
res2.code + '&grant_type=authorization_code',
success: function(res3) {
// get the openid and seesion key
console.log(res3)
// decrypt
uni.request({
method: 'POST',
url: 'https://hoa.hcoder.net/xcxencode/',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
appid: 'wxd3d4ee5ed8017903',
sessionKey: res3.data.session_key,
iv: res1.detail.iv,
encryptedData: res1.detail.encryptedData },
success: function(res4) {
console.log(res4)
}
})
},
fail: function(res5) {
console.log(re5)
}
})
},
fail: function(r) {
console.log(r)
}
});
},
appWxLoin: function(){
console.log('login...')
}
}
}</script><style></style>
此时不需要open-type等属性，只需要进行事件绑定就可以。
显示：
手机端显示：
显然，此时实现了条件编译，在不同的设备显示不同的按钮；
同时手机端点击时，控制台也输出信息。
先实现登录，需要获取服务商，判断是否安装微信，如果已安装则申请登录验证，如下：
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button type="primary" @click="appWxLogin" withCredentials="true">用微信登录</button>
<!-- #endif -->
<button style="margin-top:50px;">手机号码登录</button>
</view></template><script>
export default {
data() {
return {}
},
onLoad() {},
onShow() {},
onHide() {},
methods: {
// miniprogram
getuserinfo: function(res1) {
console.log(res1)
if (!res1.detail.iv) {
uni.showToast({
title: '您已取消授权，登录失败',
icon: "none"
})
return false;
}
uni.login({
provider: 'weixin',
success: function(res2) {
console.log(res2);
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code=' +
res2.code + '&grant_type=authorization_code',
success: function(res3) {
// get the openid and seesion key
console.log(res3)
// decrypt
uni.request({
method: 'POST',
url: 'https://hoa.hcoder.net/xcxencode/',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
appid: 'wxd3d4ee5ed8017903',
sessionKey: res3.data.session_key,
iv: res1.detail.iv,
encryptedData: res1.detail.encryptedData },
success: function(res4) {
console.log(res4)
}
})
},
fail: function(res5) {
console.log(re5)
}
})
},
fail: function(r) {
console.log(r)
}
});
},
appWxLogin: function() {
console.log('login...');
uni.getProvider({
service: 'oauth',
success: function(res) {
console.log(res.provider)
if (~res.provider.indexOf('weixin')) {
uni.login({
provider: 'weixin',
success: function(loginRes) {
console.log(JSON.stringify(loginRes));
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
console.log(JSON.stringify(infoRes));
console.log('用户昵称为：' + infoRes.userInfo.nickName);
}
});
}
});
}
}
});
}
}
}</script><style></style>
显示：
手机端显示：
显然，实现了在APP端调用微信登录；
登录后，输出了相应的信息。
四、分享接口
分享是一个很重要的功能。
1.小程序分享
小程序只支持分享到聊天界面（包括微信好友和微信群），不支持分享到朋友圈，是使用onShareAppMessage生命周期实现的。
index.vue如下：
<template>
<view>
Index... </view></template><script>
export default {
data() {
return {
}
},
onLoad() {
var res = global.isLogin();
if(!res){
uni.showModal({
title: '登录提醒',
content: '请登录',
success:function(){
uni.navigateTo({
url: '/pages/login'
})
}
})
}
},
onShow() {
},
onHide() {
},
onShareAppMessage:function(){
return {
title: 'Share test...',
path: 'pages/index/index'
}
},
methods: {
}
}</script><style></style>
显示：
可以看到，实现了分享功能。
2.APP分享
APP中要实现分享，需要在manifest.json中进行配置，如下：
先实现分享纯文字，index.vue如下：
<template>
<view>
<!-- #ifdef APP-PLUS -->
<button type="primary" @click="share">点击分享</button>
<!-- #endif -->
</view></template><script>
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
},
onHide() {
},
onShareAppMessage:function(){
return {
title: 'Share test...',
path: 'pages/index/index'
}
},
methods: {
share: function(){
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 1,
summary: "我正在参加CSDN年度博客之星活动，请点击链接 https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr 投一票吧，先在此谢过啦！！",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
}
}
}</script><style></style>
显示：
手机端显示：
显然，控制台输出了分享成功的信息；
同时，APP成功调用了微信分享。
再实现分享图文，如下：
<template>
<view>
<!-- #ifdef APP-PLUS -->
<button type="primary" @click="share">点击分享</button>
<!-- #endif -->
</view></template><script>
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
},
onHide() {
},
onShareAppMessage:function(){
return {
title: 'Share test...',
path: 'pages/index/index'
}
},
methods: {
share: function(){
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: "https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr",
title: "cufeecr年度博客之星评选",
summary: "我正在参加CSDN年度博客之星活动，请点击链接 https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr 投一票吧，先在此谢过啦！！",
imageUrl: "https://img-blog.csdnimg.cn/20210112093810423.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
}
}
}</script><style></style>
显示：
手机端显示：
显然，实现了分享图文到微信好友或微信群。
还可以分享到微信朋友圈，如下：
<template>
<view>
<!-- #ifdef APP-PLUS -->
<button type="primary" @click="share">点击分享</button>
<!-- #endif -->
</view></template><script>
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
},
onHide() {
},
onShareAppMessage:function(){
return {
title: 'Share test...',
path: 'pages/index/index'
}
},
methods: {
share: function(){
uni.share({
provider: "weixin",
scene: "WXSenceTimeline",
type: 2,
imageUrl: "https://img-blog.csdnimg.cn/20210112093810423.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
}
}
}</script><style></style>
显示：
手机端显示：
已经实现了分享消息到朋友圈。
总结
第三方登录和分享是APP和小程序的基本功能，对于APP和小程序有不同的实现方式，相比较而言，APP实现更简单，都是其他功能的基础和起步。
更多相关免费了解敬请关注uni_app教程栏目！
위 내용은 uni-app 입문 튜토리얼 - 타사 로그인 및 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
json html Object Session 全局变量 字符串 接口 Property undefined 事件 算法 redis memcache 微信小程序 uni-app https 个人开发 加密算法
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：유니앱 상단 뒤로버튼 없애는 방법다음 기사：유니앱 상단 뒤로버튼 없애는 방법