小程序头像和昵称填写能力用底部弹框界面实现

最近，微信小程序又更新了文档，关于获取头像和昵称需要进行适配。

https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01

其中，基础库在xxx以上的都不能弹框授权获取了，官方给的是在页面中获取，但是为了保持用户的体验，还是自己写一个底部弹框授权好一点。这里主要是基于uniapp进行编写的，给大家先展示一下效果：

头像昵称获取基于头像昵称填写能力

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl}}"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

界面设计主要是利用了mask遮罩，分为三层：原页面、mask遮罩、弹框（层级也是这样排列的），大致的页面布局是这样子的，其中注意v-if是控制mask跟底部弹框的，mask跟弹框的css主要是设置好定位即可，mask设置background: rgba(0,0,0,.8);，然后利用z-index设置层级

<template><view><button @click.native="showPop">点击</button><view class="content"  v-if="show"><view class="popup"><view>标题</view><view>提示</view><button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image src="{{avatarUrl}}"></image></button> <view>点击选择头像</view></button> <view><view>昵称</view><input type="nickname" class="weui-input" placeholder="请输入昵称"/></view><view class="btn"><button @click.native="close" class="btn">关闭</button><button class="btn2">提交</button></view></view></view> </view>
</template>

具体的css代码这里就不进行展示了，最后总结一下学到的知识点：

1.有时候会报vm.xxx is not function，上网查了大部分是说写错了，写在了method外，或者函数名跟变量名同名，但是我检查了一下都没有，也不知道啥原因，但是加上.native可以解决

2.去除button自带的边框与border-radius

button::after {
border: none;
}

button {
border-radius: 0;
}

3.z-index层级设置是可以遮住自主编写的底部tarbar的，关于查到的很多遮不住的原生tarbar，这里还存疑

4.界面都是可以实现的!!!希望自己多点自信、多点耐心、提高自己的专业技能！！！

小程序头像和昵称填写能力用底部弹框界面实现相关推荐

uniapp - [最新] 超详细实现支付宝小程序获取手机号、个人信息，支付宝弹框授权拿到用户手机号与昵称头像等信息完整流程（详细示例源码与注释，一键复制快速应用到项目中）
效果图网上的文章乱七八糟的都不行,新手小白很难看懂,本篇文章通俗易懂. 本博客实现了在uniapp 支付宝小程序项目中,从 0-1 描述了如何授权获取用户的手机号和头像昵称信息,一看就能懂你可以跟 ...
微信小程序头像和昵称无法显示
通过微信自带函数wx.getUserProfile可获得微信用户的昵称和头像地址. 原来利用 <open-data type="userAvatarUrl"></ ...
微信小程序 - 气泡菜单组件（仿微信气泡弹框显示菜单）
前言如果您想直接获得源代码示例,请滑到文章最底部克隆下载示例,超详细的注释和干净整洁的代码. 本示例能根据元素内容的宽高自动计算气泡的定位,并且气泡的内容项可以灵活的添加, 当点击一个按钮或元素 ...
微信小程序获取用户头像和昵称(填写头像昵称能力)
开放能力调整公告总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
小程序授权头像昵称改为头像昵称填写能力详解
自 2022 年 10 月 25 日 24 时后,微信小程序不再能通过授权直接获取到用户的微信头像和昵称:为了保护用户隐私,改成头像昵称填写能力 ,获取头像昵称的流程变复杂了. 官方公告头像昵称获 ...
小程序【头像昵称填写能力】使用
小程序 [头像昵称填写能力]使用引言 [头像昵称填写能力]使用方法页面使用到的封装方法 asyncWx.js 文件 replace.js 文件注意引言由于小程序在不久之后将对 getUser ...
微信小程序获取用户头像和昵称(头像昵称填写能力)
开放能力调整公告总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
微信小程序头像昵称填写功能
自 2022 年 10 月 25 日 24 时后(以下统称 "生效期" ),用户头像昵称获取规则将进行如下调整: 自生效期起,小程序 wx.getUserProfile 接口将被收 ...
2022年12月份最新小程序头像昵称获取方式
小程序头像昵称获取方式又双叒改变了,自小程序基础库2.21.2开始,小程序开始废弃wx.getUserProfile接口,新提交的小程序从此接口获取的头像昵称均变为默认头像和昵称,这对于一个开发了几百 ...

小程序头像和昵称填写能力用底部弹框界面实现

小程序头像和昵称填写能力用底部弹框界面实现相关推荐

最新文章

热门文章