微信开发html 标准,写给前端开发的Web App（微信端）参考规范【原创】

写给前端开发的Web App(微信端)参考规范

Web App也就是我们常说的“微信端”，是App开发的三种模式：Native App、Web App、Hybrid App之一。

简单介绍下这三种开发模式：

1.Native App，原生APP，使用原生(即Android或iOS)开发的APP。

2.所谓的Web App，就是把手机当做一个浏览器(Android使用WebView，iOS使用UIWebView)，做几个页面挂在服务器端，类似于一个小网站。

3.Hybrid App是综合了Web App的开发速度和Native App的高性能体验的一种混合型开发模式；

在这段时间的工作中，我发现在与开发人员的对接过程中，虽然Android和iOS的开发成本和开发难度都比web app要大，但由于Native App原生开发的规范性与适配性比较高，且性能稳定，体验性强，在设计的落实过程中反而比web app 的完成度要高，因此在此就不再赘述。

然而网上对于web app开发规范的资料并不多，下面是我总结的web app的开发中的一些规范和建议，可能不够详实，希望能够为大家起到一点帮助：

1.开发尺寸问题：对于全平台的APP设计，我们通常以Android720*1280px的标准来做设计方案，然而web app的开发中并不能直接用720*1280px这样的尺寸进行搭建。

原因如下：

设备像素和CSS像素一般使用px作为单位，并且在桌面浏览器的100%缩放情况下，css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。

但实际情况却并非如此，css像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素的长度是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。即：

css中的1px并不是总代表设备像素上的1px，尤其是在移动设备上。

这也就是为什么不能直接拿720*1280px作为开发尺寸的原因！因为我们的720*1280是物理像素，而web app使用的是逻辑像素；

因此，我们的设计尺寸720*1280px对应到开发中的代码尺寸应该为340*640px,对应的iPhone6(750*1334)的开发尺寸为375*667px,iPhone6p(1080*1920px)……

2.其他控件的对应高度

3.文字大小

由于web网页的自适应问题，文字在代码中的单位一般采用em的单位，需要进行两次转换，

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如，如果某元素以 12pt 显示，那么 2em 是24pt。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/18006.html

微信打赏

支付宝打赏

感谢您对作者Sherry的打赏，我们会更加努力！    如果您想成为作者，请点我