为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中WXML模板和WXSS样式工作在渲染层，JS脚本工作在逻辑层。
WeUI页面元素所属层级、层级顺序及组合规范（低到高）：Content、Navigation、Mask、Popout四层。
Content
内容层，承载页面主要内容。
Navigation
导航层，位于内容层之上，在用户滑动内容层时可保持位置不动，通常用于承载导航栏等需要固定在页面的元素。
Mask
蒙层，配合Popout层使用，用于锁定内容层和导航层操作，不单独使用。
Popout
弹出层，作为内容层和导航层的补充，用于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的Toast，表单报错提示等弹出内容。
小程序启动
小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。
前台/后台状态
小程序销毁
未启动时更新
启动时更新
小程序每次冷启动时，都会检查是否有更新版本，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。
如果需要马上应用最新版本，可以使用wx.getUpdateManagerAPI进行处理。
不同项目成员拥有不同的权限，从而保证小程序开发安全有序。
1.小程序菜单深浅配色方案（iOS和Android）
2.小程序菜单
3.品牌标志（Logo）设计
开发者可为小程序页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。
首页原生底部标签
顶部标签
顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。
使用标题栏提示加载小程序页面内容的过程
开发者可以参考图中样式，使用标题栏提示加载小程序页面内容的过程。例如：
模态加载
模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。
自定义页面内容的加载样式
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。
Loadmore组件
小程序页面Content设计，实际上就是依据我们的业务设计，将小程序组件和我们自己设计的组件，按照小程序设计规范与视觉规范有序的组合和排版的过程。
字体
字体颜色
主要颜色：
#09BB07#353535#888888#576b95#e64340RGB(9,187,7)RGB(53,53,53)RGB(136,136,136)RGB(87,107,149)RGB(230,67,64)
LightGraySemiBlack#b2b2b2#888888#353535#000000
蓝色为链接用色，绿色为完成字样色，红色为出错用色Press与Disable状态分别降低透明度为20%与10%。
NaormalPress（20%）Disabled（10%）#576b95#09BB07#e64340
列表
表单
按钮
图标
尺寸：100*100pX
般用于结果页面状态提示，根据结果的情况选择对应的icon。
图标型弹出提示
图标型弹出提示适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。
文字型弹出提示
文字型弹出提示适用于需要轻量化地用文字解释当前状态或提醒不严重的错误。1.5秒后自动消失，不打断流程，对用户影响较小。
模态对话框
对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。
结果页（非Popout）
对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。
异常状态——表单出错（非Popout）
表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。
△IOS-ActionSheetAndroid-ActionSheet
Half-screenDialog
Picker
Toast
云开发提供了几大基础能力支持：
小程序开源了，weui-wxss、weui.js和react-weui等，可以使用他们进行Web页面的设计与开发，它可以运行在任何浏览器中。
更多小程序设计实战：
JINGWHALE数字科学艺术创新中心全链路产品设计师、全栈技术架构师