uni-app基础知识

Vue.js框架下的移动端（H5移动端页面、App手机应用程序、小程序）开发框架

一、uni-app的基础知识

1、利用HbuilderX创建uni-app项目

“文件”菜单 | 新建 | 项目 | 默认模板

uni-app项目结构	描述
[pages]	存放页面的目录，里面的每一个文件夹就是一个页面
[static]	存放静态文件的目录，里面可以放置图片、字体等
App.vue	实现整个项目的生命周期
main.js	整个项目的入口文件（创建了一个Vue实例app）
pages.json	页面配置文件
manifest.json	项目配置文件

如何新建页面：鼠标右键单击pages目录，选择“新建页面”，勾选“创建同名目录”。

2、如何管理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文件中关于指定字体文件的路径。

3、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中被单击了")
})

4、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）

5、调取接口

uni.request({

})

6、uni-app下的两个组件

1. 列表

<view class="uni-list">
	<view class="uni-list-cell">列表项</view>
	<view class="uni-list-cell">列表项</view>
 	……
</view>

2. 图文列表

<view class="uni-medial-list">
  <image src=“” class="uni-media-list-logo" />
  <view class="uni-media-list-body">
     <view class="uni-media-list-text-top"></view>
   <view class="uni-media-list-text-bottom"></view>
</view>
</view>

3. 单行省略号：

.uni-ellipsis

7、页面之间如何跳转

uni.navigateTo()

8、在数据加载过程中提示正在加载

1. uni.showLoading({ title:"提示文本" })
2. uni.hideLoading();

9、对富文本进行优化

1. 让富文本段落两端对齐并首行缩进：需要将相应的CSS代码施加在富文本标记对中。

<rich-text class="richText"></rich-text>

.richText{ text-align:justify; text-indent:2em; }

注意：对于富文本标记对内部的“文本标记对”不能设置样式。
2. 首行缩进导致图片和图片说明文本都具备缩进大小。解决：

//方案1：
let reg1=new RegExp("
,"gi");	
let reg1=/
;
this.newsDetailData.content=this.newsDetailData.content.replace(reg1,"
);
//方案2：
let reg2=new RegExp('',"gi");	
let reg2=//gi;
this.newsDetailData.content=this.newsDetailData.content.replace(reg2,'
')