从产品设计角度全面总结微信小程序的发展

微信小程序是连接用户和服务的新方式。微信内易于理解和分享，用户体验极佳。

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

基于微信小程序轻快的特点，小程序制定了界面设计的指南和建议。设计准则建立在充分尊重用户的知情权和工作权的基础上。旨在在微信生态内建立友好、高效、一致的用户体验，同时增强适应和支持不同需求的能力，实现用户与客户的双赢。

1。小程序概述

小程序页面由以下几部分组成：

为了方便程序员减少配置项，定义页面的四个文件必须具有相同的路径和文件名。

1。小程序是如何运作的

首先，让我们快速了解一下小程序的世界。小程序的执行环境分为渲染层和逻辑层。 WXML模板和WXSS方法工作在渲染层，JS脚本工作在逻辑层。

小程序的渲染层和逻辑层各由两个线程管理：渲染层的界面使用WebView进行渲染；逻辑层使用JsCore线程来运行JS脚本。小程序的接口很多，所以渲染层的WebView线程也很多。这两个线程之间的通信是通过微信客户端（下面也会用Native来指代微信客户端）进行通信，逻辑层会发送网络请求。同样是原生自带的，小程序界面模型如下图所示。

2。微程序的内容

所以，微程序的编码方式其实就是用前端语言来写的。从实用的角度来看，小程序可以认为是一个运行在微信浏览器容器中的网页程序，从设计到元素都兼容WeUI系列。

我们把小程序中微信客户端提供的环境称为托管环境。借助主机世界提供的功能，小程序可以执行许多简单网页无法完成的任务。为了让开发者轻松激活微信提供的能力，比如获取用户信息、微信支付等，小程序提供了很多API供开发者使用。需要注意的是： 大多数API调用都是异步的，你需要处理异步代码逻辑问题。

3。 WeUI 页面元素的级别、顺序和总和

WeUI 页面元素的级别、顺序和总和（从低到高）：四个级别：Content、Search、Mask 和 Pop out。地址

1)、Content

内容层：承载页面的内容。

2)、导航

导航层：位于内容层之上，当用户单击内容层时，它可以保持在原位。它通常用于托管需要在页面上配置的元素，例如导航栏。

3)、Masks

Masks：与Popout图层一起使用，以锁定内容蒙版和导航层功能，但不能单独使用。 ？内容。

4。小程序工作机制

1）、小程序启动

小程序启动有两种情况，一种是“冷启动”，一种是“热启动”。

热启动：如果用户已经打开过一个小程序，然后在一段时间内再次打开该小程序，则无需立即启动，只需将后台小程序释放到前面即可。 ，这个过程是热启动；

冷启动：当用户第一次打开小程序或者取消活跃微信后重新打开小程序时，需要重新启动小程序，这就是冷启动。

小程序不知道重新启动。

2)、前台/后台位置

当用户点击右上角胶囊按钮关闭小程序，或者点击设备Home键退出微信时，小程序不会直接销毁，而是进入后台状态；

当用户重新进入微信或重新打开小程序时，小程序将从后台进入前面板。

3）杀掉小程序

请注意，如果小程序一段时间没有在后台运行，或者系统资源过高，就会被杀掉。

• 当小程序进入后台时，客户端会长期保持运行状态。一段时间后（目前为5分钟），小程序将被微信删除。
• 当小程序消耗过多系统资源时，可能会被系统销毁或被正在运行的微信客户端重启。

在 iOS 上，当微信客户端在指定时间内（目前为 5 秒）收到两次或以上系统内存警报时，将会导致小程序崩溃，并提示用户“此小程序可能是对微信的响应速度变慢”鼓励小程序使用 wx.onMemoryWarning 来监视内存警告事件并在必要时执行必要的内存清理。

5。小程序更新机制

1），未启动时更新

在用户管理区发布新版本小程序后，如果用户本地有历史版本的小程序，这次打开它可能仍然是旧版本。微信客户端将有多次机会检查本地存储的小程序是否有更新版本。如果是这样，它将默默更新到新版本。一般来说，开发者在后台发布新版本后，并不能立即影响现有网络用户，但最坏的情况下，新版本信息会在发布后24小时内共享给用户。用户下次打开时，会先更新最新版本再打开。

2)、启动时更新

每次小程序冷却时，它都会检查是否有更新版本。如果发现有新版本，则会下载新版本的代码包，并使用客户端本地的包进行初始化，即新版本的小程序需要等待下一次冷启动才能应用。 。

如果需要立即应用最新版本，可以使用wx.getUpdateManager API来处理。

6。插件

插件是可以添加到小程序中直接使用的功能组件。开发者可以将插件创建为小程序，供其他小程序使用。同时，小程序开发者可以直接在小程序内使用插件，无需重复开发，为用户提供更丰富的服务。

