1. <source id="4j2ze"><track id="4j2ze"></track></source>

              1. [prov_or_city]網站制作咨詢電話

                咨詢熱線:0856-5202348 13885665889

                思南微信小程序登錄適配(2023年版)

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

                解決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/


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

                日韩人妻中文字幕毛片A√_少妇极品美女被高潮喷水_欧美黄视频_国产三级在线免费观看
                    1. <source id="4j2ze"><track id="4j2ze"></track></source>