Uni-App 笔记
介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
复制代码
利用HbuilderX初始化项目
1. 点击 HbuilderX 菜单栏 文件 > 新建 > 项目
2. 选择uni-app,填写项目名称，项目创建的目录
复制代码
运行项目
在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机
复制代码
介绍项目目录和文件作用
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage就是打包目录，在这里有各个平台的打包文件
pages所有的页面存放目录
static静态资源目录，例如图片等
components组件存放目录
复制代码
通过pages来配置页面
pages数组数组中第一项表示应用启动页
"pages": [ 、
{
"path":"pages/message/message"
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
]
复制代码
页面样式与布局
uni-app支持的通用css单位包括px、upx、vh。
upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
复制代码
upx2px
因为upx是编译器处理的，动态绑定upx不生效
可使用 uni.upx2px(Number) 转换为 px 后再赋值。
return uni.upx2px(750 / 2) + 'px';
复制代码
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
复制代码
内联样式
1. style：静态的样式统一写到 class 中。
<view :style="{color:color}" />
2. class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />
3. 选择器
1). .class
2). #id
3). element 选择所有 view 组件
4. 全局样式和局部样式
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
复制代码
背景图片
uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目相同，需要注意以下几点：
1. 支持 base64 格式图片。
2. 支持网络路径图片。
3. 使用本地路径背景图片需注意：
1). 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
2). 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
3) .本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。
// 例如
.test2 {
background-image: url('~@/static/logo.png');
}
复制代码
template 和 block
uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行 列表渲染 和 条件渲染。
<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
复制代码
uni-app基本语法
uni-app中的数据绑定
在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可
export default {
data () {
return {
msg: 'hello-uni-app!!!'
}
}
}
复制代码
插值表达式的使用
1. 利用插值表达式渲染基本数据
<view>{{msg}}</view>
2. 在插值表达式中使用三元运算
<view>{{ flag ? '我是真的':'我是假的' }}</view>
3. 基本运算
<view>{{1+1}}</view>
复制代码
v-bind动态绑定属性
export default {
data () {
return {
img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
}
}
}
<image v-bind:src="img"></image>
<image :src="img"></image>
复制代码
v-for的使用
data () {
return {
arr: [
{ name: '刘能', age: 29 },
{ name: '赵四', age: 39 },
{ name: '宋小宝', age: 49 },
{ name: '小沈阳', age: 59 }
]
}
}
<view v-for="(item,index) in arr" :key="index">名字：{{item.name}}---年龄：{{item.age}}</view>
复制代码
uni中的事件
事件绑定
<button @click="tapHandle">点我啊</button>
methods: {
tapHandle () {
console.log('真的点我了')
}
}
复制代码
事件传参
<button @click="tapHandle">点我啊</button>
methods: {
tapHandle (e) {
console.log(e)
}
}
<button @click="tapHandle(1)">点我啊</button>
methods: {
tapHandle (num) {
console.log(num)
}
}
<button @click="tapHandle(1,$event)">点我啊</button>
methods: {
tapHandle (num,e) {
console.log(num,e)
}
}
复制代码
uni的生命周期
应用的生命周期
生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
uni-app 支持如下应用生命周期函数：
1. onLaunch() --- 当uni-app 初始化完成时触发（全局只触发一次）
2. onShow() --- 当 uni-app 启动，或从后台进入前台显示
3. onHide() --- 当 uni-app 从前台进入后台
4. onError() --- 当 uni-app 报错时触发
复制代码
页面的生命周期
uni-app 支持如下页面生命周期函数：
1. onLoad --- 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
2. onShow --- 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
3. onReady --- 监听页面初次渲染完成。
4. onHide --- 监听页面隐藏
5. onUnload --- 监听页面卸载
复制代码
网络请求
在uni中可以调用uni.request方法进行请求网络请求
需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。
复制代码
发送GET请求
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
success(res) {
console.log(res)
}
})
}
}
}
</script>
复制代码
发送POST请求
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
method: 'POST',
success(res) {
console.log(res)
}
})
}
}
}
</script>
复制代码
uni-app中组件的创建
在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可
<template>
<view>
这是一个自定义组件
</view>
</template>
<script>
</script>
<style>
</style>
import login from "@/components/login/login.vue"
components: {login}
<login></login>
复制代码
组件的生命周期函数
组件的生命周期和vue的一样
复制代码
组件的通讯
父组件给子组件传值
<template>
<view>
这是一个自定义组件 {{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
<template>
<view>
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
components: {test}
}
</script>
复制代码
子组件给父组件传值
<template>
<view>
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
<template>
<view>
<test @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
methods: {
getMsg (res) {
console.log(res)
}
},
components: {test}
}
</script>
复制代码
兄弟组件通讯
<template>
<view>
<button @click="handleClickBtn">点击发送信息</button>
</view>
</template>
<script>
export default {
data() {
return {
name: '法外狂徒-张三'
};
},
methods: {
handleClickBtn() {
uni.$emit('name', this.name);
}
}
}
</script>
<template>
<view>获取到的内容：{{name}}</view>
</template>
<script>
export default {
data() {
return {
name: ''
};
},
created() {
uni.$on('name', value => {
this.name = value;
});
}
}
</script>
复制代码
