[JavaScript知识库]uni-app学习

学习要求

核心内容：

1. 掌握 uniapp 的路由配置
2. 掌握将 uniapp 项目运行在微信开发者工具或者手机上的方法
3. 掌握 uniapp 的生命周期
4. 掌握 uniapp 组件的使用

最终任务：

模拟实现一个跨平台项目

一、什么是uni-app

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

即使不跨端，uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验，可快速上手uni-app。

相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

uni-app官网

二、环境搭建

1、安装编辑器HbuilderX【网站】
2、安装微信开发者工具 【网站】
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化；下载App开发版，可开箱即用。

三、初始化项目

点击HbuilderX菜单栏文件>项目>新建

选择uni-app,填写项目名称，项目创建的目录

注意：这里创建的是个项目不是目录，目录后边用到；一个项目有很多目录。随后可以运行，导航栏可以选择运行到不同的平台上，注意如果第一次运行到”微信小程序“需要配置微信小程序的路径；路径到启动项的上级文件夹。

3.1、介绍项目目录及作用

1. pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
2. manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
3. App.vue是我们的根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
4. main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
5. uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
6. unpackage就是打包目录，在这里有各个平台的打包文件。
7. pages所有的页面存放目录。
8. static静态资源目录，例如图片等。
9. components组件存放目录。

3.2、开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

1. 页面文件遵循 Vue 单文件组件 (SFC) 规范
2. 组件标签靠近小程序规范，详见uni-app 组件规范
3. 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
4. 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
5. 为兼容多端运行，建议使用flex布局进行开发

3.3、全局配置和页面配置

全局配置在pages.json 里边，3.1中提到的文件都可以在uni-app官网查到很详细的文件配置项目和说明。
全局配置

3.4创建新的message页面

右键pages新建message目录，在message目录下右键新建vue文件,并选择基本模板。

四、全局配置项目索引（基于课程）

pages.json配置的项目：

1. 页面的路径path；每在pages里新建的页面都要在这里进行路径的补充。

2. 通过style修改页面的标题和导航栏背景色。

3. 通过globalStyle来设置默认页面的窗口表现。

4. 通过tabBar来配置底部导航栏。

   属性	类型	必填	默认值	描述	平台差异说明
   color	HexColor	是		tab 上的文字默认颜色
   selectedColor	HexColor	是		tab 上的文字选中时的颜色
   backgroundColor	HexColor	是		tab 的背景色
   borderStyle	String	否	black	tabbar 上边框的颜色，可选值 black/white	App 2.3.4+ 支持其他颜色值、H5 3.0.0+
   blurEffect	String	否	none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）	App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）
   list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
   position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持
   fontSize	String	否	10px	文字默认大小	App 2.3.4+、H5 3.0.0+
   iconWidth	String	否	24px	图标默认宽度（高度等比例缩放）	App 2.3.4+、H5 3.0.0+
   spacing	String	否	3px	图标和文字的间距	App 2.3.4+、H5 3.0.0+
   height	String	否	50px	tabBar 默认高度	App 2.3.4+、H5 3.0.0+
   midButton	Object	否		中间按钮 仅在 list 项为偶数时有效	App 2.3.4+、H5 3.0.0+

   其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

   属性	类型	必填	说明
   pagePath	String	是	页面路径，必须在 pages 中先定义
   text	String	是	tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
   iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
   selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效

   midButton 属性说明

   属性	类型	必填	默认值	描述
   width	String	否	80px	中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度
   height	String	否	50px	中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果
   text	String	否		中间按钮的文字
   iconPath	String	否		中间按钮的图片路径
   iconWidth	String	否	24px	图片宽度（高度等比例缩放）
   backgroundImage	String	否		中间按钮的背景图片路径

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

   属性说明：

   属性	类型	是否必填	描述
   current	Number	是	当前激活的模式，list节点的索引值
   list	Array	是	启动模式列表

   list说明：

   属性	类型	是否必填	描述
   name	String	是	启动模式名称
   path	String	是	启动页面路径
   query	String	否	启动参数，可在页面的 onLoad 函数里获得

6. 具体见uni-app官网-框架。

五、组件的使用索引（基于课程）

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用。

uni-app官网-组件

