uni-app
1.简介
UniApp 是一个使用 Vue.js 开发所有前端应用的框架,可以开发跨平台应用,如:iOS、Android、H5、小程序等。UniApp 提供了丰富的组件和 API,使得开发者可以使用一套代码,实现多平台开发。官方文档:UniApp官方文档
2.环境配置
安装 Node.js
安装 HBuilderX 编辑器
安装 Vue CLI(可选,用于命令行创建项目)
3.创建 UniApp 项目
使用 HBuilderX 编辑器创建新项目,选择 UniApp 项目模板。
配置项目名称、目录等信息。
选择需要支持的平台,如:H5、小程序等。
4.代码结构
UniApp 的项目结构如下:
├── components # 组件目录
├── pages # 页面目录
│ ├── index # index 页面目录
│ │ ├── index.vue # index 页面文件
│ │ └── index.json # index 页面配置
│ └── ...
├── static # 静态资源目录
├── main.js # 入口文件
├── manifest.json # 配置文件
├── pages.json # 页面配置文件
└── uni.scss # 全局样式文件
5.常用的组件
- 视图容器:
view
、scroll-view
等。 - 基础内容:
text
、icon
、progress
等。 - 表单组件:
button
、form
、input
、picker
等。 - 导航:
navigator
、tab-bar
等。 - 媒体组件:
image
、video
、audio
等。 - 地图:
map
。 - 画布:
canvas
。
1. 视图容器 - view
view
组件类似于 HTML 中的 div
,用于布局和承载其他组件。
<template>
<view class="container">
<view class="header">标题</view>
<view class="content">内容区域</view>
<view class="footer">页脚</view>
</view>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header, .content, .footer {
flex: 1;
text-align: center;
padding: 20px;
}
.header {
background-color: #f5f5f5;
}
.content {
background-color: #fff;
}
.footer {
background-color: #f5f5f5;
}
</style>
2. 基础内容 - text
text
组件用于显示文本内容。
<template>
<view>
<text class="text-content">这是一段文本内容。</text>
</view>
</template>
<style scoped>
.text-content {
font-size: 16px;
color: #333;
margin-top: 20px;
}
</style>
3. 表单组件 - input
input
组件用于接收用户输入。
<template>
<view>
<input type="text" v-model="inputValue" placeholder="请输入内容" />
<text>你输入的是:{{ inputValue }}</text>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>
4. 导航 - navigator
navigator
组件用于页面间的跳转。
<template>
<view>
<navigator url="/pages/detail/detail">跳转到详情页</navigator>
</view>
</template>
6.事件绑定
在 UniApp 中,事件绑定是组件与用户交互的关键部分。通过事件绑定,你可以监听组件上的各种事件,并在事件触发时执行相应的逻辑。
1. 点击事件 - @click
@click
事件用于监听用户的点击操作。
<template>
<view>
<button @click="handleClick">点击我</button>
</view>
</template>
<script>
export default {
methods: {
handleClick() {
uni.showToast({
title: '你点击了按钮',
icon: 'success'
});
}
}
};
</script>
2. 输入事件 - @input
@input
事件用于监听输入框内容的变化。
示例:当用户在输入框中输入内容时,实时显示输入的内容。
<template>
<view>
<input type="text" @input="handleInput($event)" v-model="inputValue" />
<text>你输入的是:{{ inputValue }}</text>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleInput(e) {
console.log('输入内容:', e.detail.value);
this.inputValue = e.detail.value;
}
}
};
</script>
3. 滚动事件 - @scroll
@scroll
事件用于监听滚动视图的滚动行为。
示例:当用户滚动页面时,输出滚动的位置信息。
<template>
<scroll-view @scroll="handleScroll" scroll-y="true" style="height: 300px;">
<!-- 滚动内容 -->
</scroll-view>
</template>
<script>
export default {
methods: {
handleScroll(e) {
console.log('滚动位置:', e.detail.scrollTop);
}
}
};
</script>
4. 表单提交事件 - @submit
@submit
事件用于监听表单的提交行为。
<template>
<form @submit="handleSubmit">
<input type="text" name="username" />
<input type="password" name="password" />
<button formType="submit">提交</button>
</form>
</template>
<script>
export default {
methods: {
handleSubmit(e) {
console.log('表单数据:', e.detail.value);
// 执行提交逻辑,如发送请求等
}
}
};
</script>
5. 触摸事件
UniApp 还支持各种触摸事件,如 @touchstart
、@touchmove
和 @touchend
,用于监听用户的触摸行为。
示例:监听手指触摸屏幕、移动和离开的过程。
<template>
<view @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
<!-- 触摸区域 -->
</view>
</template>
<script>
export default {
methods: {
handleTouchStart() {
console.log('手指触摸屏幕');
},
handleTouchMove() {
console.log('手指在屏幕上移动');
},
handleTouchEnd() {
console.log('手指离开屏幕');
}
}
};
</script>
7.全局配置
在 UniApp 中,tabBar
是一个常用的全局配置项,用于在应用的底部导航栏展示多个标签页,用户可以通过点击不同的标签来切换页面。下面是一个 tabBar
配置的案例文档,展示了如何设置底部导航栏。
1. 配置 tabBar
在 manifest.json
文件的 tabBar
部分,可以配置底部导航栏的样式和页面。
{
"tabBar": {
"color": "#999", // 文字默认颜色
"selectedColor": "#007AFF", // 文字选中颜色
"backgroundColor": "#FFFFFF", // 背景色
"borderStyle": "black", // tabbar 上边框的颜色,可选值 black/white
"list": [
{
"pagePath": "pages/index/index", // 页面路径,必须在 pages 中先定义
"text": "首页", // tab 上按钮文字
"iconPath": "static/tabbar/home.png", // 图片路径,未设置则显示文字,iOS/Android 必须提供
"selectedIconPath": "static/tabbar/home-active.png" // 选中时的图片路径,iOS/Android 必须提供
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "static/tabbar/me.png",
"selectedIconPath": "static/tabbar/me-active.png"
}
// ... 其他标签页配置
]
}
}
2. 设置页面路径
在 pages
配置项中,确保你设置了 tabBar
中 list
数组内所有 pagePath
对应的页面。
{
"pages": [
"pages/index/index",
"pages/me/me",
// ... 其他页面路径
],
// ... 其他配置项
}
3. 注意事项
tabBar
中的list
数组至少包含两个pagePath
,最多包含五个。iconPath
和selectedIconPath
必须为本地图片路径,且两个属性都需要提供。- 如果应用运行在 H5 平台上,
tabBar
配置不会生效,因为 H5 没有原生的底部导航栏概念。 - 如果某些页面不需要显示
tabBar
,可以在页面的json
配置文件中设置"navigationBarShow": false
。
8.UniApp 页面导航与传参
在 UniApp 中,页面导航通常指的是从一个页面跳转到另一个页面的过程,而传参则是指在页面跳转时传递数据给目标页面。下面将介绍 UniApp 中页面导航和传参的常用方法。
1. 页面导航
UniApp 支持多种页面导航方式,包括使用 uni.navigateTo
、uni.redirectTo
、uni.reLaunch
、uni.switchTab
、uni.navigateBack
等 API。
uni.navigateTo
:保留当前页面,跳转到应用内的某个页面。uni.redirectTo
:关闭当前页面,跳转到应用内的某个页面。uni.reLaunch
:关闭所有页面,打开到应用内的某个页面。uni.switchTab
:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。uni.navigateBack
:关闭当前页面,返回上一页面或多级页面。
// 跳转到应用内的某个页面
uni.navigateTo({
url: '/pages/detail/detail?id=1'
});
// 关闭当前页面,跳转到应用内的某个页面
uni.redirectTo({
url: '/pages/profile/profile'
});
// 关闭所有页面,打开到应用内的某个页面
uni.reLaunch({
url: '/pages/login/login'
});
// 跳转到 tabBar 页面
uni.switchTab({
url: '/pages/index/index'
});
// 返回上一页面或多级页面
uni.navigateBack({
delta: 1 // 返回的页面数,如果 delta 大于现有页面数,则返回到首页
});
2. 传参
在导航时,我们经常需要向目标页面传递一些参数。这些参数可以通过 URL 的查询字符串(query string)进行传递。
示例代码:
假设我们要从 list
页面跳转到 detail
页面,并传递一个 id
参数。
// 在 list 页面的某个方法中
uni.navigateTo({
url: '/pages/detail/detail?id=' + item.id // 假设 item.id 是要传递的 ID 值
});
detail 页面代码:
在 detail
页面的 onLoad
方法中,我们可以通过 this.$route.query
获取到传递过来的参数。
export default {
onLoad(options) {
// 获取传递过来的 id 参数
const id = options.id;
// 根据 id 做一些处理,比如请求数据等
}
}
此外,对于页面栈中的页面,还可以通过 getCurrentPages
方法获取到页面栈的信息,进而获取到之前页面传递的数据。
// 获取当前页面栈
const pages = getCurrentPages();
// 获取上一个页面的实例对象
const prevPage = pages[pages.length - 2];
// 假设上一个页面通过某个方法将数据保存在了 `data` 对象中
const dataFromPrevPage = prevPage.data.someData;
注意事项
- 当使用
uni.navigateTo
导航到新页面时,如果新页面在页面栈中已经存在,则不会创建新的实例,而是复用已有的页面实例。因此,在复用页面时,需要注意数据的处理,避免数据状态混乱。 - 在传参时,请确保传递的参数值是有效的,并且对于敏感数据要进行适当的加密和校验。
- 对于复杂的应用场景,可能需要结合 Vuex 或其他状态管理库来管理跨页面的数据状态。
9 数据请求方式
1.使用uni.request
uni.request({
url:'https://woniu.h5project.cn/1.1/classes/Job',
method:'GET',
header:{
"X-LC-Id": "自己的id",
"X-LC-Key": "自己的key",
"Content-Type": "application/json"
},
success: (res) => {
console.log(res);
}
})
2.自行封装uni.request
// promise的三种状态: pendding处理中 resolve成功 reject失败
import {BASE_URL,ID,KEY} from '../config/index.js'
function http({url,method="GET",data={}}){
return new Promise((resolve,reject)=>{
uni.request({
url:BASE_URL+url,
method,
data,
header:{
'X-LC-Id': ID, //此处必须使用自己的ID
'X-LC-Key': KEY, //此处必须使用自己的Key
'Content-Type': 'application/json'
},
success:(res)=>{
resolve(res) //交给then
},
fail:(err)=>{
reject(err) //交给catch
}
})
})
}
function get(url,data){
return http({url,method:'GET',data})
}
function post(url,data){
return http({url,method:'POST',data})
}
function del(url,data){
return http({url,method:'DELETE',data})
}
export {
http,
get,
post,
del
}
3.使用luch-request第三方库
3.x文档 | luch-request (quanzhan.co)
axios 可能不兼容小程序
import Request from '../js_sdk/luch-request/luch-request/index.js'
import {BASE,ID,KEY} from '../config/index.js'
const http = new Request()
/* config 为默认全局配置*/
http.setConfig((config) => {
config.baseURL = BASE+'/1.1/'; /* 根域名 */
config.header = {
"X-LC-Id": ID,
"X-LC-Key": KEY,
"Content-Type": "application/json"
}
return config
})
// 请求拦截器
http.interceptors.request.use((config) => { // 可使用async await 做异步操作
config.header = {
...config.header,
// a: 1 // 演示拦截器header加参
}
console.log('请求拦截器');
return config
}, config => { // 可使用async await 做异步操作
return Promise.reject(config)
})
//响应拦截器
http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
console.log('响应拦截器',response)
return response
}, (response) => { /* 对响应错误做点什么 (statusCode !== 200)*/
console.log(response)
return Promise.reject(response)
})
export default http
10 组件库配置
1.colorUI 倾向于布局
- 下载核心代码
- 将colorui文件夹引入项目中
- 使用组件
2.图鸟UI