UNIAPP---实现微信小程序登录授权和手机号授权（uniapp做微信小程序）

UNIAPP—实现微信小程序登录授权和手机号授权（uniapp做微信小程序）

描述：uniapp开发小程序，先授权用户信息后再出现手机号授权的页面进行手机号授权。完成后返回上一页面并把信息存入后台以及前台缓存中，方便使用。

1.在uniapp的manifest.json进行微信小程序配置

2.封装request请求api.js（如果已封装可跳过）

const BASE_URL = 'xxxxxxxxxxxxxxxxxxxxx';import func from '@/config/func.js'; export const myRequest = (url, method, data = {}, header = {}) => {func.loading('正在加载中...')return new Promise((resolve, reject) => {uni.request({url: BASE_URL + url,method: method || 'GET',header: {'content-type': 'application/x-www-form-urlencoded'} || header,data: data || {},success: (res) => {uni.hideLoading();let code = res.data.code;if (code == 1) {resolve(res.data.data)} else {func.alert(res.data.msg)}},fail: (err) => {uni.showToast({title: '请求接口失败',icon: 'none'})reject(err)}})})
}

3.封装微信授权登录以及获取手机号，之后把用户信息数据传入后台。

import {myRequest
} from '@/config/api.js';// uni.login()封装
const wxLogin = function(openid) {return new Promise((resolve, reject) => {uni.login({success(res) {if (res.code) {resolve(res.code)} else {reject(res.errMsg);}}})})
}
/*微信小程序登录*/
const wechatAppLogin = function() {/*登录提示*/loading("正在授权")uni.getUserProfile({desc: '获取用户授权',success: res => {let userInfo = res.userInfo;wxLogin().then(code => { // 引用uni.login()封装myRequest('getOpenid', 'POST', {code: code}) //获取openid.then(function(v) {uni.hideLoading();uni.setStorageSync("useInfo", res.userInfo);uni.setStorageSync("openid", v.openid);wx.navigateTo({url: '/pages/login/index'})}, function(error) {reject(error);})})}})
}// 获取手机号授权
const getPhoneNumber = function(event) {let that = this;let code = event.detail.code; //获取手机codevar promise = new Promise(function(resolve, reject) {uni.checkSession({success: (res) => {myRequest('getPhone', 'POST', {code: code}) //获取手机号.then(function(v) {let phone = v.data;let useInfo = uni.getStorageSync('useInfo')wx.setStorageSync('mobile', mobile)resolve(phone);myRequest('login', 'POST', {openid: uni.getStorageSync('openid'),nickname: useInfo.nickName,img: useInfo.avatarUrl,phone: phone}) //传入后台数据.then(function(v) {uni.navigateBack({delta: 1})}, function(error) {reject(error);})}, function(error) {reject(error);})},fail(err) {login()}})})return promise;
}module.exports = {wechatAppLogin,getPhoneNumber
}

4.在页面中引用，登录页面login.vue中：

<template><view class=""><f-navbar title="登录" navbarType='3'></f-navbar><view class="arvImg marCenter marT100 "><image class="imgz " src="/static/images/arv.png" alt=""></image></view><view class="FontCenter fontSize18 marT40 fontBold">健身房</view><view class="fontSize16 FontCenter marT80">申请获取以下权限</view><button class="btnBig marT140" @click="getUserInfo" v-if="useInfo == ''">微信账号快捷登录</button><button class="btnBig marT140" v-else open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" >点击获取手机号</button></view>
</template><script>import func from '@/config/func.js';export default {data() {return {useInfo:wx.getStorageSync('useInfo')||''}},methods:{// 授权登录getUserInfo(){func.wechatAppLogin()},// 手机号授权onGetPhoneNumber(e){func.getPhoneNumber(e)}}}
</script><style>page {background-color: #fff;}
</style>

示例图：

UNIAPP---实现微信小程序登录授权和手机号授权（uniapp做微信小程序）相关推荐

小程序授权信息是保存在微信服务器,微信小程序登陆，授权，手机号授权流程及滚动穿透，保存图片等问题...
提纲: 滚动穿透登陆,授权流程手机号授权流程保存图片 webview的使用问题一二针对于,弹窗内容嵌套在蒙层内. 1. 点击弹窗外关闭, 你已经购买过该课程您已经购买该课程了,请前往听课去 ...
小程序微信头像授权、手机号授权、地理位置授权
小程序授权常用的小程序授权有手机号授权.微信头像及昵称授权.地理位置授权.下面就分别说一下具体的实现操作 1.手机号授权. 手机号授权需要用户主动的触发,程序驱动触发是实现不了的.通过button实 ...
通过微信扫码登录剖析 oauth2 认证授权技术
本文目录前言趣味解读oauth2 oauth2精髓 oauth2核心概念结合微信登录深刻理解oauht2 本文小结前言相信很多小伙伴在学习 JAVA 的过程中或多或少接触或者开发过类似于 x ...
Java实现微信扫码登录并实现认证授权
Java实现微信扫码登录并实现认证授权 1.登录流程及原理 1.1 OAuth2协议网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.0 ...
小程序制作预算_做一个小程序的大概预算是多少？做一个小程序大概多少钱？...
做一个小程序的大概预算是多少?做一个小程序大概多少钱?下面跟随小编一起来看看吧! 小程序开发需要多少钱,这个要看你做什么样的小程序, 你对小程序的功能.框架.定位.交互.UI的要求是什么? 这些都需要 ...
uniapp - 新版本微信小程序登录、获取电话号码；后端调用微信API不必自己写调用网址【附有前后端完整代码】
uniapp文档:文档地址 1.uniapp的登录 (1)登录:通过前端获取到code,可直接调用WxMaService类的方法即可实现微信接口 uni.login({provider: 'weixi ...
微信扫码登录只能填一个授权回调域问题
背景公司增加了个微信扫码登录,费劲千辛万苦终于把应用申请下来了,但遇到了一个头疼的事情:微信授权回调域只能写一个,且不支持通配.这下可好了,总不能把每个需要微信登录的二级域名都申请一个应用吧?而且一 ...
微信小程序发展优势，哪些行业适合做微信小程序？
微信小程序相当于微信里的APP,有着"免安装免卸载.即开即用.即用即走.入口场景丰富"等特点,商家想要制作自己的微信小程序的话,需要先到微信公众后台登录注册,然后再进行小程序的开发 ...
微信qq一键登录php代码6,Laravel6实现第三方微信登录
目前很多的网站中都会存在很多的交互功能,从而降低用户的操作难度,特此带来微信的第三方登录的项目实战功能开发.对于本实例中的开发内容,就不在使用原生的内容,而是直接使用别人写好的封装的类库. 1. 安装 ...

UNIAPP---实现微信小程序登录授权和手机号授权（uniapp做微信小程序）

UNIAPP—实现微信小程序登录授权和手机号授权（uniapp做微信小程序）

UNIAPP---实现微信小程序登录授权和手机号授权（uniapp做微信小程序）相关推荐

最新文章

热门文章