![2571178cd7da39d8fff4a69e2de9d2ce.png](https://i-blog.csdnimg.cn/blog_migrate/99731ed907b2ee4cb8cc02c6b5e971e5.jpeg)
写在前面
Vue跨平台APP开发案例:完成常用界面的开发,学习积累vue栈知识,重点是提供拿来主义代码。
今日主题
APP最常用界面之一:登录
平台支持
- 小程序:mpvue、cmljs(卡梅龙)
- APP:uniapp、apicloud以及任何基于h5的混合应用框架
- weex
效果展示
![799569960832446b96fb6359c71e0ab1.png](https://i-blog.csdnimg.cn/blog_migrate/64fcaf1e26435e1e5152f69388da1e19.jpeg)
登录界面
实现分析
- 界面分析
- 整体水平居中
- 图标较少,大部分样式代码可实现
- psd标注切片上传蓝湖
- 代码实现
- 开发工具:HBuilderX
- 代码
![76b4d6d8df804966d3cbd82c397d5552.png](https://i-blog.csdnimg.cn/blog_migrate/1614e32465cc6cd04d89115d0a5de7d1.jpeg)
界面解析
- 圆角头像
结构:外圆(内部透明)+内圆+头像
界面代码:
![8d095927c38069e67d5919adc7179157.png](https://i-blog.csdnimg.cn/blog_migrate/e999cf2b067eac561365395868f484da.jpeg)
界面样式:
![44733e847acd2fa6fa30fd07a6f121b0.png](https://i-blog.csdnimg.cn/blog_migrate/97a308ec6d79df45cc2df9476013dead.jpeg)
- 登录表单
界面代码:
![224f14efb09fcad16604353e62659177.png](https://i-blog.csdnimg.cn/blog_migrate/86507cc5c6ca8f72efecfcf8865fbde7.jpeg)
界面样式:
![a8301f216d3f60471c61a60cebd5683a.png](https://i-blog.csdnimg.cn/blog_migrate/112b3cc20dedcf1f5b761547560479b7.jpeg)
- 第三方登录
界面代码
![484849210e89ec3ebf315d295da07e77.png](https://i-blog.csdnimg.cn/blog_migrate/90e34c7499fef05e62eb714e557ad3f0.jpeg)
界面样式
![b7fcb7f4b70cca0bdfc8f483eba1ad22.png](https://i-blog.csdnimg.cn/blog_migrate/564159693ae0034d2d2bfbbfc88c8db5.jpeg)
使用的技术及注意点
- css扩展:sass
- input的双向绑定:两种方式(v-model、bind:value + input事件 )
总结
为了平台的兼容性,全部采用flex布局。登录界面相对简单,你也可以练习下,看看会遇到什么问题。
****最后****
这个案例是一个长期的积累,希望你能够+关注,点赞!!你的支持就是我的动力!!