7。小程序成员管理

项目成员拥有不同权限，保证小程序安全稳定开发。 ？可以快速获取页面内容。通过定义要点，您应该尽量避免页面上与用户的决策和操作无关的其他干扰因素。

2）流程相关信息：为了让用户顺利使用页面，当用户迈出一步时，应防止目标之外的内容打断用户。

3）异常情况-表单错误的情况： 报告错误，在表单顶部注明错误原因，并标识错误字段以提示用户更改。

4）输入减少的情况：由于手机键盘面积小且密集，导致输入困难，容易出错。因此，在设计小程序页面时，应尽量减少用户输入，并利用可用的接口或其他方式。易于使用的选择控件可改善用户体验。

例如下图，添加银行卡时，通过摄像头控制界面帮助用户进入。此外，微信团队还开放了地理位置接口等程序微信迷你接口。充分利用这些接口将提高用户输入的效率和准确性，改善体验。？选择最适合您的小程序页面布局的方案。

2。小程序菜单

在所有小程序页面，包括小程序内嵌网页和插件，微信都会将官方小程序菜单放置在右上角，如图所示。设计师无法自定义内容，但可以选择深色和浅色两种基本颜色来匹配页面的风格。官方小程序菜单将放置在界面指定位置。设计者在设计界面时应在该区域预留空间。如果需要在该区域附近放置交互元素，请特别注意交互动作是否发生碰撞以及动作是否易于使用。 。

3。品牌设计（Logo）

小程序首页是展现微信小程序品牌特征的页面之一。该页面会突出品牌的特色以及小程序的定位。除了首页的品牌展示之外，页面上的所有其他元素，比如物品进度通知等，都是微信以同样的方式提供的，无法更改，不需要开发者开发。

5。小项目研究和规划

1.导航区域和区域标题

开发者可以根据自己的需求在页面中添加自己的导航。并使不同页面之间的导航保持一致，有明确的方向和返回路径。由于手机屏幕尺寸的限制，小程序页面的导航应该尽可能简单。鼓励开发者保留自己的导航风格与微信官方小程序菜单风格的一些差异，以便于区分。

2。标签导航

开发者可以在小程序页面添加标签浏览器。选项卡分页栏可以位于页面的顶部或底部，以便于在不同选项卡之间导航。 符号数量不得少于2个，最大数量不得超过5个。为保证可点击区域，建议符号数量不超过4个元素。一个页面不应包含多于一组的选项卡。

首页下标签

其中，小程序页面可以选择微信提供的下标签的语言。该方法用于小程序页面。开发时可以自定义图标的形状、文案标记、文案颜色等。图标大小等具体信息请参考开发文档和WeUI核心控件库。

顶部选项卡

顶部分页选项卡的颜色可自定义。在选择自定义颜色时，重要的是要注意保持分页栏标签的可用性、可见性和功能性。 ？进步。

下载过程中，应保持动画效果；没有动画效果的渲染很容易给人一种界面是静态的印象。

同一页面上不要使用超过 1 个动画。

反馈结果

除了在等待时向用户提供及时的反馈外，还需要对操作结果进行清晰的反馈。根据实际情况，可以选择不同的反馈方式。对于页面本地操作，可以直接在工作区提供响应。对于页面级响应，可以使用弹出提示、对话框或响应页面显示。对于自定义控件，微信设计中心会提供控件库，其中包含提供完整功能的控件。

1。开始下载页面

小程序起始页是展现微信品牌特色的页面之一。该页面会突出品牌的特色以及小程序的定位。页面上的所有其他元素，例如项目进度指示器，均由微信提供。

2。下载页面刷新

在微信小程序中，微信提供了标准的页面刷新能力和方法，开发者无需开发。

3。全球投放反馈

1)、 使用标题栏提示小程序页面内容加载过程

开发者可以指定图片的方式，使用标题栏推送脚步。通过加载小程序页面的内容。示例：

2)、模态加载

模态加载方法将覆盖整个页面。由于无法明确传达安装位置或具体内容，可能会引起用户的焦虑，因此应谨慎使用。 。除某些全局函数外，不要使用模态绑定。

3)、调整页面内容加载方式

开发者可以用小程序自定义页面内容加载方式。建议无论是用于本地还是全局加载，自定义加载过程都应尽可能短，并使用简单的动画来告知用户加载过程。

4)、Loadmore元素

4、部分下载

部分加载反馈意味着它只在导致下载的页面上提供本地反馈。这种反馈机制更有针对性，更少跳页，这就是微信方式建议的反馈。例如：

7。小程序页面内容设计

