超实用!微信小程序设计精简版指南

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。

基于微信小程序轻快的特点,小程序拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。

1. 小程序的工作原理

首先,我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示。

2. 小程序的本质

所以,小程序的编码方式实际上是使用前端的语言进行编写的。从理解的角度,小程序可以认为是运行在微信的浏览器容器中,遵从了一套从设计到组件的WeUI规范的Web程序。

我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能。为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API 给开发者去使用。需要注意的是:多数 API 的回调都是异步,你需要处理好代码逻辑的异步问题。

3. WeUI页面元素所属层级、层级顺序及组合规范

WeUI页面元素所属层级、层级顺序及组合规范(低到高):Content、Navigation、Mask、Popout四层。

Content

内容层,承载页面主要内容。

Navigation

导航层,位于内容层之上,在用户滑动内容层时可保持位置不动,通常用于承载导航栏等需要固定在页面的元素。

Mask

蒙层,配合Popout层使用,用于锁定内容层和导航层操作,不单独使用。

Popout

弹出层,作为内容层和导航层的补充,用于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的Toast,表单报错提示等弹出内容。

4. 小程序运行机制

小程序启动

小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。

热启动:假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动;

冷启动:用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动,即冷启动。
小程序没有重启的概念。

前台/后台状态

当用户点击右上角胶囊按钮关闭小程序,或者按了设备 Home 键离开微信时,小程序并没有直接销毁,而是进入了后台状态;

当用户再次进入微信或再次打开小程序,小程序又会从后台进入前台。

小程序销毁

需要注意的是:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

  • 当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)小程序会被微信主动销毁。
  • 当小程序占用系统资源过高,可能会被系统销毁或被微信客户端主动回收。

在 iOS 上,当微信客户端在一定时间间隔内(目前是 5 秒)连续收到两次及以上系统内存告警时,会主动进行小程序的销毁,并提示用户 「该小程序可能导致微信响应变慢被终止」。建议小程序在必要时使用 wx.onMemoryWarning 监听内存告警事件,进行必要的内存清理。

5. 小程序更新机制

未启动时更新

开发者在管理后台发布新版本的小程序之后,如果某个用户本地有小程序的历史版本,此时打开的可能还是旧版本。微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本,如果有则会静默更新到新版本。总的来说,开发者在后台发布新版本之后,无法立刻影响到所有现网用户,但最差情况下,也在发布之后 24 小时之内下发新版本信息到用户。用户下次打开时会先更新最新版本再打开。

启动时更新

小程序每次冷启动时,都会检查是否有更新版本,如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。

如果需要马上应用最新版本,可以使用 wx.getUpdateManager API 进行处理。

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/4572.html

发表评论

登录后才能评论