uni app 学习陆续更新

Posted 2021-06-09 贲风

--使用HbuliderX 创建项目

　　新建项目  选择uni-app  默认模板 选择路径 输入项目名  / hello uni-app  更适合开发

--项目基本构成

　　

　　components:  组件

　　pages:  页面文件夹 

　　static:  静态资源文件夹  存放图片、视频等   ※必须存放于此文件夹

　　App.vue:  配置全局的生命周期 和全局的样式

　　main.js:  入口文件

　　manifest.json:  项目配置文件

　　pages.json:  配置页面的路由关系、导航栏、选项卡等。  pages内第一项为启动页 （类似小程序）

--组件部分  后续学习。

--接口部分 后续学习。

--页面样式与布局

　　尺寸单位：  upx   

　　　　px与upx的转换公式   设计稿   1px / 设计稿基准宽度 = 框架样式 1upx / 750upx     

　　　　换言之  750 * 元素在设计稿中的宽度 / 设计稿基准宽度（这不类似小程序rpx吗）

　　　　upx不支持动态传参   还是使用rpx多

　　使用@import导入外联样式   相对路径  

　　不能使用*选择器  page 相当于body节点

　　字体文件小于 40kb  自动转换为 base64格式

　　大于等于 40kb 则需要开发者转换 否则使用将不生效

　　字体文件的引用路径推荐使用 -@开头的绝对路径

 --全局配置和页面配置

　　通过pages来配置页面　　就类似VUE router

　　配置tabBar 　（只写了部分功能）

　　　　color                                                         默认颜色

　　　　selectedColor　　　　　　　　　　　   选中时颜色

　　　　backgrooundColor 　　　　　　　　　  背景色

　　　　borderStyle　　　　　　　　　　　　　上边框颜色 可选值 black/white

　　　　list　　　　　　　　　　　　　　　　　列表  最多5项  最少两项

　　　　position　　　　　　　　　　　　　　　位置 可选值 top/bottom  top只有微信小程序支持  并且不显示图片

　　　　fontSize　　　　　　　　　　　　　　　文字默认大小

　　　　height　　　　　　　　　　　　　　　　默认高度

 　　配置condition    配置启动模式

--组件

　　--view   类似 div标签

　　　　hover-class　　　　　　　　　　　　　　按下去的样式类

　　　　hover-stop-propagation　　　　　　　　　是否冒泡

　　　　hover-start-time　　　　　　　　　　　　  按下后多久出现样式类 　单位毫秒

　　　　hover-stay-time　　　　　　　　　　　　  手指松开后点击样式保持事件   单位毫秒

　　--text  类似 span标签

　　　　selectable　　　　　　　　　　　　　　　文本是否可选  APP、H5

　　　　user-select　　　　　　　　　　　　　　  文本是否可选  微信端

　　　　space　　　　　　　　　　　　　　　　   显示空格

　　--rich-text   富文本

　　　　一般就是请求后返回富文本类型 直接渲染  后续学习

　　--button   按钮组件

　　　　size　　　　　　　　　　大小

　　　　type　　　　　　　　　　样式类型

　　　　plain　　　　　　　　　　是否镂空 背景色透明

　　　　disabled　　　　　　　　是否禁用

　　　　form-type　　　　　　　 用于form组件  会触发 submit / reset 事件

　　　　open-type　　　　　　　开放能力

　　--image　　图片

　　　　src　　　　　　　　　　　　资源地址

　　　　mode　　　　　　　　　　　图片裁剪、缩放模式

 --Scss & Iconfont使用

　　--Iconfont

　　　　下载后将字体文件提出  放入iconfont 文件夹  在App.vue  或者某个页面  @import 引入

　　　　将.CSS 文件的地址改成 ~@/     后面相对地址   剩下就是正常使用

　　--Scss

　　　　需要插件里下载才能使用

　　　　按照要求下载即可