Comparison of DOM tags of wechat applet development (native and uniapp)

Timeline

vue 2014 Released in

uniapp 2015 Released in

Wechat applet ,2017 Public survey , External release

The topic the main 2013 Years of graduation , Engaged in Internet development , These people happened to run into . The front and rear ends do not separate to separate ,Html4 To html5 Time .

Technology stack

As a front-end technology , The core is html+css+js,html+css No difficulty. , A hundred words each , Before the art of the Department of literature can do , Be commonly called “ Pager ”, Easy to use . Now called “ Front end engineer ”, It is mainly the era of front and back end separation .

html+css+js solid , For many open source UI frame , Such as WeUi（ Tencent official UI）、UViev、TouchUI WX、IView（TalkingData）、lin-ui、vant（ I like it ）,colorUI、TaroUI（ JD.COM ）、WuxUI、MinUI（ Mushroom street ）

There are two kinds of development ：

Native applet and uniapp Match with the above UI frame .

DOM Label comparison

label	Wechat applet	uniapp	Html5	remarks
Block labels	view	view、div	div、section、【dl,dt】、【ol,li】【ul、li】、【h1-h6】	Wechat applet and uniapp Less and SEO It matters （ Except for mobile terminal h5） No, html So many fancy things
In line labels	text	text	span、em、strong、a、font	Universal span, WeChat and uniapp Of text That's enough ,html5 It's rather fancy ,<aaa></aaa><bbb></bbb> Fine , Based on semantic , Just use a few labels General , Block elements contain inline elements , Inline elements do not contain row block elements 、 Inline elements
Link navigation	<navigator url="/pages/index/index" hover-class=“none” open-type="navigate" ></navigator>	<navigator url="../component/Header" ” ></navigator>	<a href="url"></a>	Native and uniapp The same as hover-class=“none” Click by default （hover） The style of open-type="navigate" Jump mode , Corresponding js Of wx.switchTab、wx.navigateto、wx.redirectTo uniapp is uni.switchTab,uni.redirectTo,uni.redirectTo The three differences are a jump to the non custom bottom menu tabbar, One is Jump at most 10 Time of , Just a little more and you won't move , Corresponding return One is redirectTo, Direct one level , There is no return
picture	image	image	img	Native and uniapp equally , Provide mode13 Case , How the picture is displayed , The picture is distorted low The way of expression , There is always a suitable one , See how the owner accepts
Forms	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 Almost the same	Many differences
It's embedded	web-view	web-view	iframe
Slide the label	scroll-view	scroll-view	-	Support horizontal and vertical sliding
Wheel planting	swiper	swiper	-
Drag the	movable-area	movable-area	-	One button full screen drag , Side drag effect
Media labels	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 It is also a media label , The frequency is high
Overwrite the native view	cover-view cover-image	cover-view cover-image	-	Want to make a button overlay video, Applets and uniapp The label of the is on the stage map、video、canvas、camera、live-player、live-pusher
Open data - Official account	official-account	official-account	-	Pay attention to official account component Based on scanning scene , This component is not displayed without scanning the code
Open data - advertisement	ad-custom	ad-custom	-	Advertising templates
Wechat customer service	<button open-type="contact"></button>	<button open-type="contact"></button>	-	Wechat applet background settings are required to receive messages sent by users