Uniapp入门

Uniapp

1. 一套代码可以打包到不同的应用平台
2. 方便入手，使用vue语法写小程序
3. 丰富的生态环境、官方及第三方插件、论坛活跃度高

一套代码编到14个平台

注意点

1. 所有的div使用view替换，在h5中虽然显示正常，但在微信小程序等中就会报错
2. 在小程序中的单位一般用响应式的rpx。1334*750
3. icon的type，安装插件就可以设置type=“”来显示图标，是行内元素
4. 标签类比 div => view; span => text(selectable用户可选)注意平台的属性差异
5. image标签和h5的img标签不一样，在uniapp中的image标签是有默认宽高的。swiper、video也有默认宽高
6. 在video标签中，当设置一个Boolean属性时，加上该属性就是true，但若controls=“false”，还是表示true，因为会将false识别为字符串，因此需要:controls=“false”
7. navigator标签中，默认type-open=“navigator”,但跳转的页面需要是非taBar页面，若想要使用taBar页面，需要使用reLaunch
8. 小程序中不支持h2等标签，可以使用v-html，该方法会将标签转换为rich-text，设置他的notes属性。

视图容器

• scroll-view
  允许用户左右滑动某模块内内容。子元素宽高大于父元素宽高
  scroll-x 允许横向滚动
• swiper
  轮播图，里面设置多张img
  circular：是否采用衔接滑动；autoplay：是否自动切换；duration：滑动动画时长

媒体组件

• image
  src 可以使用绝对路径、相对路径或网络图片
  mode="aspectFill"保持纵横比缩放图片，只保证图片的短边能完全显示出来。另一个方向会发送截取
  mode="widthFix"宽度不变，高度自动变化，保持原图宽高比不变
  lazy-load：懒加载
• video
  initial-time：指定视频初始播放位置
• live-play 实时音视频播放，也称直播拉流
• live-pusher 实时音视频录制，也称直播推流
• camera 页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机

表单组件（uView针对uniapp的组件库）

• button
  display是否禁用，触发某些事件前需要禁用 loading:带loading图标
• checkbox
• input 输入框
  placeholder

路由与页面跳转

• navigator
  类似h5中的a标签
  open-type有效值：
  （1） navigate对应uni.navigateTo, 保留当前页面，跳转到应用内的某个页面，（保留之前路径）使用uni.navigateBack可以返回到原页面
  （2）redirect对应uni.redirectRo, 关闭当前页面，跳转到应用内的某个页面（不会追溯到上一个页面）