5.1 text组件的使用

space 值说明

<tempiate>
	<!-- 根组件 -->
    <view>
         <view>
              <text>来了老弟</text>
          </view>
          <view>
              <text >来了老弟</text>
          </view>
    </view>    													 
</tempiate>

如果是一个view中放两个text的效果就是两个text同行显示；放在两个view中就是两行独占显示；并且两个view需要一个根组件。

<view>
	<text selectable='true'>来了老弟</text>
	<!-- ture后边不用加分号 selectable='true可以选中-->
	<text selectable='true' space='ensp' style="font-size:30px;">来了  老弟</text>      
	<!-- 长按文本是否可选;中文字符空格一半大小;字符大小30px -->
</view>

5.2 view组件的使用

视图容器。

它类似于传统html中的div，用于包裹各种元素内容。

如果使用nvue，则需注意，包裹文字应该使用组件。

属性说明

<template>
	<view class="outbox" hover-class="outbox-active">
	   <view class="box" hover-class="box-active" hover-stop-propagation="true" hover-start-time="2000" hover-stay-time="2000">
		我是一个盒子
		</view>
	</view>    
<!-- 绑定叫box的样式；按下去的样式；阻止父节点出现点击态；按住后多久出现点击态，单位毫秒；手指松开后点击态保留时间 -->
</template>
<style>
	.box{
		width: 100px;
		height: 100px;
		background: green;
	}
	.box-active{
		width: 100px;
		height: 100px;
		background: red;
	}
	.outbox{
		width: 200px;
		height: 200px;
		background: blue;
	}
	.outbox-active{
		width: 200px;
		height: 200px;
		background: pink;
	}
</style>

注意这里的两个view是嵌套的，所以200* 200的区域是包裹住100* 100的区域的。

效果：100*100的绿色区域被 200 *200的蓝色区域包裹住，然后点击内层两秒后变成红色，再过两秒红色变回绿色，外层不变；点击外层同理。

5.3 button按钮

• 注1：button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
• open-type="launchApp"时需要调起的APP接入微信OpenSDK详见

size 有效值

type 有效值

button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个。

<button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>

button组件后续还有介绍，很多接口。

5.4 image组件

mode 有效值：

mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。

插入图像的组件，image·组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度.

src可以支持线上网址；注意：线上的网址结尾是图片的格式，并不是网页，复制过来的应该是图片的地址！

<view>
	<image src="../../static/121.jpg"></image>
</view>

<view>
	<image src="https://scpic.chinaz.net/files/pic/pic9/202104/hpic3876.jpg"></image>
</view>

六、uni-app中的样式

6.1 rpx自适应单位

详见uni-app官网-框架简介-页面布局与样式-尺寸单位

rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大；也可以用在文字上。

<template>
	<view>
		<view class="newbox">样式学习</view>	
	</view>
</template>
<style>
	.newbox{
		width: 375rpx;
		height: 375rpx;
		background: #FFC0CB;
		color: #4CD964;
		font-size: 50rpx;
	}
</style>

这里的375就是750基准的一半，实际显示过程中根据屏幕尺寸显示屏幕的一半。

6.2 @import

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

<template>
	<view>
		<view>nishiwo</view> 
		<view class="newbox">样式学习</view>	
		<view>1213241</view>
	</view>
</template>
<style>
	@import url("./style.css");
	.newbox{
		width: 375rpx;
		height: 750rpx;
		background: #FFC0CB;
		color: #4CD964;
		font-size: 50rpx;
	}
</style>

注意以上代码，除了“样式学习”绑定了class样式，其他两行文字没有绑定，就全都用了css文件的样式。

6.3 全局样式与局部样式

官网-介绍-框架简介-页面样式与布局-全局样式与局部样式

定义在App.vue中的样式为全局样式，作用于每一个页面。在 pages 目录下 的vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue 中相同的选择器。

选择器种类可以看uni-app官网-框架简介-页面布局与样式-选择器。

意思就是在app.vue中写的.class类会被页面中.vue文件的.class类覆盖掉；这里的class类名要一样。

app.vue 中代码

<style>
	.newbox{
		background:blue ;
	}
</style>

某一页面中的vue

