微信小程序UI设计（一）之开发前言

该系列主要针对微信小程序UI的设计。

既然是UI设计，当然主要设计在（页面描述文件）.wxml和（页面样式文件/样式语言）.wxss。

weixin markup language weixin style sheet

一、开始设计前，我们需要知道小程序UI设计的尺寸单位相关问题。

css中有px、cm、mm、in、%等，小程序则加了rpx、rem，建议尽量使用这2种，人以后基本都用rpx。为什么呢？！

因为不同手机屏幕的宽度分辨率不一样，导致不同手机如果用px写死像素点会不能兼容所有手机，于是为了屏幕宽度自适应，规定屏幕宽慰750rpx。这样的话，如iphone6，宽度为375px，则1rpx=0.5px=1像素。

.wxml
<view >
像素自适应
</view>
<view class='px'></view>
<view class='rpx'></view>.wxss
.px{width: 50px;height: 100px;background-color: red;
}
.rpx{width: 50rpx;height: 100rpx;background-color:black;
}

显示效果：（可以看到px比rpx大2倍）

rem（root em）：同样规定屏幕宽度为20rem，则1rem=（750/20）rpx，自己可以试试。

二、样式的导入方法

/** common.wxss **/
.a{
padding:50rpx;
}/** index.wxss **/
@import "common.wxss";.b{
padding:100rpx;
}

index.wxml可以使用 a ，b来修饰组件。

这是该设计UI系列注意的点。

微信小程序UI设计（一）之开发前言相关推荐

网页+微信小程序UI设计及前端开发（第二周）
日期工作内容 2020年8月12日网页前端架构,素材查找,小程序前端架构 2020年8月13日网页.小程序页面完善,提交网页与小程序前端文件文章目录一.网页 (一)页头 (1)logo及导航 ...
web界面左边菜单设计_微信小程序UI设计规范
第一部分:概述微信小程序,大家应该都不陌生,从2018年开始,小程序迅猛发展,小程序依托微信,凭借"触手可及用完即走"的用户体验备受青睐.现已为各大企业广泛采用.今天就给大家分享 ...
5个非常实用的小程序UI设计模板分享
在互联网飞速发展的时代,手机逐渐成为工作.学习和生活的必需品.小程序作为一种无需下载和安装即可使用的应用程序,因其快速.方便.强大的功能而受到用户的喜爱.小程序无处不在,随时可用,用完就走.随着需求市 ...
视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
微信小程序、APP分销商城开发：分销功能模块设计
前面我们讲了微信小程序商城基础营销功能:微信小程序商城.APP商城开发营销活动功能策划(拼团.砍价.秒杀.直播.优惠券等) 今天讲的分销系统更是强大的营销功能,它应该如何设计呢?我们的系统经过一点一点 ...
“鞋之城”微信小程序的设计与开发
摘要:随着现如今生活水平和文明程度的以及消费能力的提高,人们对鞋类要求也越来越高."鞋之城"购物微信小程序的设计与实现主要基于微信平台实现与大流量用户的线上连接.本课题基于微信小程 ...
当前最热门的微信小程序UI组件库
1.WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progre ...
高颜值微信小程序 UI 组件库！
Vant Weapp Vant 是一个轻量.可靠的移动端组件库,由有赞于 2017 年开源. Github(⭐️ 16.5k):github.com/youzan/vant- iView Weapp ...
上传文件微信小程序input_快速上手微信小程序UI框架
本课程属于微信小程序 A计划,不单独售卖,加入 A 计划可免费观看本课程及所有微信小程序收费课程~ 微信小程序 A计划永久有效期购买链接: http://www.sikiedu.com/clas ...
小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...

微信小程序UI设计（一）之开发前言

微信小程序UI设计（一）之开发前言相关推荐

最新文章

热门文章