听说你准备开发小程序,这套设计规范送给你
1、首先，设计尺寸方面，小程序设计以iPhone 6的750x1334px为基准，使用rpx单位。rpx能根据屏幕宽度自动调整，确保1px在iPhone 6上等于1rpx，尺寸转换简单明了。在设计区域，微信小程序会在页面右上角固定显示官方菜单，开发者不可改动其内容，但可以选择基本配色。
2、小程序设计区域 小程序的“所有页面”右上角位置固定放置了小程序的菜单，设计界面时需预留该区域空间。Nav Bar设计 小程序菜单固定样式 微信提供了深浅两种配色样式，以便更好地融合到各种风格的页面中，同时保持小程序菜单的清晰辨识度。
3、在设计微信小程序的过程中，尽管小程序开发门槛相对较低，但依然有一些基本规范需遵循。首先，尺寸规范至关重要，使用rpx（响应式像素），确保小程序能适应各种屏幕大小，通常以iPhone 6尺寸为设计基准，1rpx等于0.5px。
4、微信小程序设计指南全面解析，带你掌握UI设计规范要点。微信小程序作为新兴的应用形式，它以无需下载、即扫即用的特性革新了用户体验。设计小程序时，遵循的核心理念是简洁、易用和一致性，旨在保障用户在微信生态中的高效交互，同时满足各种需求，实现用户与开发者双赢。
5、微信WeUI设计规范详解：打造一致的用户体验 WeUI是微信官方提供的基础样式库，旨在为网页和小程序提供与原生视觉高度一致的设计元素。从button到article，从dialog到actionsheet，开发者可以无缝使用icon等组件，确保用户体验的一致性。
6、深入解析微信WeUI设计规范，打造一致的用户体验/ 微信WeUI，作为微信官方为网页和小程序精心打造的基础样式库，旨在提供与原生视觉体验高度契合的设计元素。从button到article，从dialog到actionsheet，开发团队可以无缝应用icon等组件，确保用户在使用过程中的统一感。
微信小程序页面头部高度自适应
1、实现自定义微信小程序头部导航栏的步骤与关键点如下：首先明确实现效果，即设计的导航栏能够根据需要自定义外观，包括但不限于宽度、高度、胶囊位置等。接着深入理解实现原理。获取胶囊详细信息包括胶囊的宽度(width)、高度(height)以及顶部距离(top)。通过这些参数，我们可以精确定位胶囊的位置。
2、引入 Flex 布局技术，提供了一种更为优雅的解决方案。Flex 布局允许组件在容器内灵活排布，使得 scroll-view 和 swiper 能自适应屏幕尺寸。虽然 Flex 布局广泛应用于网页开发，但在微信小程序中灵活运用，可以解决高度自适应难题。
3、为确保高度自适应，推荐采用页面滚动事件 onPageScroll 监听。当滚动页面时，重新计算内容高度。若元素数量过多，可在外层包裹元素，直接获取container的高度。将预设高度设为屏幕高度（height： 100vh），页面滚动后，真实内容高度即被重新计算，实现流畅的自适应显示效果。
4、navigationBar是微信小程序中常见的导航栏，本文将介绍如何自定义navigationBar，使其兼容适配所有机型。首先，我们需要隐藏原生的navigationBar。在window全局配置中，设置navigationStyle参数为custom即可。
微信小程序之video组件视频播放
微信小程序中的video组件主要用于视频的播放功能。它默认设置视频的宽度为300px，高度为225px。
为了实现这一功能，首先需要了解小程序中的`video`组件。这个组件能够帮助开发者在小程序中嵌入和播放视频。要实现点击图片自动播放视频并停止上一个视频播放，开发者可以利用`video`组件的参数来完成。在实现过程中，开发者需要关注`autoplay`参数。将这个参数设置为`true`时，视频会在页面加载时自动播放。
微信小程序中的video组件是原生组件，层级最高，若需覆盖在video之上，应使用cover-view 或 cover-image组件，这二者可无限嵌套。这一场景通常用于在视频上添加标题。检测video播放进度，可通过bindtimeupdate事件，此事件由微信每250ms调用一次（实际在iOS上为1s），并提供当前播放进度信息，单位为秒。
小程序中的 video 组件是原生组件， 默认宽度300px、高度225px，可通过wxss设置宽高。其中 src 属性默认支持MP4格式，但是实际上还可以支持其他格式。 属性主要有： src ：要播放视频的资源地址。 initial-time ：指定视频初始播放位置。 danmu-list ：弹幕列表。
微信小程序如何获取屏幕的高度和宽度
为了获取屏幕宽度和高度，我们可以利用window对象的width和height属性。但需要注意的是，微信小程序的页面高度可能包含底部导航栏，因此直接使用height属性获取的可能是整个页面的高度，而不是屏幕高度。
在微信小程序开发中，我们经常需要获取屏幕视口的高度。由于小程序的宽度固定为750rpx，我们可以通过调用wx.getSystemInfo方法来获取实际可使用的窗口宽度与高度，此方法返回的是真正的屏幕尺寸而非rpx单位。获取到宽度与高度后，我们需要将宽度转换为rpx单位来与小程序的宽度进行比较。
对于采用套壳Webview方式开发的小程序，导航栏通常以原生方式呈现，不使用定制导航栏。这意味着开发者在展示Webview时，除了高度信息之外无需关注导航栏的尺寸，而高度包含了两部分：状态栏与导航栏。问题 在解决实际问题时，定位到一个关键问题：在Webview的H5页面底部被遮挡。