uni-app基础知识

最新推荐文章于 2024-10-14 11:59:20 发布

原创最新推荐文章于 2024-10-14 11:59:20 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

uni-app 专栏收录该内容

10 篇文章

订阅专栏

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样式

在uni-app项目的根目录下常见一个名为common的文件夹，用来存放通用代码（css、js）
在App.vue文件中需要将common文件夹中的文件引入项目。
@import ‘./common/uni.css’;
在common文件夹中放置uni.css的样式文件。
在common文件夹中放置字体图标（阿里矢量图iconFont）的样式文件。
（1）项目Tab栏的图标必须下载下来（.png文件），图标大小建议为81px * 81px。
（2）项目其他部分的图标生成字体/样式文件
将iconfont.css文件复制到common文件夹中。
将ttf、svg字体文件复制到static\fonts文件夹中。
修改iconfont.css文件中关于指定字体文件的路径。

3、Tab栏：（同微信小程序）

如何模拟手机App。

利用数据线将手机和电脑连起来。
打开手机的“开发者选项”功能（Android手机）：
手机 |设置 | 关于本机 | Android版本/软件版本（用手指触碰7下）| 输入密码
在手机和电脑端都安装“360手机助手”。

可以在App端设置中间按钮：

“tabBar”中的“list”数组必须具备偶数个元素。
只能在App端使用，且不能进行页面跳转。
“midbutton”:{ "width":"80px", "height":"70px", "text":"扫码", "iconPath":"static/logo.png", "iconWidth":"50px" }
可以在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下的两个组件

列表

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

图文列表

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

单行省略号：

.uni-ellipsis

7、页面之间如何跳转

uni.navigateTo()

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

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

9、对富文本进行优化

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

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

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

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

//方案1：
let reg1=new RegExp("<p><img","gi");	
let reg1=/<p><img/gi;
this.newsDetailData.content=this.newsDetailData.content.replace(reg1,"<p style='text-indent:0;'><img ");
//方案2：
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,'<p class="img-desc" style="text-indent:0;text-align:center;font-size:14px;font-weight:bold">')