多图指南——微信小程序设计规范.pdf

多图指南——微信⼩程序设计规范 本⽂由作者孟冬初寒⽉于社区发布 本⽂较长，建议收藏 微信⼩程序是⼀种不⽤下载就能使⽤的微应⽤，也是⼀项应⽤创新发明，经过三年的发展，已经构造了新的微信⼩程序 开发环境和开发者⽣态。⼩程序也是这么多年来中国互联⽹⾏业⾥⼀个真正能够影响到普通程序员的创新成果。 那么，掌握微信⼩程序设计技能和设计规范也是产品经理的技能树之⼀。 微信⼩程序是⼀种全新的连接⽤户与服务的⽅式，它可以在微信内被便捷地获取和传播，同时具有出⾊的使⽤体验。 ⼩程序提供了⼀个简单、⾼效的应⽤开发框架和丰富的组件及API，帮助开发者在微信中开发具有原⽣ APP 体验的服 务。 基于微信⼩程序轻快的特点，⼩程序拟定了界⾯设计指南和建议。设计指南建⽴在充分尊重⽤户知情权与操作权的基础 之上。旨在微信⽣态体系内，建⽴友好、⾼效、⼀致的⽤户体验，同时最⼤程度适应和⽀持不同需求，实现⽤户与⼩程 序服务⽅的共赢。 1 ⼩程序概述 ⼀个⼩程序页⾯组成，如下： 为了⽅便开发者减少配置项，描述页⾯的四个⽂件必须具有相同的路径与⽂件名。 1、⼩程序的⼯作原理 ⾸先，我们来简单了解下⼩程序的运⾏环境。⼩程序的运⾏环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式 ⼯作在渲染层，JS 脚本⼯作在逻辑层。 ⼩程序的渲染层和逻辑层分别由2个线程管理：渲染层的界⾯使⽤了WebView 进⾏渲染；逻辑层采⽤JsCore线程运⾏ JS脚本。⼀个⼩程序存在多个界⾯，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下⽂ 中也会采⽤Native来代指微信客户端）做中转，逻辑层发送⽹络请求也经由Native转发，⼩程序的通信模型下图所⽰。 2、⼩程序的本质 所以，⼩程序的编码⽅式实际上是使⽤前端的语⾔进⾏编写的。从理解的⾓度，⼩程序可以认为是运⾏在微信的浏览器 容器中，遵从了⼀套从设计到组件的WeUI规范，的Web程序。 我们称微信客户端给⼩程序所提供的环境为宿主环境。⼩程序借助宿主环境提供的能⼒，可以完成许多普通⽹页⽆法完 成的功能。为了让开发者可以很⽅便的调起微信提供的能⼒，例如获取⽤户信息、微信⽀付等等，⼩程序提供了很多 API 给开发者去使⽤。需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。 3、WeUI页⾯元素所属层级、层级顺序及组合规范 WeUI页⾯元素所属层级、层级顺序及组合规范 （低到⾼）：Content、Navigation、Mask、Popout四层。 1）Content 内容层：承载页⾯主要内容。 内容层：承载页⾯主要内容。 2）Navigation 导航层：位于内容层之上，在⽤户滑动内容层时可保持位置不动，通常⽤于承载导航栏等需要固定在页⾯的元素。 3）Mask 蒙层：配合Popout层使⽤，⽤于锁定内容层和导航层操作，不单独使⽤。 4）Popout 弹出层，作为内容层和导航层的补充，⽤于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的Toast，表单报错 提⽰等弹出内容。 4、⼩程序运⾏机制 1）⼩程序启动 ⼩程序启动会有两种情况，⼀种是「冷启动」，⼀种是「热启动」。 热启动：假如⽤户已经打开过某⼩程序，然后在⼀定时间内再次打开该⼩程序，此时⽆需重新启动，只需将后台的⼩程 序切换到前台，这个过程就是热启动； 冷启动：⽤户⾸次打开或⼩程序被微信主动销毁后再次打开的情况，此时⼩程序需要重新加载启动，即冷启动。 ⼩程序没有重启的概念。 2）前台/后台状态 当⽤户点击右上⾓胶囊按钮关闭⼩程序，或者按了设备 Home 键离开微信时，⼩程序并没有直接销毁，⽽是进⼊了后台 状态； 当⽤户再次进⼊微信或再次打开⼩程序，⼩程序⼜会从后台进⼊前台。 3）⼩程序销毁 需要注意的是：只有当⼩程序进⼊后台⼀定时间，或者系统资源占⽤过⾼，才会被真正的销毁。 • 当⼩程序进⼊后台，客户端会维持⼀段时间的运⾏状态，超过⼀定时间后 （⽬前是5分钟）⼩程序会被微信主动销 毁。 • 当⼩程序占⽤系统资源过⾼，可能会被系统销毁或被微信客户端主动回收。 在 iOS 上，当微信客户端在⼀定时间间隔内 （⽬前是 5 秒）连续收到两次及以上系统内存告警时，会主动进⾏⼩程序的 销毁，并提⽰⽤户 「该⼩程序可能导致微信响应变慢被终⽌」。建议⼩程序在必要时使⽤wx.onMemoryWarning 监听 内存告警事件，进⾏必要的内存清理。 5、⼩程序更新机制 1）未启动时更新 开发者在管理后台发布新版本的⼩程序之后，如果某个⽤户本地有⼩程序的历史版本，此