uni-app的基础知识

uni-app的基础知识

uni-app
Vue.js框架下的移动端（H5移动端页面、App手机应用程序、小程序）开发框架。
开发工具：HbuilderX。
一、利用HbuilderX创建uni-app项目：
“文件”菜单 | 新建 | 项目 | 默认模板
1、[pages]：存放页面的目录，里面的每一个文件夹就是一个页面。

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("

<img",“gi”);
let reg1=/

<img/gi;
this.newsDetailData.content=this.newsDetailData.content.replace(reg1,"

<img ");

let reg2=new RegExp(’<p\s{1,}class=“img-desc”\s{0,}>’,“gi”);
let reg2=/<p\s{1,}class=\“img-desc\”\s{0,}>/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(“组件名”,导入的组件变量);