uni-app的基础知识

uni-app的基础知识

uni-app
Vue.js框架下的移动端(H5移动端页面、App手机应用程序、小程序)开发框架。
开发工具:HbuilderX。
一、利用HbuilderX创建uni-app项目:
“文件”菜单 | 新建 | 项目 | 默认模板
1、[pages]:存放页面的目录,里面的每一个文件夹就是一个页面。
uni-app的基础知识_第1张图片

2、[static]:存放静态文件的目录,里面可以放置图片、字体等。
3、App.vue:实现整个项目的生命周期。
4、main.js:整个项目的入口文件(创建了一个Vue实例app)。
5、pages.json:页面配置文件。
6、manifest.json:项目配置文件。
如何新建页面:鼠标右键单击pages目录,选择“新建页面”,勾选“创建同名目录”。
二、如何管理CSS样式:
1、在uni-app项目的根目录下创建一个名为common的文件夹,用来存放通用代码(css、js)。
在App.vue文件中需要将common文件夹中的文件引入项目。
@import ‘./common/uni.css’;
2、在common文件夹中放置uni.css的样式文件。
3、在common文件夹中放置字体图标(阿里矢量图iconFont)的样式文件。
(1)项目Tab栏的图标必须下载下来(.png文件),图标大小建议为81px * 81px。
(2)项目其他部分的图标生成字体/样式文件。
将iconfont.css文件复制到common文件夹中。
将ttf、svg字体文件复制到static\fonts文件夹中。
修改iconfont.css文件中关于指定字体文件的路径。
三、Tab栏:(同微信小程序)
如何模拟手机App。
(1)利用数据线将手机和电脑连起来。
(2)打开手机的“开发者选项”功能(Android手机):
手机 |设置 | 关于本机 | Android版本/软件版本(用手指触碰7下)| 输入密码
(3)在手机和电脑端都安装“360手机助手”。
可以在App端设置中间按钮:
(1)“tabBar”中的“list”数组必须具备偶数个元素。
(2)只能在App端使用,且不能进行页面跳转。
(3)“midbutton”:{
“width”:“80px”,
“height”:“70px”,
“text”:“扫码”,
“iconPath”:“static/logo.png”,
“iconWidth”:“50px”
}
(4)可以在App.vue文件中的onLaunch钩子函数中利用uni-app的API处理midButton
的单击事件。
uni. onTabBarMidButtonTap(function(){
console.log(“中间的按钮在APP中被单击了”)
})
四、globalStyle:
“navigationBarBackgroundColor”:导航栏背景颜色,
“navigationBarTextStyle”:导航栏标题外观(white、black),
“navigationBarTitleText”:导航栏标题,
“enablePullDownRefresh”:是否开启下拉刷新(false),
“onReachBottomDistance”:设置页面上拉触底事件触发时距离页面底部的距离(50px),
“titleImage”:导航栏图片,仅适用于支付宝小程序、H5、App,
“backgroundColor”:导航栏背景颜色,仅适用于微信小程序,
“backgroundTextStyle”:导航栏文本样式,仅适用于微信小程序(dart、light),
“transparentTitle”:设置导航栏透明效果,仅适用于支付宝小程序、H5、App(none、always、auto),
“titlePenetrate”:设置是否支持导航穿透效果(YES、NO)
五、调取接口:
uni.request({
})
六、uni.css下的两个组件:
1、列表:

列表项
列表项
……

2、图文列表:







3、单行省略号:.uni-ellipsis
七、页面之间如何跳转:
uni.navigateTo()
八、在数据加载过程中提示正在加载:
1、uni.showLoading({
title:“提示文本”
})
2、uni.hideLoading();
九、对富文本进行优化:
1、让富文本段落两端对齐并首行缩进:
需要将相应的CSS代码施加在富文本标记对中。

.richText{ text-align:justify; text-indent:2em; }
注意:对于富文本标记对内部的“文本标记对”不能设置样式。
2、首行缩进导致图片和图片说明文本都具备缩进大小。
解决:
let reg1=new RegExp("

let reg1=/

this.newsDetailData.content=this.newsDetailData.content.replace(reg1,"

let reg2=new RegExp(’’,“gi”);
let reg2=//gi;
this.newsDetailData.content=this.newsDetailData.content.replace(reg2,’

’)
(二)UI基础库与组件封装
一、UI基础库:
人为书写的CSS库(uibase.css),目的是利用各种自定义的类名完成快速布局。
1、实现UI基础库的强调色:
primary(蓝色)、info(黄色)、danger(红色)、warning(橙色)、success(绿色)。
强调色可以用于文本颜色、背景颜色、边框颜色等颜色。
body{
–primary:#3385ff;
}
.text-primary{color:var(–primary) !important;}
2、与字体有关的样式
3、与文本有关的样式
4、行高、字号、宽高……
5、栅格:规划栅格的格数(12格、20格、24格、……)
(1)若按照指定的格数,以%为单位,一份无法得到能除尽的数,则可以使用移动端单
位upx来实现。
(2)若每份的宽度能除尽,则可以以%为单位,并为父元素设置百分比。
.row{display:flex;flex-direction:row;flex-wrap:wrap;}
[class*=col-],[class*=col20-]{
display:flex;
flex-direction:column;
box-sizing:border-box;
padding:10upx;
}
二、页面导航条的开发:
1、页面导航条在pages.json文件中为任意页面的“style”键名设置“h5”、“app-plus”。
2、在“h5”、“app-plus”内部通过“titleNView”来设置导航条。
3、titleNView下的键名:
“backgroundColor”:设置导航条的颜色。
“searchInput”:设置导航条中的搜索输入框。
“backgroundColor”:设置导航条中的搜索输入框的背景颜色。
“disabled”:设置是否可用,设置为true表示不可用。
……
“buttons”:数组,用于设置导航条中的按钮。
“type”:设置导航条按钮的类型。
“float”:设置按钮的位置浮动。
“fontSrc”:指定字体文件作为按钮图标的来源,取值为字体文件。
“text”:fontSrc指定的字体文件中的具体图标,取值为\uxxxx。
“onclick”:设置单击按钮后的回调函数。
当searchInput搜索输入框被设置为不可用时,因该如何处理单击事件。
在导航条所在的页面中添加下列生命周期函数:
onNavigationBarSearchInputClicked(){} 当用户触碰SearchInput时触发。
当searchInput搜索输入框被设置为可用时,因该如何处理用户输入。
在导航条所在的页面中添加下列生命周期函数:
onNavigationBarSearchInputChanged(){} 当用户修改SearchInput文本时触发。
onNavigationBarSearchInputConfirmed(){} 当用户输入完内容并单击键盘右下角按
钮时触发。
三、组件封装:
1、为什么要封装成组件:
(1)为了代码的复用。
(2)为了对代码进行维护时不动用其他无关的代码。
2、调用其他组件的页面被称为“父组件”。
被其他页面调用的组件被称为“子组件”。
父组件向子组件传递数据:prop,可以取两种值(字符串数组、对象)。
3、组件的使用步骤:
(1)组件的创建。
(2)组件的导入(import … from …)。
(3)组件的注册(components:{})。
(4)组件的使用。
4、项目的全局组件:
全局组件的导入和注册必须发生在main.js中。
(1)组件的导入:(import … from …)
(2)组件的注册:Vue.component(“组件名”,导入的组件变量);

你可能感兴趣的:(前端)