前言

uni-app 实现微信小程序、头条小程序、手机号登陆

一、login.vue

<template><view class="container"><view class="pageTitle"><image src="/static/logo.png"></image></view><view><view v-if="loginType === 'phone'" class="input-content"><view class="input-item"><input type="number" :value="phone" placeholder="请输入手机号码" placeholder-style="color:#E5E5E5" maxlength="11" data-key="phone"@input="inputChange"></view><view class="input-item"><view class="verify-code"><view><input type="mobile" :value="vcode" placeholder="请输入验证码" maxlength="6" data-key="vcode"style="" @input="inputChange" placeholder-style="color:#E5E5E5"></view><view style="border-left: 1px solid #D8D8D8;"><button class="verify-btn" :disabled="sendDisabled" @click="doGetVerify" :loading="sendLoading">{{ sendText }}</button></view></view></view></view><!-- #ifdef MP-WEIXIN --><button v-if="loginType !== 'phone'" class="confirm-btn" :disabled="logining" @click="miniWechatLogin">微信授权登录</button><!-- #endif --><!-- #ifdef MP-TOUTIAO --><button v-if="loginType !== 'phone'" class="confirm-btn" :disabled="logining" @click="touTiaoLogin">头条授权登录</button><!-- #endif --><button v-if="!loginType" class="confirm-btn mobile-btn"  :disabled="logining" @click="chooseLoginType('phone')">手机号登录</button><button v-if="loginType === 'phone'" class="confirm-btn" :disabled="logining" @click="toPhoneLogin">登录</button></view></view>
</template><script>import {mapMutations} from 'vuex'export default {data() {return {loginType: '',phone: '',vcode: '',password: '',logining: false,sendText: '获取验证码',sendDisabled: false,sendLoading: false,}},onShow() {},onLoad(options) {},methods: {...mapMutations(['login']),onBackPress(options) {const that = thisif(options.from === 'backbutton' && that.loginType !== ''){this.loginType = ''uni.setNavigationBarTitle({title: '登陆'});return true}return false},inputChange(e) {const key = e.currentTarget.dataset.keythis[key] = e.detail.value},chooseLoginType(type) {this.loginType = typeif(type === 'phone'){uni.setNavigationBarTitle({title: '手机号登陆'});}},navBack() {uni.navigateBack()},async toPhoneLogin() {const that = thisif (that.phone.length !== 11) {that.$api.msg('请输入11位中国手机号')return}const timestamp = new Date().getTime()const parameters = {mobile: that.phone,vcode: that.vcode,timestamp}that.$api.request.httpGet('auth/request/token', parameters, res => {that.logining = falseif (res) {that.$api.msg(res.message)}}).then(res => {that.logining = falseconst tokenInfo = res.token;const token = tokenInfo.token;const userid = tokenInfo.userId;that.getUserInfo(userid, token)})},// #ifdef MP-WEIXINminiWechatLogin() {const that = thisthat.logining = trueconst loginType = 1uni.getUserProfile({desc: '登录',success: (loginRes) => {uni.showLoading({title: '登录中'})that.logining = trueuni.login({provider: 'weixin',success: wxres => {that.logining = trueconst raw = JSON.stringify(wxres)const userInfo = loginRes.userInfoconst loginData = {}loginData.nickName = userInfo.nickNameloginData.avatarUrl = userInfo.avatarUrlloginData.gender = userInfo.genderthat.thirdBindOuth(wxres.code, loginRes.rawData, loginRes.signature, loginRes.encryptedData, loginRes.iv, 'weixin')uni.hideLoading()that.logining = false},fail: (res) => {that.logining = falseuni.hideLoading();that.$api.msg('登陆失败')}})},fail(res) {that.logining = falsethat.$api.msg('已取消登陆')that.navBack()}})},// #endif// #ifdef MP-TOUTIAOtouTiaoLogin() {const that = thisthat.logining = trueconst loginType = 1uni.login({provider: 'toutiao',success: wxres => {}})uni.getUserProfile({desc: '登录',success: (loginRes) => {uni.showLoading({title: '登录中'})that.logining = trueuni.login({provider: 'toutiao',success: wxres => {const userInfo = loginRes.rawDataconst loginData = {}loginData.nickName = userInfo.nickNameloginData.avatarUrl = userInfo.avatarUrlloginData.gender = userInfo.genderthat.thirdBindOuth(wxres.code, loginRes.rawData, loginRes.signature, loginRes.encryptedData, loginRes.iv, 'toutiao')uni.hideLoading()that.logining = false},fail: (res) => {that.logining = falseuni.hideLoading();that.$api.msg('登陆失败')}})},fail(res) {that.logining = falsethat.$api.msg('已取消登陆')that.navBack()}})},// #endifdoGetVerify() {const that = thisif (!that.phone || that.phone.length !== 11) {that.$api.msg('请输入正确手机号！')return}const timestamp = new Date().getTime()const parameters = {mobile: that.phone,timestamp}this.sendLoading = truethat.$api.request.httpGet('auth/request/verification/code', parameters, res => {if (res) {that.$api.msg(res.message)}this.sendLoading = false}).then(res => {that.$api.msg("验证码发送成功!")that.sendDisabled = truethis.sendLoading = falselet sec = 60const interval = setInterval(() => {sec--that.sendText = '重发 (' + sec + ')'if (sec <= 0) {that.sendDisabled = falsethat.sendText = '获取验证码'clearInterval(interval)}}, 1000)})},thirdBindOuth(code, rawdata, minisignature, encrypteddata, iv, oauthtype) {const that = thisconst timestamp = new Date().getTime()const parameters = {code,rawdata,minisignature,encrypteddata,iv,oauthtype,timestamp}that.$api.request.httpPost('auth/bind/oauth', parameters, res => {that.logining = falseif (res) {that.$api.msg(res.message)}}).then(res => {const tokenInfo = res.token;const token = tokenInfo.token;const userid = tokenInfo.userId;if(tokenInfo && token && userid){that.getUserInfo(userid, token)} else {that.$api.msg('登陆失败')}})},getUserInfo(userId, token) {const that = thisconst timestamp = new Date().getTime()const parameters = {userid: userIdtimestamp: timestamp}that.$api.request.httpGet('user/get/info/', parameters, res => {if (res) {that.$api.msg(res.message)}}).then(res => {const resUser = res.userconst userInfo = {}userInfo.userId = userIduserInfo.token = tokenuserInfo.nickName = resUser.nicknameuserInfo.avatarUrl = resUser.avatarUrluserInfo.gender = resUser.genderuserInfo.userName = resUser.userNameuserInfo.mobile = resUser.mobileuserInfo.name = resUser.nameuserInfo.email = resUser.emailuserInfo.company = resUser.companyuserInfo.userType = resUser.userTypeuni.setStorageSync('userInfo', userInfo)that.$store.commit('login', userInfo)that.$api.msg("登陆成功!")setTimeout(() => {const routeUrl = that.$api.prePage().route;if (routeUrl) {uni.navigateBack({ url: routeUrl})} else {uni.switchTab({url: '../personal/index'}); }}, 1000)})},}}
</script><style lang="scss">.container {padding-top: 115px;}.pageTitle {width: 100%;text-align: center;font-size: 25px;image {width: 120px;height: 90px;}}.confirm-btn {width: 345px;height: 45px;margin: 20% auto 0;background: $uni-color-primary;color: #fff;font-size: 18px;font-weight: 500;}.input-content {margin-top: 50px;padding: 0 60rpx;}.verify-btn {width: 100px;height: 40px;line-height: 40px;background: #FFFFFF;font-weight: 500;font-size: 14px;color: #2C2D2C;//border: 1px solid #D8D8D8;}.mobile-btn {/* #ifdef MP-WEIXIN || MP-TOUTIAO */background: #FFFFFF;border: 1px solid #D8D8D8;box-sizing: border-box;color: #5A5B5B;margin-top: 30px;/* #endif */}.input-item {display: flex;flex-direction: column;align-items: flex-start;justify-content: center;padding: 0 0 0 $ap-page-padding;margin-bottom: 50rpx;box-sizing: border-box;border: 1px solid #D8D8D8;&:last-child {margin-bottom: 0;}input {height: 40px;font-size: 16px;font-weight: 500;width: 100%;line-height: 40px;}.verify-code {flex-direction: row;display: flex;justify-content: space-between;width: 100%;uni-button:after{border: none;outline: none;}// &::after {//    border: none;//     outline: none;// }}}
</style>

uni-app 微信/头条小程序/手机号登陆相关推荐

uniapp 支付宝小程序手机号登陆
开发支付宝小程序,在登录的时候,由于需要手机号登陆,所以需要在支付宝小程序后台去申请手机号登陆权限. 支付宝小程序登陆组件设置  < ...
uniapp授权获取微信支付宝小程序手机号身份证号
需求描述:采用uniapp框架同时开发微信和支付宝两端小程序,要求用户授权获取手机号信息. 方案一:采用 button 配置 open-type="getPhoneNumber" ...
uni.app开发物联网小程序
1.当切换页面的时候,容易与mqtt服务器断开连接,并报错原因:在onLoad事件中,获取参数的时候使用异步获取,但是在事件里面还使用了这个参数,导致mqtt发布的时候,发了一个空主题,导致连接被断 ...
微信商城小程序（服装鞋子商场）的设计与实现（Vue.js+小程序+.NET Core ）
目录第1章概述 1 1.1 项目背景介绍 1 1.2 微信小程序概述 1 1.2.1 微信小程序发展状况 2 1.2.2 微信小程序丰富的API接口 2 第2章相关技术概述 3 2.1 .NET ...
如何实现自有App上的小程序第三方微信授权登陆？
对于微信小程序来说,有 OpenID 或 UnionID 作为唯一标识,微信授权登陆小程序账号是很容易实现的,但对于其他应用上的小程序来说(如支付宝.百度等),打通该登陆方式是比较麻烦的. 之前在Fi ...
app error login.php,GitHub - jmluang/weappLogin-for-laravel: 封装了微信小程序的登陆逻辑，包含了数据库操作...
laravel-weapp A weapp login logic Laravel warpper 本仓库从 wafer2开发套件中提取并封装了微信小程序的登陆逻辑并转移到Laravel中,不仅降低 ...
2023微信社区小程序+APP+后台，附带超详细完整搭建教程【源码+教程】
2023微信社区小程序+APP+后台,附带超详细完整搭建教程[源码+教程] 微信授权登陆正常,小程序和APP带后台手机号登陆正常,发帖,建圈子.发活动. 微信小程序是一种轻量级的应用程序,可以在微信 ...
微信小程序不支持打开非业务域名_开达应用五端合一：抖音/头条小程序基础配置...
抖音/头条小程序基础配置小程序AppKey AppSecret获取登录到字节跳动小程序管理平台,开发: 域名配置登录到字节跳动小程序管理平台,进入开发»服务器域名,点击添加自己的网站域名登录 ...
马化腾怒怼张一鸣；中兴产品下架；微信整改小程序 | CSDN 极客头条
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 「CSDN 极客头条」是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报 ...
后台模拟页面登陆_微信直播小程序后台，微信朋友圈可直达小程序直播了
独家了解到,微信广告正在测试直播模式,可以帮助商家将直播小程序置于多个广告流量级别,如朋友圈,公众账号和小程序. 这也意味着微信生态系统中的商家不仅可以通过小节目现场直播来运营私有域流量,而且可以利用 ...

uni-app 微信/头条小程序/手机号登陆

前言

一、login.vue

uni-app 微信/头条小程序/手机号登陆相关推荐

最新文章

热门文章