<style>
	.newbox{
		width: 375rpx;
		height: 750rpx;
		background: #FFC0CB;
		color: #4CD964;
		font-size: 50rpx;
	}
</style>

以上代码类名相同为newbox，这时页面的会覆盖整体的；如果把页面中的background注释掉，那么整体的蓝色background会生效，并且页面中的newbox类的其他属性一样生效！如果类名不同那么就无法覆盖。

app.vue补充的是其他页面的相同类名中的相同设置项！可以理解为App.vue是全部页面vue文件的整体设置。

并且，在app.vue中添加好的样式什么的，不在具体的页面上引用的话，也不会显示。它的作用就是先放在整体的vue中之后就可以在各个页面vue进行引用了。

6.4 字体图标的使用

官网-介绍-框架简介-页面样式与布局-字体图标

字体图标简单的说，就是一种特殊的字体，通过这种字体，显示给用户的就像一个个图片一样，字体图标最大的好处，在于它不会变形和加载速度快。字体图标可以像文字一样，随意通过CSS来控制它的大小和颜色。

使用本地路径图标字体需注意：

1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64格式；

2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；

3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

@font-face {font-family: "iconfont";
  src: url('~@/static/fonts/iconfont.eot?t=1564622062967'); /* IE9 */
  src: url('~@/static/fonts/iconfont.eot?t=1564622062967#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO8AAsAAAAAB7gAAANwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDFIJnATYCJAMMCwgABCAFhG0HRBu7BhHVm7fIvjygx7TMFStNxenSq2WP9X36CU2F1n7OILuqenpuT4CejMCIWLwzI9wAAIfc/KJHSDDiwLwECAjNz7GGbjAZSrO2GfqMqjBMSTzvp2W2tykp/XlwTf3/beJ5NptLVFNEYSTgBAfUjVU44A1kgr5h7IKWuB0IAAnosEKCQqKSIAYWZj8CgFSVl+ZDLKMG25BMIAYCTsVUFmQOIhBjxpl7AGaD75PPcEgMYCBCYQ6NKwkugt87k88TtE/YhywPAWc6IwA2C6AArAAsQHIqzWmgkc8KhYQqZpujOWBBwEzlFAoDtibkWH94AAMCEA7MRCkAgBlSMrgojkMDBvg87lVzHq43BwALoBfAISxXGvpixk0N8dqVDUL6VS8JHFdVV0/r7pqsqPD5KVxu0pLSAfWzxsvKZ3nuy0DfmhKXq6Z8kMebFAhMVTf4KdEy+nu4U3yD/YJUcpXvcDFlZ7+lgJ+Ax0s+elZr64zRGa5XZ8nKhFLRUt/ypGois31fUvrcU0Lj+Rut9hdJkP3OkoePqlemn/1R5G53+aU6Rr/NJ/VN0zd1JRra20tQiu4u8UbdW9PdahbDHkYB6dO35RKlf5zNkWy1P9awViTdy5mxGb5hreFYrplHaIP8RJyGHNe0ASnkNGJG+tSm+wKzU6wUgvr+Lje8s9KDbmwsyg0WiNVPXI8KCsjog9tjbSUlyi0tJa3K3/3r2JtL1xic3CNvaWbXovxNJdBra4V55G73Xhp5AAAhOkeRgy4y/3/Wb7Ds3WmVK+t1MVgAwPNmfwtsQiy6+8XAAIzzazgdK1iNZ2ooq7AdtmGlyBpoZADI5BL8kFQAUPBmuFUZEiOBGOdAYCAKbaAQgxHKEqxABJJwAg7E4AsSsBQ6WxKKGkBBWHEAFoYBEMg5DQxkcA0o5NxHWcJrEIGKr8CBXBQkkEIUl5SU2SbBWXGD5Qd+5Z1snZow+Yr2lWZJ8wLiE+X0TmirJh+84I4yxYjzbTtVAhLOMIDdMCWGQzjgqpVTPfq6pqorVSvnwkhwVtzA8gN+5Z28+moKn7+ifaVZGnKq9E+U0zcOWpWmA3oR751ybmWf8207qgRIOIMBGDFZPgZHdaeAq1bcAM/Rq1Et6iqulpfmF8hiBZjZNIZQwoJLDxv/bt6tM4bN+4bfknxKRQE=') format('woff2'),
  url('~@/static/fonts/iconfont.woff?t=1564622062967') format('woff'),
  url('~@/static/fonts/iconfont.ttf?t=1564622062967') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/static/fonts/iconfont.svg?t=1564622062967#iconfont') format('svg'); /* iOS 4.1- */
}

