uni-app

1. 什么是uni-app？

        uni-app是DCloud（Disruptive Technologies）推出的一款跨平台开发框架，可以一次性编写代码，然后通过编译打包，生成多个平台的应用程序，包括安卓、iOS、H5、微信小程序、支付宝小程序等。

1. uni-app的优点？

a. 一次开发，可生成多端应用，开发效率高。

b. 语法简单易学，基于Vue.js，上手容易。

c. 支持大量原生组件，体验流畅。

d. 支持插件扩展，可集成第三方SDK。

1. 如何创建一个uni-app项目？

（1）使用HBuilderX创建项目

打开HBuilderX，选择新建项目，然后选择uni-app项目模板，填写项目名称、项目路径等相关信息即可。

（2）使用Vue CLI创建项目

首先安装Vue CLI，然后使用命令行运行 vue create <projectName> 创建项目，接着选择uni-app模板即可。

1. uni-app的文件结构

components // 全局组件
pages // 页面目录
index // 首页
index.vue // 页面逻辑
main.js // 页面入口
home // home页面
index.vue
main.js // Vue初始化入口文件
static // 静态资源目录
unpackage // 编译后文件目录
app.vue // 应用配置文件
manifest.json // 应用配置文件
pages.json // 页面配置文件

1. uni-app中常用的组件

（1）swiper：轮播图组件，可实现图片或者文字自动轮播。

（2）scroll-view：滚动视图组件，可实现页面的上下滚动。

（3）list：列表组件，可实现展示数据列表。

（4）icon：图标组件，可实现展示各种小图标。

（5）button：按钮组件，可实现各种样式的按钮。

1. uni-app中的生命周期函数

（1）onLoad：监听页面加载，一般用于获取页面URL参数数据以及初始化数据。

（2）onReady：监听页面初次渲染完成，一般用于动画的初始化等操作。

（3）onShow：监听页面显示，一般用于监听页面显示时的一些操作。

（4）onHide：监听页面隐藏，一般用于监听页面隐藏时的一些操作。

（5）onUnload：监听页面卸载，一般用于监听页面卸载事件。

1. uni-app中的事件处理

（1）点击事件

<button @click="handleClick">点击事件</button> methods: { handleClick() { console.log("点击事件触发"); } }

（2）表单绑定

<input type="text" v-model="text"/>

（3）组件事件

<custom-component @customEvent="handleCustomEvent"/> handleCustomEvent(e) { console.log("收到自定义事件", e); }

1. uni-app的路由

（1）配置路由

在pages.json中配置路由信息：

{ "pages": [ { "path": "pages/index/index", "style": {} }, { "path": "pages/home/home", "style": {} } ], "globalStyle": {} }

（2）跳转页面

<a href="/pages/home/home">跳转到home页面</a>

（3）传递参数

<a :href="'/pages/detail/detail?id=' + id">跳转到详情页</a>

在详情页中使用onLoad函数接收参数：

onLoad(options) { console.log(options.id); }

1. uni-app的HTTP请求

（1）使用封装好的uni.request

uni.request({ url: 'http://localhost:8080/api/data', method: 'GET', success(res) { console.log('请求成功', res); }, fail(err) { console.log('请求失败', err); } });

（2）使用async/await

async getData() { try { let res = await uni.request({ url: 'http://localhost:8080/api/data', method: 'GET' }); console.log('请求成功', res); } catch (err) { console.log('请求失败', err); } }

1. uni-app的小程序云开发

（1）开通小程序云开发

在微信公众平台中开通小程序云开发功能，并在uniCloud控制台中创建云开发空间。

（2）使用uniCloud提供的API

const db = uniCloud.database(); db.collection('users').get().then(res => { console.log(res); }).catch(err => { console.log(err); });

（3）使用云函数

新建一个云函数，在云函数中使用uniCloud提供的API：

exports.main = async (event, context) => { const db = uniCloud.database(); return await db.collection('users').get(); }

在页面中调用云函数：

async getUserData() { let res = await uniCloud.callFunction({ name: 'getUsers', }); console.log(res); }