uniapp的完整学习（部分组件，api未涉及，用法大致差不多）

最新推荐文章于 2024-04-13 06:28:02 发布

快乐的二进制鸭

最新推荐文章于 2024-04-13 06:28:02 发布

阅读量1.9k

点赞数 1

分类专栏： uniapp的学习文章标签： uni-app

本文链接：https://blog.csdn.net/qq_41973526/article/details/118970773

版权

uniapp的学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

uniapp的学习

1.介绍

uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到ios,Android,H5,以及各种小程序（微信、支付宝、百度）等多个平台。

2.踩坑点。

第一次通过hbuildx运行微信小程序，需要将微信开发者工具里面安全中的服务端口打开。

通过运行hbuildx，会自动运行到对应的软件中。

3.目录结构

在这里插入图片描述

pages:用来存放整个页面。

static:存放静态资源

unpackage:打包之后的文件，存放在这里面

App.vue:项目根组件，页面入口文件

main.js：项目入口文件

manifest.json:配置应用打包的一些东西

pages.json：设置整个页面的存放路径以及外观。

uni.scss:颜色变量，直接用变量名即可。

在这里插入图片描述

4.开发规范

页面文件遵循Vue单文件组件规范

组件标签靠近小程序规范

接口能力（JS API）靠近微信小程序规范，需要将前缀wx替换为uni

数据绑定及事件处理同Vue.js规范，同时补充了App及页面的生命周期

为兼容多端运行，建议使用FLEX布局进行开发

5.全局配置和页面配置

（1）全局配置

在pages.json中的globalStyle中进行配置。

在这里插入图片描述

（2）页面配置

首先在pages中新建目录。新建对应文件类型。

在文件中写入内容。
在这里插入图片描述

然后在pages.json中，找到pages，将写好的页面，通过path。在pages中，第一个是启动页，及第一页。但是启动页可以由condition来制定。

在这里插入图片描述

要想自己独有样式，则在pages.json中找到自己的path,然后添加style
在这里插入图片描述

当这个页面在h5版本中，直接也是在style中，“h5”：{ }即可。要是别的平台，只需要把h5换为对应内容即可。
在这里插入图片描述

6.tabBar(页面底部导航)

点击切换对应内容。最少2个，最多5个。

在这里插入图片描述

tableBar是与globalStyle,pages是同级的，因此放在同一级别下。

步骤：1.新建页面

2.在pages中进行写入path

3.在tabBar中通过pagePath中写入。

在这里插入图片描述

iconPath；默认的图标

selectedIconPath:选中时候的图标

7.tabBar的一些其余属性

backgroundColor:是整个tabBar的背景颜色。

在这里插入图片描述

8.condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

进入页面默认显示的页面。

包含两个属性，current和list

使用：（1）首先新建页面，将页面配置到pages中

（2）在condition中
在这里插入图片描述

微信小程序中，将普通编译换为详情页即可。就可看到对应页面

在浏览器中可以通过修改路由参数来看到页面

9.组件的使用

注意点：

//所以的组件与属性名都是小写，单词之间以连字符-连接
//每个vue文件的根节点必须为<template>，且这个<template>下只能且必须有一个根<view>组件

（1）text文本组件的使用

有三个属性：selectable：长按文本是否可被选中，默认false。与user-select一个意思

space：显示连续空格。将文本中的空格也显示出来不加它，会默认将连续空格只显示一个。

在这里插入图片描述

ensp:中文字符空格一半大小

emsp:中文字符空格大小

nbsp:根据字体设置的空格大小

（2）view组件

1.hover-class: 指定按下去的样式类。当hover-class="none"时，没有点击效果

在这里插入图片描述

2.hover-stop-propagation 阻止事件冒泡。这里写错了，不用添加属性值就可以，否则会报错。
只会点击自己有效果

在这里插入图片描述

3.hover-start-time: 按住多久出现点击状态
hover-stay-time: 手指松开后点击转态保留时间，
这里的属性值都是number,但是如果写成字符串的话可以在前面添加:，将其变为number

在这里插入图片描述

4.button组件：
//size: 代表按钮大小。default默认大小，mini小按钮
//type:按钮样式类型 primary蓝 default灰白 warn红
//plain 按键是否镂空false，即只有border和里面文字颜色是生效的，背景色透明。是的话直接写plain即可，不用写属性值
//disables 是否禁用false。就不能进行点击操作了。要是禁用的话直接写disables
//loading 下面会出现一个加载的圆圈。直接写loading即可。

size有关属性：

在这里插入图片描述

type有关属性：

在这里插入图片描述

