电商门户网站,优化大师有必要安装吗,广州番禺发布最新通告,软文营销网站文章目录 1. 官方文档教程2. 编写静态页面3. 关于作者其它项目视频教程介绍 1. 官方文档教程
https://developers.weixin.qq.com/miniprogram/dev/framework/
2. 编写静态页面
mine.wxml布局文件
!--index.wxml--
navigation-bar title个人中心 ba… 文章目录 1. 官方文档教程2. 编写静态页面3. 关于作者其它项目视频教程介绍 1. 官方文档教程
https://developers.weixin.qq.com/miniprogram/dev/framework/
2. 编写静态页面
mine.wxml布局文件
!--index.wxml--
navigation-bar title个人中心 back{{false}} color#ffffff background#f7b451/navigation-barscroll-view classscrollarea scroll-y typelistview classmine-containerimage srchttps://img1.baidu.com/it/u1167785969,3358198230fm253fmtautoapp120fJPEG?w800h800 mode bind:tapbtnUpLoadAvatarHandle /view classuser-info-containertext classusernamewangwu/texttext classnickname这个家伙很懒什么都没有留下~/text/view/viewview classnavigation-center-containerview classnavigation-collect-container bind:tapcollectHandleimage src../../assets/ic_kf.png mode /text官方客服/text/viewview classnavigation-collect-container bind:taponNoteClickHandleimage src../../assets/ic_jf.png mode /text积分兑换/text/viewview classnavigation-collect-container bind:tapcollectHandleimage src../../assets/ic_bz.png mode /text帮助中心/text/viewview classnavigation-collect-container bind:taponNoteClickHandleimage src../../assets/ic_sz.png mode /text系统设置/text/view/viewview classline/viewview classnavigation-item-container bind:tapeditPwdHandletext修改密码/textimage src../../assets/ic_right_ror.png //viewview classline2/viewview classnavigation-item-container bind:taponAboutClickHandletext关于APP/textimage src../../assets/ic_right_ror.png //viewview classline2/viewview classline/viewview classnavigation-item-container bind:tapclearHandletext清理缓存/textimage src../../assets/ic_right_ror.png //viewview classline2/viewview classnavigation-item-containertext用户条款/textimage src../../assets/ic_right_ror.png //viewview classline2/viewview classnavigation-item-containertext隐私协议/textimage src../../assets/ic_right_ror.png //viewview classline2/viewview classnavigation-exit-container bind:taponExitHandletext退出登录/text/view/scroll-viewnavigation-bar为创建项目系统提供一个默认的顶部导航栏组件 mine.wxss 样式文件
page {height: 100vh;display: flex;flex-direction: column;background-color: #f5f5f5;
}.scrollarea {flex: 1;overflow-y: hidden;
}.mine-container {display: flex;flex-direction: row;padding: 50rpx;align-items: center;background-color: #f7b451;
}.mine-container image {width: 150rpx;height: 150rpx;border-radius: 50%;
}.user-info-container {display: flex;margin-left: 20rpx;flex-direction: column;}.username {font-weight: 700;font-size: 34rpx;color: white;
}.nickname {color: #999999;margin-top: 20rpx;font-size: 26rpx;color: white;
}.line {display: flex;height: 20rpx;background-color: #f5f5f5;
}.line2 {display: flex;height: 1rpx;background-color: #f5f5f5;
}.navigation-item-container {display: flex;flex-direction: row;justify-content: space-between;align-items: center;height: 80rpx;padding-left: 20rpx;padding-right: 20rpx;background-color: #ffffff;
}.navigation-item-container image {width: 30rpx;height: 30rpx;
}.navigation-item-container text {color: #999999;font-size: 26rpx;
}.navigation-exit-container {display: flex;justify-content: center;margin-top: 150rpx;height: 80rpx;background: #f5f5f5;line-height: 80rpx;color: #999999;font-size: 26rpx;background-color: #ffffff;
}.navigation-center-container {display: flex;flex-direction: row;justify-content: space-around;padding: 40rpx 0;margin-left: 20rpx;margin-right: 20rpx;margin-top: -20rpx;background-color: #ffffff;
}.navigation-collect-container {display: flex;flex-direction: column;align-items: center;}.navigation-center-container image {width: 50rpx;height: 50rpx;
}.navigation-center-container text {margin-top: 10rpx;color: #999999;font-size: 22rpx;
}运行效果图 3. 关于作者其它项目视频教程介绍
本人在b站录制的一些视频教程项目免费供大家学习
Android新闻资讯app实战https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source984bb03f768809c7d33f20179343d8c8Androidstudio开发购物商城实战https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source984bb03f768809c7d33f20179343d8c8Android开发备忘录记事本实战https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source984bb03f768809c7d33f20179343d8c8spm_id_from333.788.videopod.sectionsAndroidstudio底部导航栏实现https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from333.337.search-card.all.clickvd_source984bb03f768809c7d33f20179343d8c8Android使用TabLayoutViewPager2实现左右滑动切换https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from333.337.search-card.all.clickvd_source984bb03f768809c7d33f20179343d8c8