小程序页面设计很大程度上是基于我们公司的设计，结合了小程序组件和我们自己定制的设计元素。小程序设计和视觉参数。排序和写作相结合的过程。？系统字体兼容。标准字体大小为 20、18、17、16,14、13、11 (pt)。特殊使用条件如下：

2)，字体颜色

①，主色：

#09BB07         #353535         #888888            #576b95          #e64340
RGB(9,187,7)    RGB(53,53,53)   RGB(136,136,136)   RGB(87,107,149)  RGB(230,67,64)

②，次要内容为黑色，次要内容为灰色；参数和默认值均为绿色；作为主要内容的定义内容的很大一部分是半黑的。

Light        Gray          Semi         Black
#b2b2b2      #888888       #353535      #000000

③。蓝色是链接颜色，绿色是完整单词颜色，红色是错误颜色。 Press 和Disable 状态分别将透明度降低至20% 和10%。 ？选择适当的图标。 ？浅色成功推文将在1.5秒后自动消失。它不会中断进程，对用户影响很小。适合不需要强调的表现提醒，比如成功通知。特别注意的是，这种格式不适合虚假通知，因为推文需要清楚地传达给用户，所以不适合使用弹出推文。

2) 文本型弹出消息

文本型弹出消息适用于有关当前状态的浅文本信息或小错误提醒。 1.5秒后自动消失，不中断过程，对用户影响很小。

3)、对话框

对话框可用于推送用户需要了解的操作结果的状态，可附加到下一步的操作说明中。

4)、结果页面（非Popout）

对于操作结果为当前流程结束的情况，可以通过操作结果页面进行反馈。这种方法是最有力、最清晰的方式告知用户操作已完成，并且可以根据实际情况为下一步操作提供指导。

5)、非法状态-表单错误 （不是Popout）

报告表单错误，在表单顶部告知错误原因，并指示字段错误提示用户更改。L6)、对话框（对话框）

7)、ActionSheet-对话框屏幕（半屏）

9) 选择器（多列选择器）0)、Toast（弹出窗口）通知）

查看WEUI地址：预览地址

9.数据分析小程序

1.功能概述

小程序数据分析是一款面向小程序开发者和运营者的数据分析工具，提供关键指标统计、实时访问控制、配置分析等，帮助完善和运行小程序产品。主要功能包括日常统计数据的标准分析，以及满足特定用户需求的定制分析。

1）术语解释

用户：根据openid判断使用过小程序的微信用户。

Page：小程序页面，用页面路径表示，如index、product/list。

浏览过的页面：用户访问过的小程序的所有页面都可以称为访问过的页面。

登录页面：用户打开小程序时首先进入的页面称为登录页面。例如，用户从A页面进入一个小程序，跳转到B页面，A是登录页面，B不是。

退出页面：用户离开小程序时最后访问的页面称为退出页面。比如用户从A页面跳转到B页面，退出B页面的小程序，B页面是退出页面，不是A页面。

场景：用户如何打开小程序，比如打开小程序通过扫描二维码进行编程，域名就是二维码。

浏览：用户查看小程序页面时的行为。

添加：向“我的小程序”添加小程序的用户行为。

分享：用户点击小程序内部或小程序外部的菜单，将小程序及其页面分享给好友。

新增：用户第一次访问小程序页面称为新增。

活跃：在一定时间内进入小程序的用户被视为活跃。

暂停：从用户在小程序中打开页面到退出小程序的关闭或暂停时间的过程。移动到后台、显示在聊天顶部或悬浮窗上不视为停止小程序。

留存：指定时间内的新用户或活跃用户，并且在一定时间后仍在使用小程序，称为留存。信息保留和主动保留之间存在差异。

Activity：收集和分析用户行为数据以进行个人分析的模型，代表用户的行为。

漏斗：包含一系列具体分析活动的数据分析模型，用于分析业务流程各个阶段的用户转化和流失情况。 ？

新访客数：首次访问小程序页面的用户数。同一用户多次访问不会被统计多次。

打开次数：小组件被打开的总次数。从用户打开小程序到主动关闭或退出小程序时间结束的过程计为1次。

访问次数：小程序页面的总访问次数。多个页面之间的跳转以及对同一页面的重复访问均算作多次访问。

访问人数：访问小程序页面的用户总数。一位用户的多次访问不计入在内。

人均停留时间：每个用户在小程序页面停留的总时间（单位：秒），即总停留时间/访问人数。

平均停留时间：每次打开小程序在小程序页面停留的总时间（单位为秒），即停留时间/打开次数之和。

平均访问时间：每次打开小部件时查看的平均页面数。

月活跃用户：30天内访问过且当天访问过的用户。

安静回访用户：过去30天内未访问过、过去90天内访问过（退出期30~90天内）、当天访问过的用户。

