开发工具
HBuilderX,如果要开发uni-app肯定是官方的工具支持最好。
介绍
- uni-app官方推荐使用flex布局,兼容性最好。
- 代码里的语法是小程序和vue的结合,uni-app之所以能兼容多平台也是因为小程序的出现。
- 并不是所有的代码都可以跑不同平台,有时候需要对不同平台进行独立编写。
工具
在HBuilderX工具里直接创建一个uni-app项目,就可以开始基础语法练习了。
模版语法与数据绑定
//正确用法,使用函数返回对象
data() {
return {
title: 'Hello'
}
}
//错误写法,会导致再次打开页面时,显示上次数据
data: {
title: 'Hello'
}
通过下面的方法引用数据
<span>标题: {{ title }}</span>
条件渲染
- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
- 在data数据里,awesome为true的时候展示Vue is awesome.
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
列表渲染
- in和of都可以用做循环,没有区别
- item是循环的内容,index是索引
<ul id="example-1">
<li v-for="(item, index) in items" :key="item.message">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
基础组建
uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签元素。但uni-app的组件与HTML不同,而是与小程序相同,更适合手机端使用。
- 了解View和ScrollView的内容(点击小标题可以传送过去)
自定义组件
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。在uni-app里的easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。 如下:
<template>
<view class="container">
<uni-list>
<uni-list-item title="第一行"></uni-list-item>
<uni-list-item title="第二行"></uni-list-item>
</uni-list>
</view>
</template>
<script>
// 这里不用import引入,也不需要在components内注册uni-list组件。template里就可以直接用
export default {
data() {
return {
}
}
}
</script>
注:HBuilderX 2.5.5起支持easycom组件模式。
条件编译
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
下面的简单例子,点我见更多详细。
#ifdef APP-PLUS
这里是app平台的代码
#endif
生命周期
在uni-app里面有三种什么周期:app生命周期、页面生命周期、组件生命周期。
APP生命周期函数名 | 说明 |
---|---|
onLaunch | 当uni-app 初始化完成时触发(全局只触发一次) |
onShow | 当 uni-app 启动,或从后台进入前台显示 |
onHide | 当 uni-app 从前台进入后台 |
onError | 当 uni-app 报错时触发 |
onUniNViewMessage | 对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯 |