博主：tudou土豆
个人座右铭：不要迷恋哥，哥只是个土豆
基本介绍
微信小程序开发和H5的开发主要区别在于标签和js部分
1、标签，微信小程序的开发很多的H5标签都是不支持的,类似H5的h1~h6，span,a,div,ul,li等等，微信小程序有它标签也叫组件。下面进行详细的解析：（注意每个属性支持的版本库）
A：view标签：基础标签，类似H5中的div，块级标签；
B: scroll-view:相当于H5中的div标签添加了overflow-x/overflow-y属性；多用于头部滑动导航，支持属性如下：
C：swiper:滑动视图容器，多用于滑动广告图，支持属性如下：
示例代码：
< swiper class= 'swiper' indicator-dots= 'true' indicator-color= '#fff' indicator-active-color= '#25f6d5' autoplay= 'true' circular= 'true' interval= '3000' duration= '1000' bindchange= 'change'>
< swiper-item class= 'item' >
< image src= '../../image/1.jpg' class= 'img'></ image >
</ swiper-item >
< swiper-item class= 'item' >
< image src= '../../image/2.jpg' class= 'img'></ image >
</ swiper-item >
< swiper-item class= 'item' >
< image src= '../../image/3.jpg' class= 'img'></ image >
</ swiper-item >
</ swiper >
微信小程序的标签和html标签比较
| html |
微信小程序 |
<div></div> |
<view></view> |
<h1></h1><h2></h2>....<h6></h6><p></p><span></span> |
<text></text> |
<input type="text"><input type="checkbox"><input type="radio"><input type="file"> |
<input /><checkbox /><radio /><view bindtap="changeImage"></view> |
<select><option></option><option></option></select> |
<picker range="{{area}}"> <view> {{area[index]}}</view></picker> |
<a href="#"></a> |
<navigator url="#" redirect></navigator> |
<img src=""> |
<image mode="aspectFill" src=""> |
<i class="icon"></i> |
<icon></icon> |
wxss选择器
| html |
微信小程序 |
| div（标签选择器） |
view、text、icon、input、image、navigator（标签选择器） |
| class(类选择器) |
class |
| id(id选择器)（效率最高） |
id(效率最高) |
| element,element(层级选择器) |
element,element(层级选择器) |
| ：after（伪类选择器） |
：after ：before |
| ：frist-child等 |
：frist-child等(不建议（工具过滤易导致页面错乱）) |
| .class .class |
.class .class(不建议（工具过滤易导致页面错乱）) |
| 群组选择器 |
群组选择器 |
| 后代选择器 |
后代选择器 |
其它
<em id="__mceDel">//微信小程序中placeholder的样式和html5是不一样的。需要修改placehoder的样式，通过placeholder-class=”class”来定义。
<input type="text" placeholder="邮箱" placeholder-style="color:#c0c0c0" />
<input password type="number" placeholder="密码" placeholder-class="placeholder" />
<!--小程序里通过placeholder-style和placeholder-class修改样式，不过并不能修改点击时候input的边框颜色--></em>