5.image组件
//image组件默认宽度300px.高225px。
//mode。通过mode属性的设置，可以改变图片的大小。

mode:属性值

在这里插入图片描述

6.rpx ：响应式px,一种根据屏幕宽度自适应的动态单位，而宽750rpx恰好为屏幕宽度，屏幕边框，rpx显示效果会等比缩放。
给到750rpx就可以实现宽度100%布局了。一般的话使用padding来做宽，以及默认高度，高度随内容的撑开。

uniapp中的样式：包括上面的6

7.@import的使用
//使用import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用；语句结束。

在这里插入图片描述

//在uniapp中不能使用*选择器
//page相当于body节点
//定义在App.vue中的样式为全局样式，作用域每一个页面，在pages目录下的vue文件中定义的样式为局部样式，只做用在对应的页面，优先级高

8.在uniapp中使用字体图标

注意点：使用方式与普通web项目相同，字体文件小于40kb,uniapp会自动将其转化为base64格式

字体文件大于等于40kb，需要开发者自己转换，否则不生效。

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

使用：1.将下载好的字体图标文件中的.css .eot. .svg.ttf.woff.woff2文件放入static中的font文件中（需要创建）

2.要想在全局可以使用，则需要放在App.vue中引入css文件
在这里插入图片描述

引入完后会报错，因为人家规定的药_{@开头。所以将这些文件中前面要改为}@引入。

原先内容：
在这里插入图片描述

使用~@修改后的内容
在这里插入图片描述

引入完就可以在任意地方进行使用了。
在这里插入图片描述

（3）scss的使用安装

在hbuildx中找到工具-》插件安装-》scss。安装完成即可直接使用。

(4)uni.scss文件

在这个文件中包含了对一些样式进行变量的申明，使用的话直接使用变量民即可。

10.基本的数据绑定

和vue中的数据绑定一毛一样的

（1）插值表达式

在这里插入图片描述

（2）v-for和v-bind的使用

直接和vue一毛一样。

在这里插入图片描述

（3）如何注册事件和传递参数（v-on）

还是和vue中的一毛一样。$event获取事件参数

在这里插入图片描述

11.生命周期

生命周期概念：一个对象从创建、运行、销毁的整个过程被称为生命周期。

生命周期函数概念：在生命周期中每个阶段会伴随着一个函数的触发，这些函数被称为生命周期函数。

下面为应用的生命周期：应该定义在vue.app里面

//onLaunch  当uni-app初始化完成时触发（全局只触发一次）
//onShow  当uni-app启动，或从后台进入前台展示
//onHide  当uni-app从前台进入后台
//onError  当uni-app报错时触发

在这里插入图片描述

页面的生命周期：放在自己的页面里面

//onLoad  监听页面加载，其参数为上个页面传递的数据，参数类型为Object(用于页面传参)
//onShow  监听页面显示，页面每次出现在屏幕上都能触发，包括从下级页面点返回漏出当前页面
//onReady 监听页面初次渲染完成
//onHide  监听页面隐藏
//onUnLoad 监听页面卸载

在这里插入图片描述

tabBar的页面展现过一次后就保留在内存中，再次切换tabbar页面，只会触发每个页面的onshow，不会再出发onload。

12.下拉刷新的学习（监听下拉刷新onPullDownRefresh）

开启-》监听-》关闭

uni.startPullDownRefresh -> onPullDownRefresh -> uni.stopPullDownRefresh

在js中定义onPullDownRefresh处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

找到对应页面，添加onPUllDownRefresh方法监听下拉刷新。

通过设置定时器，让下拉刷新在一定时间后关闭（stopPullDownRefresh）。uni代表uniapp可以直接使用。

在这里插入图片描述

触发下拉更新方式2.（通过绑定事件实现下拉刷新startPullDownRefresh）
在这里插入图片描述

13.上拉加载（页面滚动到底部的事件onReachButton）

主要还是用来加载下一页数据。

onReachBottom :页面滚动到底部的实际（不是scroll-view滚到底），而是常用与下拉下一页数据。下拉到最底部。
在这里插入图片描述

onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位只支持px。
在这里插入图片描述

14.数据请求（uni.request）

默认get请求。

request1() {
	console.log("我要请求数据啦")
    uni.request({		        
        url:'http://rap2api.taobao.org/app/mock/264739/studentList',
		// data:{
		//  name:'name',
		//  age:18
		// },
	success(res) {
	   console.log(res.data)  //请求成功后的数据
				  }
			  })
		  },

在这里插入图片描述

15.数据存储

(1)设置（uni.setStorage）

