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

Posted 2023-03-29 纯纯小白打码人

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

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.界面都是可以实现的!!!希望自己多点自信、多点耐心、提高自己的专业技能！！！