微信小程序开发（原生和uniapp）DOM标签对比介绍

时间线

vue 2014年对外发布

uniapp 2015年对外发布

微信小程序，2017公测，对外发布

题主2013年毕业，从事互联网开发，这几个刚好碰上。从前后端不分离到分离，Html4到html5时代。

技术栈

作为前端技术，核心为html+css+js，html+css没啥难度，各百来个单词，之前的文系美工就能做的，俗称“页面仔”，上手方便。现在叫“前端工程师”，主要是前后端分离时代。

html+css+js扎实，对于很多开源的UI框架，如WeUi（腾讯官方UI）、UViev、TouchUI WX、IView（TalkingData）、lin-ui、vant（有赞），colorUI、TaroUI（京东）、WuxUI、MinUI（蘑菇街）

开发就区分两种：

原生小程序和uniapp搭配上面的UI框架。

DOM标签对比

标签	微信小程序	uniapp	Html5	备注
块标签	view	view、div	div、section、【dl，dt】、【ol，li】【ul、li】、【h1-h6】	微信小程序和uniapp比较少和SEO有关系（除了移动端h5）没有html那么多的花里胡哨
行内标签	text	text	span、em、strong、a、font	通用span，微信和uniapp的text就够用，html5比较花哨，<aaa></aaa><bbb></bbb>都可以，基于语义化，常用几个标签即可 一般的，块元素包行内元素，行内元素不包行块元素、行内元素
链接导航	<navigator url="/pages/index/index" hover-class=“none” open-type="navigate" ></navigator>	<navigator url="../component/Header" ” ></navigator>	<a href="url"></a>	原生和uniapp的一样 hover-class=“none” 默认去点击（hover）的样式 open-type="navigate" 跳转方式，对应js的wx.switchTab、wx.navigateto、wx.redirectTo uniapp的就是 uni.switchTab，uni.redirectTo，uni.redirectTo 这个三个区别就是一个跳非自定义底部菜单tabbar，一个是最多跳10次的，再点就点不动，对应返回 一个是redirectTo，直接一次层级，不存在返回
图片	image	image	img	原生和uniapp一样，提供mode13个情况，图片的显示方式，图片变形的low表现方式，总有一个适合的，看业主接受方式
表单	form、button、lable、input、checkbox、radio、picker、picker-view、slider、switch、textarea	form、button、lable、input、checkbox、radio、picker、picker-view、slider、switch、textarea	input、button、textarea、label大致相同	差异较多
外嵌	web-view	web-view	iframe
滑动标签	scroll-view	scroll-view	-	支持横向竖向滑动
轮播	swiper	swiper	-
拖动	movable-area	movable-area	-	一个按钮全屏拖动，侧边拖动效果
媒体标签	audio、map、video、canvas、camera、live-player、live-pusher、void-room	audio、map、video、canvas、camera、live-player、live-pusher、void-room	video、audio、enbed、source、track	img也是媒体标签，频率高放上面了
覆盖原生的视图	cover-view cover-image	cover-view cover-image	-	想做个按钮覆盖video，小程序和uniapp的这个标签就上场了 map、video、canvas、camera、live-player、live-pusher
开放数据-关注公众号	official-account	official-account	-	关注公众号组件 基于扫码场景，不扫码就没有展示这个组件
开放数据-广告	ad-custom	ad-custom	-	广告模板
微信客服	<button open-type="contact"></button>	<button open-type="contact"></button>	-	需要微信小程序后台设置才能收到用户发的消息