<tbody id="y8msc"><bdo id="y8msc"></bdo></tbody>
<table id="y8msc"><blockquote id="y8msc"></blockquote></table>
  • <acronym id="y8msc"></acronym>
  • <menu id="y8msc"></menu><table id="y8msc"></table>
  • 圖片名

    咨詢熱線:0856-5202348 13885665889

    銅仁微信小程序登錄適配(2023年版)

    分類:信息化建設 發布時間:2023-03-12 88112次瀏覽

    解決2022 年 10 月 25 日后,微信小程序前端用戶頭像昵稱獲取問題?。?!眾所周知,微信小程序開發文檔更新那不是一...

    解決2022 年 10 月 25 日后,微信小程序前端用戶頭像昵稱獲取問題?。?!

    眾所周知,微信小程序開發文檔更新那不是一般的快,開發者都來不及去適配

    今天就來說說登錄這一塊到底改了哪些地方,以及怎么去適配

    我們先來看看更改了哪些?

    先放小程序登錄文檔這塊更新的公告:https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01 

    大概的調整說明

    2023小程序登錄適配.jpg


    大概意思是登錄api不會返回微信頭像跟昵稱了,現在默認返回灰色頭像以及"微信用戶"昵稱,需要開發者加一個編輯個人信息的頁面,需要注意的是最新更新"頭像昵稱填寫能力"基礎庫2.21.0版本一下不支持需要開發者向下兼容。官方給的登錄適配示例如下:

    2023小程序登錄適配1.png

    現在試試該怎么適配?

    其實很簡單,上demo,demo首頁

    2023小程序登錄適配2.png


    一般個人中心展示的用戶信息不需要動所以不需要加啥東西,加個進入個人信息按鈕或圖標就行了

    首頁源碼:

    <template>

        <view>

            <image :src="userInfo.avatarUrl" mode="aspectFill"></image>

            <view>

                <view>用戶信息</view>

                <view>

                    <view style="max-width: 300rpx;white-space: nowrap;margin-bottom: 10rpx;">頭像:{{userInfo.avatarUrl}}</view>

                    <view>姓名:{{userInfo.nickName}}</view>

                </view>

            </view>

            <view @click="tiInfo">

                <icon :type="'info'" size="26" />

            </view>

            <!-- 最新版登錄方法 -->

            <button v-if="canIUseGetUserProfile" type='primary' @click="getUserProfile">getUserProfile</button>

            <!-- 老版本登錄方法 -->

            <button v-else type='primary' open-type="getUserInfo" @getuserinfo="bindGetUserInfo">

            getuserinfo</button>

        </view>

    </template>

     

    <script>

        export default {

            data() {

                return {

                    //用來判斷用哪個登錄

                    canIUseGetUserProfile: false,

                    userInfo: {

                        avatarUrl: '/static/logo.png',

                        nickName: '--',

                    }

                }

            },

            onLoad() {

                //如果手機支持最新版登錄就用新方法

                if (uni.getUserProfile) {

                    this.canIUseGetUserProfile = true

                }

                

            },

            onShow() {

                if(uni.getStorageSync("userInfo")){

                    this.userInfo = uni.getStorageSync("userInfo")

                }

            },

            methods: {

                //老版登錄接口(不再彈出登錄彈框)

                bindGetUserInfo(e) {

                    if (e.detail.userInfo) {

                        //業務邏輯

                        

                    }

                },

                // 彈出登錄彈框(新版)

                getUserProfile() {

                    //推薦使用wx.getUserProfile獲取用戶信息,開發者每次通過該接口獲取用戶個人信息                                              均需用戶確認

                    // 開發者妥善保管用戶快速填寫的頭像昵稱,避免重復彈窗

                    uni.getUserProfile({

                        desc: '用于獲取您的個人信息', // s聲明獲取用戶個人信息后的用途,后續會展示在彈窗中,請謹慎填寫

                        success: res => {

                            //業務邏輯

                            this.userInfo = res.userInfo

                            uni.setStorageSync("userInfo",this.userInfo)

                        }

                    })

                },

                //去完善用戶信息

                tiInfo() {

                    uni.navigateTo({

                        url: "/pages/info/info"

                    })

                }

            }

        }

    </script>

     

    <style scoped>

        .content {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

     

            .avatar {

                height: 200rpx;

                width: 200rpx;

                margin-top: 200rpx;

                margin-left: auto;

                margin-right: auto;

                margin-bottom: 50rpx;

                border-radius: 50%;

            }

     

            .user-box {

                display: flex;

                flex-direction: column;

                justify-content: center;

     

                .title {

                    display: flex;

                    justify-content: center;

                    margin-bottom: 20rpx;

                    font-size: 36rpx

                }

     

                .info {

                    font-size: 30rpx;

                    color: #8f8f94;

                    margin-bottom: 10rpx;

                }

            }

        }

     

        .setting {

            position: absolute;

            top: 20rpx;

            right: 20rpx;

        }

    </style>


    demo 個人信息頁

    2023小程序登錄適配3.png

    這里button獲取頭像跟input獲取昵稱標簽,開發者可以根據自身小程序的登錄邏輯做向下兼容版本的處理(比如基礎庫版本小于等于2.21.0那就隱藏這些標簽走原先的邏輯就行)

    個人信息頁源碼:

    <template>

        <view>

            <view>

                <form @submit="formSubmit">

                    <view>

                        <text>頭像</text>

                        <!-- open-type="chooseAvatar"是最新加的屬性用于獲取微信頭像 @chooseavatar是獲取頭像的回調-->

                        <button open-type="chooseAvatar" @chooseavatar="bindchooseavatar">

                            <image :src="userInfo.avatarUrl" mode="aspectFill"></image>

                        </button>

                    </view>

                    <view>

                        <text>昵稱</text>

                        <!-- type="nickname"是最新加的屬性用于獲取微信昵稱 @nicknamereview是校驗昵稱是否違規-->

                        <input :value="userInfo.nickName" @nicknamereview="bindnicknamereview" name="nickName"

                            type="nickname" placeholder="請輸入昵稱">

                    </view>

                    <view class="" style="margin: 15rpx 0 40rpx 10rpx;color: #888;font-size: 26rpx;">昵稱限2~32個字符,一個漢字為2個字符

                    </view>

                    <button type="primary" form-type="submit">提交</button>

                </form>

            </view>

        </view>

    </template>

     

    <script>

        function compareVersion(v1, v2) {

          v1 = v1.split('.')

          v2 = v2.split('.')

          const len = Math.max(v1.length, v2.length)

        

          while (v1.length < len) {

            v1.push('0')

          }

          while (v2.length < len) {

            v2.push('0')

          }

        

          for (let i = 0; i < len; i++) {

            const num1 = parseInt(v1[i])

            const num2 = parseInt(v2[i])

        

            if (num1 > num2) {

              return 1

            } else if (num1 < num2) {

              return -1

            }

          }

        

          return 0

        }

        const version = wx.getAppBaseInfo().SDKVersion

        export default {

            data() {

                return {

                    userInfo: {

                        avatarUrl: '/static/logo.png',

                        nickName: '',

                    }

                }

            },

            onLoad() {

                if (compareVersion(version, '2.21.0') >= 0) {

                  console.log(compareVersion(version, '2.21.0'),"當前2.21.0大于此版本");

                } else {

                  // 如果希望用戶在最新版本的客戶端上體驗您的小程序,可以這樣子提示

                  wx.showModal({

                    title: '提示',

                    content: '當前微信版本過低,無法使用該功能,請升級到最新微信版本后重試。',

                    showCancel: false,

                    success: res=>{

                        if(res.confirm){

                            uni.navigateBack({

                                data: 1

                            })

                        }

                    }

                  })

                }

                if (uni.getStorageSync("userInfo")) {

                    this.userInfo = uni.getStorageSync("userInfo")

                }

            },

            methods: {

                //獲取昵稱回調

                bindnicknamereview(e) {

                    console.log(e);

                    if (e.detail.pass) {

                        //處理邏輯

                    }

                },

                //獲取頭像回調

                bindchooseavatar(e) {

                    console.log(e.detail.avatarUrl);

                    this.userInfo.avatarUrl = e.detail.avatarUrl

                    uni.setStorageSync("userInfo", this.userInfo)

                },

                //提交事件

                formSubmit(e) {

                    this.userInfo.nickName = e.detail.value.nickName

                    if (this.userInfo && this.userInfo.avatarUrl && this.userInfo.nickName) {

                        console.log(this.userInfo, '用戶表單信息');

                        uni.setStorageSync("userInfo", this.userInfo)

                        uni.showToast({

                            icon: 'success',

                            duration: 1500,

                            title: '保存成功!'

                        })

                    } else {

                        uni.showToast({

                            icon: 'error',

                            duration: 1500,

                            title: '請填寫完整!'

                        })

                    }

                }

            }

        }

    </script>

     

    <style scoped>

        .content {

            .info {

                .item {

                    display: flex;

                    justify-content: space-between;

                    align-items: center;

                    padding: 20rpx 20rpx;

                    border-bottom: 1rpx solid #ebebeb;

                    height: 70rpx;

     

                    button {

                        margin: 0;

                        background: none;

                        padding: 0;

                        height: auto;

                        line-height: 1;

     

                        image {

                            width: 70rpx;

                            height: 70rpx;

                            border-radius: 50%;

                        }

                    }

     

                    button::after {

                        background: none !important;

                        border: 0;

                    }

     

                    button .button-hover {

                        background: none !important;

                        color: none;

                    }

     

                    .name {

                        width: 170rpx;

                        flex-flow: row-reverse;

                    }

                }

            }

     

            .btn {

                width: 80%;

                border-radius: 60rpx;

            }

        }

    </style>






    武陵云來客智能SAAS系統

    官網地址:https://www.50yun.top

    免費注冊:https://www.50yun.top/col-reg/


    趕快注冊 - 創建自己的線上數字化運營系統吧

    久久久久无码国产精品一区_久久精品视频99精品视频150_中国嫩模一级真人片_色综合久久一区二区三区
    <tbody id="y8msc"><bdo id="y8msc"></bdo></tbody>
    <table id="y8msc"><blockquote id="y8msc"></blockquote></table>
  • <acronym id="y8msc"></acronym>
  • <menu id="y8msc"></menu><table id="y8msc"></table>