uni.setSrorage({})异步接口

在这里插入图片描述

uni.setStorageSync(key,value) //同步接口

cunchu(){
  uni.setStorageSync('id',100)
}
//同样可以将上面数据进行存储

(2)获取(uni.getStorage) 异步

获取的数据放在成功中的res.data中。

在这里插入图片描述

同步：let value = uni.getStorage(key) value就是最后获取的值

（3）uni.removeStorage 异步

移除数据

同步为uni.removeStorageSync(key)
在这里插入图片描述

16.图片的上传与预览

在这里插入图片描述

上传：只需要uni.chooseImage就可以对图片进行上传操作。

在这里插入图片描述

将选中的图片统一放到一个数组中。(tempFilePaths:图片的本地文件路径列表)

在这里插入图片描述

然后将其选择的图片渲染到页面中。

在这里插入图片描述

（2）预览图片

uni.previewImage(OBJECT)

需要current和urls必须的。有了这两个就可以预览图片了。

urls：预览图片的列表。

下面的平台差异说明是指只有在该平台样式才生效。
在这里插入图片描述

current参数。代表要显示那个。

在这里插入图片描述

当有多个图片的时候，可以通过current:下标的方式，点击那个，那个让显示。
在这里插入图片描述

17.条件注释实现跨段兼容

在这里插入图片描述

只有该平台才可以看见：#indef

除了该平台，还有别的平台可以看到：#ifndef

结尾都是#endif

在这里插入图片描述

css中的条件注释：
在这里插入图片描述

18.导航跳转（navigaor标签，编程式导航跳转）

（1）navigator实现跳转（声明式跳转跳转）

页面跳转。该组件类似HTML中的a组件，但是只能跳转本地页面。目标页面必须在package.json中注册。

url:必须的。
在这里插入图片描述

在这里插入图片描述

open-type:跳转方式

navigate有返回箭头，redirect没有返回箭头了。redirect适合做封面登录页，但是大多不用。

在这里插入图片描述

（2）编程式导航跳转

uni.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用uni.navigateTo

uni.redirectTo:关闭当前页面，跳转到应用内的某个页面

uni.reLaunch:关闭所有页面，打开应用内的某个页面

uni.switchTab:跳转到tabBar页面，并关闭其他所有非tabBar页面。

uni.navigateBack:关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈，绝对需要返回几层。

在这里插入图片描述

（3）实现跳转传参

1.声明式传参：<navigator url="message3?id=1&name=xin" hover-class="active">

2.编程式传参：tiaozhuan(){
				uni.navigateTo({
					url:"./message3?id=1&name=xin"
				})
			},

19.组件的创建

和vue中创建组件是一样的。

（1）在components中新建组件目录，然后创建组件文件。

（2）在pages.json中，将页面添加配置好

（3）在要使用的页面中，script标签中：import 组件名称 from “组件路径（一般是这样…/…/）”

与methods同一级别添加components:{要使用的组件名：组件名} 这两个一般用es6语法直接写为组件民

（4）使用：直接在对应地方<组件名></组件名>

20.组件的声明周期

在这里插入图片描述

21.组件之间的通信

（1）父组件传值给子组件（props）

父组件v-bind传，子组件props接受，接受的名称，就是父组件传过来的。

子组件:被封装、被引入的组件叫子组件

父组件：引入该组件的文件，叫父组件

父组件中用v-bind传递数据。子组件中使用props进行接收。

父组件：

在这里插入图片描述

子组件：

在这里插入图片描述

带有方法，数据的。

（1）封装的子组件：用到父组件传递的shopList里面的数据
在这里插入图片描述

（2）父组件给子组件传递数据

在这里插入图片描述

（2）子组件传值给父组件（通过事件$emit）

1.子组件中定义事件，在methods中使用this.$emit(“用于父组件接受的名称”，向父组件传递的内容)。

在这里插入图片描述

2.父组件中通过子组件$emit传递的名称来接受。使用@来接受。@子组件传递的名称=“写一个函数”

在这里插入图片描述

（3）兄弟组件传值

需求：点击test1组件，改变test2的值。即test1向test2传值

所以;test1中用到this. $e m i t （ “ 传递的事件名称，用于 t e s t 2 接受） t 。 t e s t 2 中用到 u n i .$ on（”传递的事件名称）

test1中的：

在这里插入图片描述

test2中：
在这里插入图片描述

22.uni组件的使用。

有以下内容。

使用方式：点击要用的组件，点击使用HBuilderX导入插件。使用直接看下面使用方法即可，不用引用。

在这里插入图片描述

