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.常用的组件

1. 视图容器：view、scroll-view等。
2. 基础内容：text、icon、progress等。
3. 表单组件：button、form、input、picker等。
4. 导航：navigator、tab-bar等。
5. 媒体组件：image、video、audio等。
6. 地图：map。
7. 画布：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第三方库

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)

​