小程序头像和昵称填写能力用底部弹框界面实现
最近,微信小程序又更新了文档,关于获取头像和昵称需要进行适配。
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.界面都是可以实现的!!!希望自己多点自信、多点耐心、提高自己的专业技能!!!
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击