使用方法：先把本地的字体图标文件添加到项目中，再更改字体图标的css文件里边的路径为~@形式；然后可以在页面定义class类别引用图标了。

<template>
	<view>
		<view class="iconfont icon-tupian"></view>
	</view>
</template>
<style>
	@import url("../../static/fontpicture/iconfont.css"); 
</style>

或者是在app.vue中总体载入。

<style>
	/*每个页面公共css */
	 @import url("./static/fontpicture/iconfont.css");
</style>

导入字体图标的文件进项目

iconfont组件中的四个字体图标及名字。

6.5 使用scss全局变量

官网-介绍-框架简介-页面样式与布局-全局样式与局部样式

使用的是uni.scss文件，uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

在使用lang="scss"之前要安装scss插件；在工具中的插件安装。

页面的vue文件中

<template>
	<view>
		<view class="newbox">样式学习
		<text>新学习</text>
		</view>	
		<view>1213241</view>
	</view>
</template>
//这里引用scss全局样式文件
<style lang="scss"> 
     //这里是引用外部css样式                  
	@import url("./style.css"); 
	.newbox{
		width: 375rpx;
		height: 750rpx;
		background: $uni-color-primary;            			  //使用了预置的颜色变量
		color: #4CD964;
		font-size: 50rpx;
		text{
			color:pink;  //注意这里的text是在newbox样式下的，可以单独给text设置样式
			//不单独设置text的颜色，默认使用的是color: #4CD964;
		}   
	}
</style>

以上代码background使用了uni.scss的预置变量，颜色变量可在uni.scss文件中查看。

6.6 数据绑定{{}}的用法

官网-介绍-vue教程-基础-模板语法-插值

<template>
	<view>
		<view>  {{msg}}   msg  </view>            <!-- Hello Vue  msg -->
		<view>数据的拼接：{{number+'我是谁'}}</view>  <!-- 1我是谁 -->
		<view>三目运算：{{flag?'我是真':'我是假'}}</view>  <!-- 结果是  我是真 -->
		<view>运算{{1+2}}</view> <!-- 结果为 3 -->
	</view>
</template>
<script>
	 export default {
	        data() {
	            return {
	                msg: 'Hello Vue!',
					flag:true,
					number:1
	            }
	        }
	    }
</script>

{{msg}}里的内容将会被替代为对应数据对象上msg的值。无论何时，绑定的数据对象上msg发生了改变，插值处的内容都会更新。

6.7 v-bind v-for v-on指令

v-bind：官网-介绍-vue教程-基础-模板语法-指令

v-for：官网-介绍-vue教程-基础-列表渲染

v-on：官网-介绍-vue教程-基础-模板语法-指令

6.7.1 v-bind指令

v-bind 是可以动态的绑定一个或者多个属性。

<template>
	<view>
		<image src="path"></image>   <!-- v-bind:src="path" -->  <!-- :src="path"  -->
	</view>
</template> 
<script>
	 export default {
	        data() {
	            return {
					path:"https://scpic.chinaz.net/files/pic/pic9/202104/hpic3876.jpg",
	            }
	        }
	    }
</script>

上述代码，显示的时候path并不会被解析成网址，只是一个字符串；加上v-bind才会被解析成网址。

v-bind的缩写:，以上注释的两种写法都可。

6.7.2 v-for指令

v-for 指令可以实现基于一个数组来渲染一个列表。

<template>
	<view>
		<view v-for="(item,index) in array">
			默认索引：{{index}},姓名：{{item.name}},年龄：{{item.age}},序号：{{item.number}}
		</view>
	</view>
</template>
<script>
	 export default {
	        data() {
	            return {
					array:[
						{
							name:"宋小宝",
							age:"18",
							number:1
						},
						{
							name:"小沈阳",
							age:22,
							number:2
						},
						{
							name:"赵四",
							age:33,
							number:3
						}
					]
	            }
	        }
	    }