流失和回访用户：过去90天内未访问过、历史访问过（会话周期超过90天）、当天访问过的用户。

、分享

分享：小程序页面被分享的总时长。

分享人数：小程序页面的分享总人数。用户的多次共享将不再重复。

、添加

添加总人数：历史添加该小程序到“我的小程序”的用户总数（不包括取消帮助的人数）。

新增人数：与前一天相比，昨天“我的小程序”新增用户数。

、留存

新留存 ：指定时间（即首次访问小程序）新登录的用户数，以及访问小程序的用户数之后的第 N 天（或一周或一个月）再次迷你。部分。

活跃留存：在指定时间内活跃（即登录小程序）并在该时间后的第 9 天（或周或月）再次访问小程序的用户数量。

⑤支付

累计金额：截至昨天，小程序历史记录中无密码的总金额。

支付次数：小程序无密码支付成功次数。

值：小程序无密码支付成功的总次数。

单笔平均支付次数：小程序无密码支付单笔平均笔数，即小程序无密码支付成功次数/无密码成功次数小程序中支付。

付款人数：小程序无密码支付成功次数。一位用户多次付款不会被多次计算。

人均消费时间：小程序中完成无密码支付的用户平均支付次数，即小程序中无有效密码的支付次数/无密码的成功支付次数小程序中的密码。

首次付款次数：当天在小程序中完成首次付款的用户数量。一位用户的多次付款不会被计算两次。

重复购买次数：在非日常小程序中完成首次支付的用户数量。一位用户的多次付款不会被计算两次。

支付次数转化率：小程序内，无密码完成转化的小程序开通数量比例，即无密码支付有效数量。小程序/小程序开放数量。

付款人转化率：小程序内无密码完成转化的小程序用户数占比，即小程序有效无密码支付人数/小程序无密码支付人数打开小程序的人。

⑥第

（页）访问次数：该页面的总访问次数。

（页面）访问者数量：访问该页面的用户总数。同一用户的多次访问不会被统计多次。

（页面）平均时长：用户每次访问页面所花费的平均停留时长（以秒为单位），即总停留时长/页面访问次数。

（页）登录页面数：此页面作为登录页面的访问次数。例如用户从A页面进入小程序，则A页面的页数+1。

（页）保留页数：该页面作为退出页面的访问次数。例如用户从B页面退出一个小程序，则B页面退出次数+1。

（页面）退出率：该页面作为退出页面的访问率，即即退出页数/访问次数。

（页）分享数：本页的分享总数。

（页面）分享数：分享该页面的总人数。同一用户的多次分享不会被多次计算。

2。综合分析

1）概览：提供小程序关键指标趋势和首页访问数据，快速了解小程序发展概况。例如下图：

2）访问分析：提供小程序用户访问Token、来源、频次、时长、深度、留存、页面详情等数据，具体分析添加信息、操作等保留。比如下图中的

3），实时统计：提供通过小程序实时获取数据，满足实时监控的需求。例如下图

4），用户档案：小程序提供用户档案数据，包括用户的年龄、性别、地区、终端和机型部分。比如下图：

3。内置分析

内置分析支持多维度、实时的用户行为分析。通过定制报告，可以根据页面的需求，对小程序中的用户行为进行优化和跟踪。个人分析需要超越招生等标准统计数据。例如，一个小型电商程序可以创建自定义报告并收集数据来完成以下分析：

购买商品的人按省份、城市、年龄和性别分布如何？不同用户群体购买商品的数量和价格有何差异？

用户访问商品页面、查看商品详情、查看评论、下单、支付、完成购买。渐进转化率是多少？

不同用户群之间的转化有差异吗？

今天参与线上活动的用户在不同时间段（每小时级别）的活跃度如何？

登录https://mp.weixin.qq.com，进入“数据分析”-“自定义分析”-“事件管理”，点击“新建事件”。具体确认步骤请参见官方文档。

4。小程序助手

“小程序数据助手”是微信公众平台官方发布的小程序。支持开发者及相关运营者查看自家小程序的性能数据。请尝试下面的小程序代码立即进行测试。 。 要求您的微信帐号是小程序管理员或运营商才可以访问。

“小程序数据助手”目前工作模块包括数据概览、基础访问分析（用户趋势、来源分析、留存分析、页面时长分析、页面详情）、实时统计和用户画像（年龄、年龄等）。性别、省市、终端类型），数据与小程序背后通常的分析一致。

10。云开发

开发者可以使用云开发来开发微信小程序、小游戏。他们无需设置服务器即可使用云功能。

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

云开发提供了几大基础能力支持：

十一、拓展

小程序开源了，weui-wxss、weui.js和react-weui等，可以使用他们进行Web页面的设计与开发，它可以运行在任何浏览器中。weui在Git上的地址：WEUI