时间线
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> | - | 需要微信小程序后台设置才能收到用户发的消息 |