</script>

以上item就是对象，item in array指的是数组中的对象。效果如下图所示：

6.7.3 v-on指令

v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称为 @事件

<template>
	<view>
		<button @click="clickhandle(25,$event)">我是个绑定了点击事件的按钮</button>
	</view>
</template>
<script>
	 export default {
	        data() {
	            return {
	            }
	        },
			methods:{
				clickhandle(number,e){
					console.log('点击我了',number,e)
				}
			}
		}
</script>

console.log是打印的意思，在页面的调试中可以看到。以上代码用v-on指令为按钮绑定了点击事件，同时此事件clickhandle传回参数，一个是25，另一个是 事件对象

七、生命周期

官网-框架-框架接口-生命周期

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

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

生命周期分app的和页面的，app的在App.vue中设置，页面的在页面vue中设置。

应用生命周期

uni-app 支持如下应用生命周期函数：

注意

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

• onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

  App.vue中：

页面生命周期

uni-app 支持如下页面生命周期函数：

八、下拉刷新

uni官网-API-界面-下拉刷新

曾经在pages.json中的globalStyle定义过**“enablePullDownRefresh”:true**，这是全局的所有页面都可以进行下拉的刷新。

在uni-app中有两种方式开启下拉刷新

1. 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh，页面的下拉刷新

2. 通过调用uni.startPullDownRefresh方法来开启下拉刷新

   uni.startPullDownRefresh(OBJECT)

   开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

   OBJECT 参数说明

   参数名	类型	必填	说明
   success	Function	否	接口调用成功的回调
   fail	Function	否	接口调用失败的回调函数
   complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

   success 返回参数说明

   参数	类型	说明
   errMsg	String	接口调用结果

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

4. uni.startPullDownRefresh(OBJECT):开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

5. uni.stopPullDownRefresh():停止当前页面下拉刷新。（https://uniapp.dcloud.io/api/ui/pulldown?id=stoppulldownrefresh）

<template>
	<view>
		<view v-for="item in array">
			{{item}}
		</view>
		<button @click="refresh">刷新按钮</button>
	</view>
</template>
<script>
	export default{
		data(){
			return {
				array:['1','2','3','4','1','2','3','4']
			}
		},
		onPullDownRefresh() {
			console.log('监听到下拉刷新了'),
			setTimeout( ()=>{ 
				this.array = ['4','3','2','1'],
				uni.stopPullDownRefresh()},2000
			)
		},
    	methods:{
			refresh(){
				uni.startPullDownRefresh()
			}
		}
	
	}     
</script>
<style>
</style>

延迟：setTimeout( ()=>{ },2000)

8.2上拉加载

官网-框架-框架接口-生命周期

<template>
	<view>
		<view class="ibox" v-for="item in array">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return {
				array:['1','2','3','4','1','2','3','4']
			}
		},
		onReachBottom() {
			console.log("触底了"),
			this.array = [...this.array,...['45','99','77','96']]   <!-- 加载的数组就是原数组的基础上新加的 --> 
		},		
	}
</script>
<style>
	.ibox{
		height: 100px;
		line-height: 600px;
	}
</style>

九、发起网络请求

官网-API-网络-发起请求

本地请求步骤：

1. 打开phpstudy启动

2. 在D:\SKK\uniapp黑马教程\uniapp\素材\heima_shop_server 路径下启动windows powershell

3. 运行node ./src/app.js

4. 得到地址

5. 在浏览器输入地址 localhost:8082/api/getlunbo

   <template>
   	<view>
   		<button @click="get">发送get请求</button>
   		<view class="ibox" v-for="item in array">
   			{{item}}
   		</view>
   	</view>
   </template>
   <script>
       methods:{
   		get(){
   			uni.request({
   				url:"http://localhost:8082/api/getlunbo",
   				success(rrr) {
   					console.log(rrr)
   				}
   			})
   		}
   	}
   	
   }
   </script>
   

十、数据缓存

官网-API-数据缓存

<template>
	<view>
		<button @click="set">存储数据</button>
		<button @click="getdata">获取数据</button>
		<button @click="remove">删除数据</button>
	</view>
