微信小程序开发(原生和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标签对比

标签        微信小程序uniappHtml5备注
块标签viewview、divdiv、section、【dl,dt】、【ol,li】【ul、li】、【h1-h6】微信小程序和uniapp比较少和SEO有关系(除了移动端h5)没有html那么多的花里胡哨
行内标签texttextspan、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,直接一次层级,不存在返回

图片imageimageimg原生和uniapp一样,提供mode13个情况,图片的显示方式,图片变形的low表现方式,总有一个适合的,看业主接受方式
表单form、button、lable、input、checkbox、radio、picker、picker-view、slider、switch、textareaform、button、lable、input、checkbox、radio、picker、picker-view、slider、switch、textareainput、button、textarea、label大致相同差异较多
外嵌web-viewweb-viewiframe
滑动标签scroll-viewscroll-view-支持横向竖向滑动
轮播swiperswiper-
拖动movable-areamovable-area-一个按钮全屏拖动,侧边拖动效果
媒体标签audio、map、video、canvas、camera、live-player、live-pusher、void-roomaudio、map、video、canvas、camera、live-player、live-pusher、void-roomvideo、audio、enbed、source、trackimg也是媒体标签,频率高放上面了
覆盖原生的视图

cover-view

cover-image

cover-view

cover-image

-

想做个按钮覆盖video,小程序和uniapp的这个标签就上场了

map、video、canvas、camera、live-player、live-pusher

开放数据-关注公众号official-accountofficial-account-

关注公众号组件

基于扫码场景,不扫码就没有展示这个组件

开放数据-广告ad-customad-custom-广告模板
微信客服<button open-type="contact"></button> <button open-type="contact"></button> -需要微信小程序后台设置才能收到用户发的消息

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

··零··

您的鼓励,是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值