uni-app实现微信小程序登录(一)

环境说明

  1. easywechat Lumen 版 6.0
  2. Lumen 7.x
  3. php 8.0
  4. uni-app
  5. uni-app前端框架uviewui

问题讲解

在实现微信小程序登录的时候,我们需要现在在uni-app端拿到用户授权,之后请求后端接口,用前端拿到的code换取用户信息,此时就可以验证登录完成了。

解决

创建获取授权按钮:

<button type="default" class="btn" lang="zh_CN" open-type="getUserInfo" @getuserinfo="getUserInfo">授权登录</button>
  • open-type :表示按钮开发平台能力,此处为获取用户信息 getUserInfo
  • @getuserinfo:表示获取用户授权之后的回调方法

getUserInfo方法

getUserInfo() {
			let _self = this;
			// #ifdef MP-WEIXIN
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					if (~res.provider.indexOf('weixin')) {
						uni.login({
							provider: 'weixin',
							success: res2 => {
								uni.getUserInfo({
									provider: 'weixin',
									success: info => {
                                      //此处请求后端接口,传值两个,一个是code,一个是用户信息
										_self.$u.api.mpUserLogin({
											auth:res2.code,
											info:info
										}).then(res => {
											if(res.code == 200){
												
											}
										})
									},
									fail: () => {
										uni.showToast({ title: '微信登录授权失败', icon: 'none' });
									}
								});
							},
							fail: () => {
								uni.showToast({ title: '微信登录授权失败', icon: 'none' });
							}
						});
						return true;
					}
					uni.showToast({
						title: '请先安装微信或升级版本',
						icon: 'none'
					});
				}
			});
			//#endif
		}

给TA买糖
共{{data.count}}人
人已赞赏
实用片段

css水平滚动

2021-7-23 11:41:10

代码片段实用片段开发框架

uni-app实现微信小程序登录(二)

2021-9-14 11:38:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索