如图：直接引用。

在这里插入图片描述

23.项目实战

1.在index.vue中对开始操作，然后在pages.json中进行修改配置。

2.新建tabbar的有关页面。在pages中，点击新建页面，通过输入内容，会自动生成一个目录，及对应的vue文件，同时在pages.json中自动做了配置。

3.tabbar需要在pages.json中的tabbar中进行list的添加配置和选中文字颜色，默认文字颜色进行配置。（每个tab的图标）

4.实现首页轮播图。

html
在这里插入图片描述

css
在这里插入图片描述

data:

在这里插入图片描述

用到请求数据。首先把请求函数在onLoad中执行（项目初始化完成）。

通过接口中的status来判断是否请求成功，请求成功后将请求的数据赋值给data中的东西。当请求失败，使用uni.showToast来弹出一个窗口，来提示请求失败。样式大致为：一个黑色框中显示一个对号。
在这里插入图片描述

5.对请求数据request进行二次封装。

(1)新建util文件。创建api.js这里是请求数据的

将请求url分为两部分。前面域名和后面参数

const requestUrl = "https://api-hmugo-web.itheima.net/api/public/v1"  //请求地址
export const myRequest = (options)=>{
	return new Promise((resolve,reject)=>{
		// 开始请求
		uni.request({
			url:requestUrl+options.url,
			method:options.method || 'GET',
			data:options.data || {},
			success:res=> {  //接口请求成功
				if(res.data.status !==200){ //
					return uni.showToast({
						title:'获取数据失败'
					})
				}
				resolve(res)
			},
			fail:(err)=>{
				uni.showToast({
					title:'请求接口失败'
				})
				reject(err)
			}
		})
	})
}

(2)为了能够全局使用，需要在项目入口文件main.js中引入api.js文件。

在这里插入图片描述

(3)使用：
在这里插入图片描述

24.封装组件

（1）在common中新建文件目录，然后新建组件文件。

（2）在组件中添加对应的template，style，

（3）在要用组件的文件中，import 组件路径。同时在components中挂载组件名

（4）使用：直接在对应位置<组件民></组件民>即可。

（5）组件中要是有循环的话，name循环的数组需要谁用就把谁传过来。使用到props.父组件（调用组件的组件）用v-bind，子组件（声明组件的组件）用v-bind来接受。

以上5点就可以直接使用了，但是限制于没有数据的。

当组件有数据的请求，在哪用的，就在那个组件中来请求即可。
在这里插入图片描述

右侧的shopList是传过来的，左侧的shopList是子组件要用的。

25.使用uniapp的注意点：

（1）在项目中，页面里面都用绝对路径@/…

（2）写样式不要用id做样式，有可能出现名称冲突，也影响后期不好维护

（3）样式中不要抄蓝湖里的字体，都是识别的原文件字体包，浏览器解析不了，有的解析出来也不合适，默认字体就好了，不用设置字体。

（4）取消button的边框以及border-radius

在这里插入图片描述

26.实现高度100%

（1）在app.vue中
在这里插入图片描述

（2）在对应样式中

page代表body.
在这里插入图片描述

(3)设置的background-color在微信小程序中不生效，因为他是指的窗体背景颜色，而不是页面的背景颜色。

27.实现列表的下拉刷新加载。

页面主操作

</view>

28.实现tab切换

效果图;

在这里插入图片描述

html:

<scroll-view scroll-x="true" class="tab_Scroll_Main">
        <view class="tab_Control">
          <view class="tab_item" 
          :class="{active:TabCur == index}" 
          v-for="(item,index) in tab_Control" :key="index" 
          @click="tabSelect(index)">
            <view class="item_text">{{item.cur_text}}</view>
            <view class="item_nums" v-show="!item.cur_nums == 0">{{item.cur_nums}}</view>
          </view>
        </view>
      </scroll-view>

date与methods:

TabCur: 0,
        tab_Control: [
          {cur_text:"推荐",cur_nums: 0},
          {cur_text:"特色产品",cur_nums: 0},
          {cur_text:"农用物资",cur_nums: 0}
        ],
// 选项卡
      tabSelect(ind) {
        this.TabCur = ind;
      },

