uni-app笔记

---

START

参考：https://juejin.cn/post/7137195631151415333

---

一、uniapp

uniapp介绍

可以开发移动端、H5、小程序、快应用

二、uniapp项目创建

uniapp开发方式有两种
1.vue-cli（可开发H5或者小程序端）
2.HBX可视化（多端开发首选 或只开发手机app）

方式一 vue-cli创建项目

1.全局安装vue-cli

npm install -g @vue/cli@4

2.创建项目

vue create -p dcloudio/uni-preset-vue 项目名称

3.选择模板 - 选择默认模板

4.运行项目

npm run serve

运行H5端项目
npm run dev:h5

方式二 HBX创建

文件->新建项目->默认模板
运行->浏览器运行

手机app模拟器

Android Studio

三、项目结构

文件目录

https://uniapp.dcloud.net.cn/tutorial/project.html

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。uniapp插件
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  └─android            Android原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

组件创建引用

创建components文件夹
创建组件文件夹及组件.vue
index.vue直接引用

跨平台开发

创建platforms文件夹
创建开发平台值文件夹 eg：H5
创建vue文件

常见项目文件

main.js 项目入口文件
manifest.json 项目配置文件
pages.json 全局配置和页面配置
uni.scss 内置的常用样式变量

四、uiapp生命周期

uniapp生命周期分为3类
1.应用生命周期 小程序规范
2.页面生命周期 小程序规范
3.组件生命周期 Vue规范

1.应用生命周期 小程序规范

App.vue
onLaunch
当uni-app初始化完成时触发（全局只触发一次）

onShow
当uni-app启动，或从后台进入前台显示

onHide
当uni-app从前台进入后台

onError
当uni-app报错时触发

onUniNViewMessage
对nvue页面发送的数据进行监听，可参考nvue向vue通讯

onUnhandledRejection
对未处理的Promise拒绝事件监听函数(2.8.1+)

onPageNotFound
页面不存在监听函数

onThemeChange
监听系统主题变化

2.页面生命周期 小程序规范

pages/index/index.vue

onLoad
监听页面加载，其参数为上个页面传递的数据，参数类型为Object(用于页面传参)

onShow
监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

onReady
监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

onHide
监听页面隐藏

onUnload
监听页面卸载

onResize
监听窗口尺寸变化

onPullDownRefresh
监听用户下拉动作，一般用于下拉刷新，参考示例

3.组件生命周期 Vue规范

五、响应式单位 rpx

750rpx等于屏幕的宽
1px = 2rpx
超过960px就成固定宽度，但可以通过配置修改

六、样式无需添加scoped

scoped
1.vue开发的h5,单页面应用程序，每一个vue文件如果直接使用class,多个文件的样式冲突

2.微信小程序真正多页面应用程序物理隔离，页面中使用cass,不会相互影响

3.uniapp做了一个设置，写vue代码，不需要主动加上scoped,打包成h5端的时候自动添加上去，打包成微信小程序端不需要添加scoped

七、条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台
写法：以#ifdef或ifndef加%PLATFORM%开头，以endif结尾
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

标签中

<!-- #ifdef %PLATFORM% -->
平台特有的组件
<!-- #endif -->

js中

// #ifdef %PLATFORM%
平台特有的API实现
// #endif

css中

/* #ifdef %PLATFORM% */
平台特有的样式
/* #endif */

UI框架配置

发布成H5端

发行 --> 网站pc端

发布成微信小程序并上传

manifest.json --> 微信小程序配置
发行微信小程序

打包成App

---

END