</template>
<script>
	export default{
		methods:{
			set(){
				uni.setStorage({
					key:"id",
					data:100
				}) <!-- uni.setStorageSync("id",100)--> 
			},
			getdata(){
				uni.getStorage({
					key:"id",
					success(ew){
						console.log(ew.data)
					}
				})
			},
			remove(){
				uni.removeStorage({
					key:"id",
					success() {
						console.log('删除成功')
					}
				})
			}
		}
      }
</script>

一般用同步的更简略：uni.setStorageSync(KEY,DATA)

十一、图片上传及预览

uni-api-媒体-图片

思路：图片的上传利用uni.chooseImage函数，并且返回一个图片的地址数组，我们用个空的数组去接收这个地址数组，然后利用image组件进行动态显示出来，最后预览用uni.previewImage函数，注意预览的是点击的那个图片，那么应该在点击事件发生时传回一个参数，这个参数就是点击的图片的地址。

<template>
	<view>
		<button @click="setup">图片上传</button>
		<image :src="item" v-for="item in array" @click="preview(item)"></image> 
	</view> <!-- 注意这里是动态的绑定地址，冒号 -->   <!-- 点击时传回一个当前点击的图片的地址的参数 -->
</template>
<script>
	export default{
		data(){
			return{
				array:[]       /* 准备一个空数组进行保存图片地址数组 */
			}
		},
		methods:{
			setup(){
				uni.chooseImage({
					count:5,
					success:res=>{
						this.array = res.tempFilePaths     /* 注意这个数组更新的写法 */
					}
				})
			},
			preview(current){/* 这里预览的是点击的图片,需要点击的时候传递回来图片的地址 */
				uni.previewImage({
					current:'current',  /* 键名和值一样,可以简写成 current, */
					urls:this.array /* 这个是预览的图片组的地址,可以在预览的时候滑动预览其他图片 */
				})
			}
		}
	}
</script>
<style>
</style>

图片描述

十二、差别编译，页面的跳转及参数传递

一、差别编译

uni-介绍-条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

1. #ifdef：if defined 仅在某平台存在

2. #ifndef：if not defined 除了某平台均存在

3. %PLATFORM%：平台名称

%PLATFORM% 可取值如下：

例子：

<template>
	<view>
		<!-- #ifdef H5 -->
		<view>H5</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view>微信小程序</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default{
		onLoad(){
			// #ifdef H5
			console.log("H5");
			// #endif
			// #ifdef MP-WEIXIN
			console.log("微信小程序");
			// #endif
		}
	}
</script>

<style>
</style>

二、页面跳转

页面的跳转分两种方式：一是用组件的方式navigator，二是用API函数跳转。

1. uni-组件-页面路由与跳转-navigator

   属性说明

   属性名	类型	默认值	说明	平台差异说明
   url	String		应用内的跳转链接，值为相对路径或绝对路径，如："…/first/first"，"/pages/first/first"，注意不能加 .vue 后缀
   open-type	String	navigate	跳转方式
   delta	Number		当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
   animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
   animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
   hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
   hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	微信小程序
   hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
   hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
   target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

   open-type 有效值

   值	说明	平台差异说明
   navigate	对应 uni.navigateTo 的功能
   redirect	对应 uni.redirectTo 的功能
   switchTab	对应 uni.switchTab 的功能
   reLaunch	对应 uni.reLaunch 的功能	字节跳动小程序不支持
   navigateBack	对应 uni.navigateBack 的功能
   exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

2. uni-API-路由与页面跳转

   注意，组件一般都是在template结构体里边写，api函数在script里边写

<template>
	<view>
		<navigator url="../list/list?id=你好&age=23">跳转至普通页面</navigator>
        <!-- 不关闭页面，可以返回 -->
		<navigator url="../list/list" open-type="redirect">跳转至普通页面</navigator>
        <!-- 关闭页面,不可以返回（没有返回箭头） -->
		<navigator url="../index/index" open-type="switchTab">跳转到tablebar页面</navigator>
		<!-- 跳转的页面区分类型，需要设置打开的类型 -->
		<button @click="jump">跳转至普通页面</button>
		<button @click="jump1">跳转到tablebar页面</button>
	</view>
