前端---uniapp

最新推荐文章于 2024-07-18 15:48:23 发布

Lill_bin

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量886

点赞数 27

分类专栏：前端文章标签：前端 uni-app java 后端 spring spring cloud node.js

本文链接：https://blog.csdn.net/qq_56438516/article/details/140309152

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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：关闭当前页面，返回上一页面或多级页面。

// 跳转到应用内的某个页面  j
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第三方库

luch-request - DCloud 插件市场

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 倾向于布局

GitHub文档

ColorUI-UniApp - DCloud 插件市场

下载核心代码
将colorui文件夹引入项目中
使用组件

2.图鸟UI

图鸟UI - DCloud 插件市场

TuniaoUI (tuniaokj.com)

写在最后:本篇博文给大家分享了一些uniapp的基础知识，希望能够给大家带来帮助，博主小，中，大厂均有面试经历，目前是一名全栈工程师，坚持每日分享全栈相关知识，希望能够和大家共同进步。

Lill_bin

关注

27
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
前端---uniapp

UniApp 是一个使用 Vue.js 开发所有前端应用的框架，可以开发跨平台应用，如：iOS、Android、H5、小程序等。UniApp 提供了丰富的组件和 API，使得开发者可以使用一套代码，实现多平台开发。官方文档UniApp官方文档。
复制链接

扫一扫