uniapp微信小程序登陆方法

my_login.vue:

页面效果：

效果一：没勾选

效果二：勾选以后

接下来上代码：

<template><view class="login-container"><view class="logo"><image src="/static/imges/my/icon_logo.png"></image></view><!-- 勾选用户协议思路：给两个"微信一键登录"按钮1.ischeked=true勾选了，就获取用户信息open-type="getPhoneNumber"2.ischecked=false没勾选，给点击事件提示"请先阅读并勾选用户协议"--><block v-if="ischecked"><button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"class="btn-login">微信一键登录</button></block><block v-else><button type="primary" class="btn-login" @click="btn_Select">微信一键登录</button></block><view class="agreement"><radio class="ck_radio" color="#02C9AA" :checked="ischecked" @click="ischecked=!ischecked" /><!-- @click="ischecked=!ischecked"的作用能让单选按钮可以点击"勾选也可以取消"，不加这句单选按钮只能勾选"取消不了" --><text class="tips">我已阅读并同意</text><navigator class="info" url="/filepage/agreement/agreement">《用户协议》</navigator></view></view>
</template>

script：

<script>var _this;export default {name: "my-login",data() {return {// 单选按钮的勾选ischecked: false,};},created() {_this = this;},methods: {getPhoneNumber(e) {var phoneCode = e.detail.code;if (phoneCode == undefined) {// 拒接授权} else {// console.log("获取手机号的code=" + phoneCode)uni.login({success(res) {if (res.code) {// 掉用请求后端的方法console.log("res.code传token=" + res.code)_this.getlogin11(res.code, phoneCode);} else {console.log('登录失败！' + res.errMsg)}}})}},// 请求后端的方法传两个参数code,和手机号码给后端，后端返回tokenasync getlogin11(code, phoneCode) {//调用登录const ress = await this.$myRuquest({method: 'post',url: '/api/Login/WxLogin',data: {code: code,phoneCode: phoneCode},})// 七天后过期了// if (res.data.code == 401) {//   //跳转登陆页面//  uni.navigateTo({//      url: '/common/my-login/my-login'//    })// }// console.log(ress);if (ress.code == 500) {uni.showToast({title: "登陆失败",duration: 3000,icon: "error"})} else {//console.log(ress.data.user);var json = {tk: ress.data.token,user: ress.data.user}// 登陆成功后把后端返回的token和用户信息user(openid, nickName等信息)"存储到vuex保存起来"this.$store.commit("m_user/refreshToken", json);// uni.setStorage('token',ress.data.token);uni.showToast({title: "登陆成功",duration: 3000,icon: "success"})// 我的收藏页面，如果没登陆，点击收藏按钮跳转到登陆页面，登陆成功以后回到上一个页面setTimeout(() => {uni.navigateBack({delta: 1,// 刷新上个页面数据success: () => {let page = getCurrentPages().pop();if (page) {page.onLoad(page.options); //执行上个页面的方法};}})}, 1000)}},// 点击按钮弹出勾选用户协议btn_Select() {uni.showToast({title: '请先阅读并勾选用户协议',icon: 'none',duration: 3000,position: 'bottom'});},}}
</script>

css部分:

<style lang="scss" scoped>.login-container {display: flex;flex-direction: column;padding-top: 346rpx;align-items: center;width: 100%;// height: 100vh;background-color: #F5F7F9;.logo {width: 160rpx;height: 160rpx;padding: 30rpx;background: #FFFFFF;box-shadow: 0px 2px 20px 2px rgba(226, 33, 151, 0.25999999046325684);border-radius: 24rpx;}.logo image {width: 100%;height: 100%;}.btn-login {position: relative;margin-top: 144rpx;padding-left: 60rpx;width: 574rpx;height: 96rpx;font-size: 32rpx;line-height: 96rpx;border-radius: 25px;background-color: #AF4184;}.btn-login::before {position: absolute;content: '';top: 24rpx;left: 140rpx;width: 48rpx;height: 48rpx;background: url(../../static/imges/my/icon_wx.png) no-repeat;background-size: 100% 100%;}.agreement {display: flex;margin-top: 300rpx;font-size: 24rpx;.ck_radio {vertical-align: middle;margin-top: -6rpx;}.tips {margin-left: 15rpx;}.info {color: #02C9AA;}}}
</style>

uniapp微信小程序登陆方法相关推荐

uniapp 微信小程序登录方法封装
uniapp 微信小程序登录方法封装前言一.登录接口二.登录上代码总结前言 ui设计没有登录页所以将微信小程序登录方法同一封装一个方法一.登录接口 uni.getUserProfile ...
uniapp微信小程序登陆-升级版，登陆加登录信息过期以后的无痕登陆
首先要了解这个,得先知道微信登陆的流程在我以前的博客里面有 uniapp微信小程序登陆流程(前端详细)__揽的博客-CSDN博客_uniapp小程序如何做登录 uniapp微信小程序登陆流程(前端详细 ...
uniapp 微信小程序分页方法：uni-pagination分页插件和上拉分页、下拉加载刷新、刷新后回到顶部
1.uni-pagination分页插件先去uniapp插件市场安装分页插件: uni-app官网https://uniapp.dcloud.io/component/uniui/uni-pagin ...
uniapp微信小程序不强制登陆的逻辑（模仿大厂登陆）
博主不易,记得收藏点赞加关注哈前言正常需求中,微信小程序的登陆都是不强制的,但是网上大多资料教的都是强制登陆,或者做个登陆页面,其实这种太影响用户体验,还很容易小程序审核不通过如果想看懂这篇博客 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(七）---登陆注销功能与微信小程序测试号的申请
到此为止,我们只差一个退出登陆功能了. 回到index.vue页面,之前我们已经预留了退出按钮,现在给它加上功能 <button class="mybutton" type= ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
uni-app微信小程序登录授权
uni-app微信小程序登录授权首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
uni-app 微信小程序 + 友盟统计 sdk
在开发小程序时,有些功能会需要统计用户点击次数.登录人数.访问时长等数据,用来分析用户的一些行为:这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程: 1. ...

uniapp微信小程序登陆方法

my_login.vue:

页面效果：

script：

css部分:

uniapp微信小程序登陆方法相关推荐

最新文章

热门文章