</template>
<script>
	export default{
		methods:{
			jump(){
				uni.navigateTo({
					url:"../list/list"
				})
			},
			jump1(){
				uni.switchTab({
					url:"../index/index"
				})
			}
		}
	}
</script>
<style>
</style>

list页面

<script>
	export default{
		onLoad(data) {
			console.log(data)
		}
	}
</script>

数据的传递在url地址后边加上？引导即可，多数据用&并列，参数的接收在跳转的页面内用onload接收，页面生命周期里边的函数。

十三、组件的创建使用和组件的生命周期函数

1、组件的创建使用：uni-组件-组件概述

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。例如 /components/uni-rate/uni-rate.vue

如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：

1. import导入组件 script下import newtext from’…/…/components/newtext.vue’

2. components里注册组件script下的export default下components: { newtext:newtext }

3. template中使用组件

<template>
	<view class="container">
		<test></test>
	</view>
</template>

<script>
	import test from "../../components/test"
	export default {
		components:{
			test
		}
	}
</script>

<style>
</style>

2、组件的生命周期函数：uni-框架-框架接口-生命周期-组件生命周期

可以利用组件生命周期函数进行数据初始化获取数据等操作。

<template>
	<view class="content">
		<test v-if="flag"></test>
		<button type="primary" @click="checkTest">切换test组件</button>
		这是子组件传递过来的数据{{num}}
	</view>
</template>

<script>
	import test from '../../components/test.vue'
	export default {
		data() {
			return {
				num: 0,
				flag: true
			}
		},
		methods: {
			checkTest () {
				this.flag = !this.flag
			}
		},
		components: {
			test
		}
	}
</script>

<style>
</style>

十四、组件之间的参数传递

14.1 父组件向子组件传值

传数据通过属性绑定传递，接收通过props接收。

以下的例子，jump中引用了newtext组件，所以前者为父组件后者为子组件。

在父组件中绑定一个属性，动态绑定才能解析成值，非字符串。

<template>
	<view>
		<newtext v-if="flag" :data221="data1"></newtext>
</template>

在子组件中用props接收到，并且能在父组件显示出来，data1=555。

<template>
	<view>
		zheshinewtext{{data221}}
	</view>
</template>
<script>
	export default {
		name:"newtext",
		data() {
			return {
				};
	},
	props:['data221']
}
</script>

14.2 子组件向父组件传值

通过注册自定义事件实现。

uni-框架-框架接口-页面通讯

在子组件中定义一个事件叫myeven

<template>
	<view>
		这是test组件
		这是父组件传递过来的值{{title}}
		<button @click="setNum">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				num:3
			};
		},
		props:['title'],//接收父组件传递过来的title值
		methods:{
			setNum(){
				this.$emit("myEven",this.num);//传递给父组件num值
			}
		}
	}
</script>

<style>

</style>

在父组件中调用的子组件上绑定这个自定义事件并且调用的函数，定义函数体并且显示，实现点击按钮一次就将子组件传过来的值进行相加运算。

<template>
	<view class="container">
		<test :title="title" @myEven="getNum"></test>
		这是子组件传来的值:{{num}}
	</view>
</template>

<script>
	import test from "../../components/test"
	export default {
		components:{
			test
		},
		data() {
			return {
				title:"呜呜呜",
				num:0
			}
		},
		methods: {
			getNum(num){
				this.num=num;
			}
		}
	}
</script>

<style>
</style>

3 兄弟组件之间传值

通过a1给b1组件改值

a1组件：

<template>
	<view>
		<button @click="setNum">修改b组件的数据</button>
	</view>
</template>

<script>
	export default {
		name:"a",
		data() {
			return {
				
			};
		},
		methods:{
			setNum(){
				uni.$emit("updateNum",10);
			}
		}
	}
</script>

<style>

</style>

b1组件：

<template>
	<view>
		这是b组件的数据：{{num}}
	</view>
</template>

<script>
	export default {
		name:"b",
		data() {
			return {
				num:0
			};
		},
		created(){
			uni.$on("updateNum",num=>{
				this.num+=num;
			})
		}
	}
</script>

<style>

</style>

如果按钮中的文字太长会导致按钮不显示，并且保存编译要每个文件都保存才可以，在某个文件保存，其余文件不执行保存的操作。