1、 小程序布局:小程序的布局主要采用块状结构进行布局,优先采用卡片、列表或网格等布局方式;
2、 小程序 UI 调色:小程序的 UI 调色使用典型的灰色调子,较亮的颜色基调使用明度较浅的颜色;
3、小程序 UI 尺寸:采用 1080px 宽,720px 高的界面设计尺寸,控件尺寸以 8px 为基准单位,即每个控件的间距需以 8px 设计;
4、 小程序 UI 字号:字体最大尺寸 36px,最小尺寸 24px,中等字体尺寸使用 30px。
先做小程序“我的”页面,需要注意的有两个点:
先上图,有图才有真相:
这一块我增加了一个隐藏的button, 未获取到用户信息时,显示为默认头像和“微信授权”的文字提示,登陆后,头像变为微信头像,文字变为微信昵称。
具体ui为判断没有授权则显示默认头像及提示,并在其上层覆盖一个透明的button,用户触发授权事件。
在js中需要注意的是,open-type="getUserInfo"需要做老版本兼容,老版本通过wx.getUserInfo即可唤起授权页面,不需要添加button去触发
详情见下一篇: 微信小程序:“我的”页面布局(二):可配置功能菜单列表
微信小程序:“我的”页面布局(一):微信用户信息获取及UI
微信小程序:“我的”页面布局(二):可配置功能菜单列表
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)