uni-app是一个使用Vue.js开发所有前端应用程序的框架。 开发者编写一套代码，可以发布到iOS、H5、各种小程序（微信/支付宝/百度/今日头条/QQ/钉钉/淘宝）、快用等平台。 uni-app在跨平台的过程中，并没有牺牲平台特性，可以优雅的调用平台专有的能力。

官网地址

官网地址：

条件编译的优点和特点

#ifdef APP-PLUS 需要条件编译的代码 仅出现在App平台下的代码 #endif #ifndef H5 需要条件编译的代码 除了H5平台,其他平台均存在的代码 #endif #ifdef H5 || MP-WEIXIN 需要条件编译的代码 在H5平台或微信小程序平台存在的代码 #endif

条件编译是通过注释来实现的。 不同语法中的注释写法不同。 js 使用 // #，css 使用 /* # */，vue/nvue 模板使用它。

App端Nvue开发+开发环境搭建

通过可视化界面快速入门并创建项目。 可以参考官方文档小程序商城开发工具，很详细！

官方文档快速上手：https://uniapp.dcloud.io/quickstart

首次运行uni-app时，需要配置开发工具的相关路径。

配置对应小程序开发者工具的路径

点击工具栏上的运行==>>运行到小程序模拟器==>>运行设置

打开微信开发者工具时，需要先在微信开发者工具中打开服务端口。

设置==>>安全==>>开放服务端口

// 全局安装 vue-cli npm install -g @vue/cli // 创建uni-app vue create -p dcloudio/uni-preset-vue my-project // 运行、发布uni-app npm run dev:%PLATFORM% npm run build:%PLATFORM% %PLATFORM% 取值 app-plus(app平台)、h5、mp-alipay(支付宝)、mp-baidu(百度)、mp-weixin(微信)mp-toutiao(头条)、 mp-qq(qq)、mp-360(360)、quickapp-webview(快应用通用)、quickapp-webview-huawei(快应用华为)、quickapp-webview-union(快应用联盟)

生命周期

生命周期

// onLaunch 应用初始化完成 全局只触发一次 // onShow 应用启动的时候 或者从后台进入前台会触发 // onHide 应用从前台进入后台

// onload 监听页面加载 可以获取页面传参 // onReady 监听页面的初次渲染完成 // onShow 监听页面显示 包括从下级页面点返回露出当前页面 // onHide 监听页面隐藏 // onUnload 监听页面卸载 // onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新 // onReachBottom 页面滚动到底部的事件 一般用于上拉加载 // onTabItemTap 点击 tabbar 触发 // onShareAppMessage 用户点击右上角分享

uni-app组件支持的组件生命周期（即Vue的生命周期）的生命周期与Vue标准组件的生命周期相同！

// App Launch // APP Show // Page Onload // Page onShow // component beforeCreate // component created // component beforeMounted // component Mounted // Page onReady // component beforeDestroy // component destroyed // Page onUnload

默认模板目录

文件目录说明

配置启动模式

使用过程中的其他问题

"globalStyle": { "navigationStyle": "custom" }

// components/navbar/navbar.vue // index.vue 中 直接使用 等同于以下 // import navbar from '../components/navbar/navbar.vue' // components: { // navbar // }

// 获取胶囊位置 const menuButtonInfo = uni.getMenuButtonBoundingClientRect() console.log(menuButtonInfo) // wx {width: 87, height: 32, left: 278, right: 365, top: 26, bottom: 58}