刚接触uniapp的人最容易踩的坑，就是直接把vue里写的div、span粘过来用，打包到小程序直接报错哟。其实uniapp的标签说白了就是适配多端的通用组件，只要记住几个常用的，写页面基本够用。

首先是基础布局三件套。

第一个view，相当于网页里的div，块级元素，默认占满整行。所有布局容器都用它，不管是弹性布局、网格布局，还是做个卡片、边框盒子，直接往view上加样式就行，不会有兼容性问题。

第二个text，相当于网页里的span，行内元素，多个text可以并排显示。这里要记住，所有需要用户长按复制的文本，必须放在text标签里，要是直接把字写在view里，小程序端用户根本选不中，更别说复制了。

第三个image，替代网页里的img标签。默认自带320*240的固定尺寸，不想变形就加mode="widthFix"，宽度设成100%之后，高度会自动按图片比例缩放，做响应式图特别方便。

如果需要做局部滚动，就用scroll-view。比如要做横向滚动的商品推荐栏，或者半页高的订单列表，直接套scroll-view，竖向滚动就给个固定高度加scroll-y="true"，横向就加scroll-x="true"，不用自己写overflow瞎调。

经常用到的交互标签也没几个。

button就是按钮，比原生html的按钮好用很多，自带很多跨端的开放能力。比如要做微信授权登录、一键获取用户手机号，直接给open-type赋对应的值就行，不用自己写一堆调用原生接口的代码。

input就是输入框，要数字键盘就设type="number"，要密码就设type="password"，绑定直接用v-model，和vue写法完全一样，没什么学习成本。

navigator相当于网页里的a标签，简单的页面跳转直接用它，跳转内部页面就填url属性，要跳tabBar页面就加open-type="switchTab"，比自己写uni.navigateTo之类的API省代码。

还有几个小标签，用对了能省很多事。

icon是自带的图标库，搜索、对勾、叉号、警告标这些常用图标都有，直接改type属性就能调用，大小颜色都可以用css改，不用找UI切小图，也不用引第三方图标库。

progress是进度条，做下载进度、答题进度、任务完成度直接用，改percent属性就能控制进度，不用自己写两个div拼样式。

swiper就是轮播图组件，自带自动轮播、滑动切换、底部指示器效果，你只要把每张图放到swiper-item里就行，不用引第三方轮播库，所有端都能适配，新手做首页轮播直接用这个，10分钟就能写完。

最后说两个真金白银踩出来的教训。别乱用html原生标签，比如div、p、h1这些，要是你只做H5端没问题，但凡要打包小程序、App，大概率会出兼容问题，所有结构尽量用uniapp自带的标签。另外写标签属性的时候，要是不确定兼容性，就扫一眼官方文档的标注，有些属性只支持App端，有些只支持微信小程序，别写完调半天才发现用不了。