HTML5和微信小程序写页面的区别

前言

在写微信小程序页面时，发现和HTML5有些不同，记录一下。

h5和小程序写页面有什么不同？

1.标签的不同

小程序有自己的标签，常见的有<view> <text> <icon> 等；

2.选择器不同

HTML5	微信小程序
div（标签选择器）	view、text、icon、input、image、navigator（标签选择器）
div:first-child等	view:first-child等(不建议（工具过滤易导致页面错乱）)
.class.class	.class.class(不建议（工具过滤易导致页面错乱）)

3.单位不同

小程序中特有的单位rpx，也有rem，但是微信小程序中的rem的计算方式和HTML5中的rem不同。

在微信小程序中， 1rem = 设计稿宽度/20 ;

而在HTML5中，1rem的值是用js根据页面宽度动态设置文档根元素得来的。

js如下：

(function () {
    function initFont() {
    	document.getElementById('viewport').setAttribute('content','width=device-width,initial-scale=1,user-scalable=no,width=750,maximum-scale='+window.screen.width/750);
        document.documentElement.style.fontSize = (document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth) / 7.5 + "px";
    }
    initFont();
   	window.onresize=function(){initFont()};
})(window);

rpx实际上就是系统级的rem（把页面按比例分割750份，1rpx=window.innerWidth/750）。也就是说，微信小程序的rpx布局把rem布局的js设置根元素字体尺寸这步省了。

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

因此，也可以说HTML5和微信小程序实现自适应的方式不同。微信小程序只要使用rpx单位进行布局，就可以实现自适应布局。而HTML5需要先用js根据页面宽度动态设置。

比如在html标签中：1rem = 100px；

那么在body标签中的元素，宽为50px时，需要设置成 0.5rem(50/100)；

4.placeholder的区别

HTML5

HTML5需要通过特殊的选择器来添加样式

input::-webkit-input-placeholder {
    color: blue;
}
input:-moz-placeholder {
    color: blue;
}
input::-moz-placeholder {
    color: blue;
}
input:-ms-input-placeholder {
    color: blue;
}

微信小程序

小程序中可以直接给通过placeholder-style 给placeholder添加样式

<input class='input-ui flex-item-3' type="text" placeholder="请输入商铺名/公司名"  placeholder-style='color: #323232;' />

或者通过placeholder-class 定义一个类添加样式。

<input class='input-ui flex-item-3' type="text" placeholder="请输入商铺名/公司名"  placeholder-class='create-placeholder' /> 
<style>
  .create-placeholder{
      color: #323232;
  }
</style>

5.图片引入不同

在h5中，无论是img 标签引入的图片还是css中的背景图片，都可以是本地图片或者是线上的图片。但是在微信小程序中wxss中的背景图片必须是线上的图片。

6.js写法不同

小程序是操作数据，而在HTML5+CSS+JQUERY中是操作DOM。

赏

谢谢你请我吃糖果