//css
.tab_Scroll_Main {
		background-color: #FFFFFF;
	}

	.tab_Scroll_Main .tab_Control {
		text-align: center;
		white-space: nowrap;
		border-bottom: 1px solid #F1F1F1;
	}

	.tab_Scroll_Main .tab_Control .tab_item {
		position: relative;
		display: inline-block;
		height: 94rpx;
		line-height: 94rpx;
		text-align: center;
		color: #333333;
		font-size: 30rpx;
		padding: 0 50rpx;
		white-space: nowrap;
	}

	.tab_Scroll_Main .tab_Control .tab_item.active {
		color: #23BE9F;
	}

	.tab_Scroll_Main .tab_Control .tab_item.active::after {
		content: '';
		display: block;
		width: 102rpx;
		height: 4rpx;
		background-color: #23BE9F;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}

	.tab_Scroll_Main .tab_Control .item_nums {
		position: absolute;
		top: 0;
		right: 30rpx;
		background-color: #FF3232;
		padding: 0 12rpx;
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		color: #FFFFFF;
	}

29.实现tab的切换。

效果图：

在这里插入图片描述

html

<view class="priceSell_nav">
				<button v-for="(item,index) in buttonArr" type="default"  @click="changeList(index)" :key="index" :class="{activeButton:TabCur2 == index}">{{item.id}}({{ item.sum }})</button>
			</view>

css

.priceSell_nav {
		padding: 24rpx 24rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;

		button {
			width: 218rpx;
			height: 74rpx;
			background: #F5F5F5;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
		}

		

		/deep/button:after {
			border: none;
		}
	}
.activeButton {
		color: #FFFFFF !important;
		background: #23BE9F !important;
	}

data
在这里插入图片描述

在这里插入图片描述

29。实现地图和拨打电话

地图：标签。

电话：uni.makePhoneCall({})
在这里插入图片描述

地图配置：

在这里插入图片描述

电话：

在这里插入图片描述

30.可滚动视图区域（scroll-view）

在这里插入图片描述

效果如下：
在这里插入图片描述

案例（1）左侧列表的写法

在这里插入图片描述

效果;点击对应列表添加类名
在这里插入图片描述

案例（2）请求数据;

在这里插入图片描述

案例（3）当右侧没有数据的时候，显示暂无数据。

在这里插入图片描述

案例（4）预览图片

在这里插入图片描述

31.display:flex

（1）display:flex中的flex-direction用于改变主轴的排列方向，默认是从左到右

在这里插入图片描述

（2）justify-content:规定元素水平轴的排列位置。

在这里插入图片描述

（3）align-items：垂直方向的排列

在这里插入图片描述

32.软件的使用踩坑点

（1）运行文件时出现：尚不支持此类文件

解决办法：点击对应文件根目录-》鼠标右键重新识别项目类型，就ok了

（2）less不自动编译问题

在less的配置文件中，将onDidSaveExecution改为true即可

33.写项目的注意点：

（1）页面布局问题：页面写好后要通过数据的添加，删除来测试页面的布局是否有问题，考虑到页面的不确定性以及数据方面的问题。

（2）一些类似于title的文字，一般都要考虑到文字超出，文字多，文字少的布局情况

（3）写好相应的注释，便于自己和他人阅读，观看，修改

（4）标签要合理的嵌套使用，属性使用要规范，虽然用别的属性可以达到效果，但是就是不符合规范

（5）蓝湖上下载切图时把切图压缩打开，下载的截图经过压缩，体积会更小，页面加载更快些

（6）将page的height去了，不要，防止页面内容都没盛满页面，就出现滚动。

（7）tui-steps（进度条）插件有问题，最好还是自己写吧

（8）不要用单个单词做类名，否则很容易冲突，尤其是单词比较短的

（9）页面中的一些细节问题及内容要仔细写。

（10）为了提高性能，一些带有背景图的图片少用，最好将背景图的颜色以背景色来写，

（11）uniapp中的button按钮，要记得去掉border。采用/deep/button:after{border:none}

(12)页面一般别给height,它的高度尽量让由内容来撑开

（13）看到设计图时候一些类似于input的要写成input,不能单纯的写成text

(14)样式中不要抄蓝湖中的字体，不要用id做样式，有可能出现名称冲突，也影响后期不好维护。

（15）页面中一般用绝对路径，防止页面位置的改变而

（16）在pages的path中别用到./不然会出错

（17）看到设计图有些内容会是底部固定内容，要注意看着点

快乐的二进制鸭

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
uniapp的完整学习（部分组件，api未涉及，用法大致差不多）

uniapp的学习1.介绍uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到ios,Android,H5,以及各种小程序（微信、支付宝、百度）等多个平台。2.踩坑点。第一次通过hbuildx运行微信小程序，需要将微信开发者工具里面安全中的服务端口打开。通过运行hbuildx，会自动运行到对应的软件中。3.目录结构[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d2s31XJo-1626857721539)(C:\Users\de
复制链接

扫一扫