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 --> 微信小程序配置
发行微信小程序