赞
踩
我们在做小程序的时候用的最多的方式登录 就是原生的授权登录的功能
这个方法 也不是很难 首先我们要获取我们在小程序中的code值
我们小封装一个获取code 的方法 在页面中可以直接调用 封装在 js 中
- export const wxlogin = () => {
- return new Promise((resolve, reject) => {
- uni.login({
- provider: 'weixin',
- success: function(loginRes) {
- resolve(loginRes.code);
- },
- fail(err) {
- reject(err)
- }
- })
- })
- }
把登录的要封装在一个单独的文件中,这样修改的时候,也方便修改
- <template>
- <view class="province_box" v-if="isPopupVisible">
- <view class="container">
- <view class="popupMobile_box">
- <view class="please-mobile">请授权手机号并登录</view>
- <view class="login_mobile">登录就代表已阅读并同意 <text style="color:#0091FF;">《用户隐私协议》</text></view>
- <view class="popup-action">
- <view class="action-button" @click="onCloseAuthMobile">
- 取消
- </view>
- <view>
- <button class="action-confirm" @click="onConfirmAuthMobile" open-type="getPhoneNumber"
- @getphonenumber="getPhoneNumber" hover-class="none">
- 授权手机号
- </button>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
-
- <script>
- import {
- wxlogin
- } from '@/utils/wxlogin.js'
- export default {
- data() {
- return {
- wxPhoneParams: {
- authCode: "",
- iv: "",
- encryptedData: ""
- },
- isPopupVisible: false, // 初始状态为隐藏
- }
- },
- mounted() {
- this.towxlogin()
- },
- methods: {
- onOpenAuthMobile() {
- this.isPopupVisible = true; // 打开弹窗
- },
- async onShowAuthMobile() {
- await this.towxlogin();
- this.onOpenAuthMobile()
- },
- // 获取code 值
- async towxlogin() {
- let code = await wxlogin();
- this.wxPhoneParams.authCode = code;
- },
- //取消授权
- onCloseAuthMobile() {
- this.isPopupVisible = false; // 关闭弹窗
- },
- onConfirmAuthMobile() {
- this.isPopupVisible = false; // 关闭弹窗
- },
- //微信登录
- getPhoneNumber(e) {
- if (e.detail.iv && e.detail.encryptedData) {
- this.wxPhoneParams.iv = e.detail.iv
- this.wxPhoneParams.encryptedData = e.detail.encryptedData
- this.wxMobileLogin(this.wxPhoneParams)
- }
- },
- wxMobileLogin(wxParams) {
- console.log('登陆中....')
- // 这个里面就可以调用登录的时候传入的接口
- }
-
- }
- }
- </script>
-
- <style scoped lang="less">
- .province_box {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 999;
- }
-
- .container {
- background-color: #fff;
- border-radius: 8px 8px 0 0;
- width: 100%;
- max-width: 400px;
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- box-sizing: border-box;
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
- }
-
- .popupMobile_box {
- background-color: #fff;
- height: 380rpx;
- border-radius: 30rpx 30rpx 0 0;
- }
-
- .please-mobile {
- text-align: center;
- padding: 50rpx 0 30rpx;
- font-size: 34rpx;
- color: #000;
- }
-
- .login_mobile {
- text-align: center;
- font-size: 32rpx;
- color: #333;
- }
-
- .popup-action {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: 70rpx 100rpx 0;
-
- .action-button {
- width: 240rpx;
- height: 80rpx;
- font-size: 32rpx;
- font-weight: 600;
- color: #9f9f9f;
- line-height: 80rpx;
- border: 1rpx solid #DFDFDF;
- text-align: center;
- border-radius: 10rpx;
- }
-
- .action-confirm {
- background: #0091FF;
- color: #fff;
- width: 240rpx;
- height: 80rpx;
- font-size: 32rpx;
- line-height: 80rpx;
- text-align: center;
- border-radius: 10rpx;
- }
-
- button {
- border-radius: 0rpx;
- }
-
- button:after {
- border: none;
-
- }
- }
- </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。