uniapp 学集 （第二章）nvue、组件

写在前面：分享技术，共同进步，有不足请见谅，相关意见可评论告知 ~

有道无术，术尚可求；
有术无道，终止于术!

多端运行，架式简化；
编程路漫，学无止尽！

介绍

uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。(native vue的缩写)

在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

区别

官方文档引址

视图容器

官方文档参考

视图容器（view）

视图容器，类似于html中的 div，用来包裹各种元素内容。

如果使用nvue，需要注意不能用该组件包裹文字，否则文字样式将不生效。

如果使用 <div> 标签，编译时会被转换为 <view> ，但是不建议使用div

代码演示

<template>
	<view>
		<view>我是view</view>
		<view class="view-container">
			<view   hover-class="click-view">1</view>
			<view   hover-class="click-view">2</view>
			<view   hover-class="click-view">3</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.view-container {
	 750rpx;
	height: 300rpx;
	background-color: #007AFF;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.view-item {
	 200rpx;
	height: 200rpx;
	background-color: #F0AD4E;
}
.click-view {
	background-color: #DD524D;
}
</style>

可滚动视图（scroll-view）

可滚动视图区域，用于区域滚动。

该组件性能较差，建议只用于导航栏横向滚动场景，竖向滚动请不要使用。

代码演示

<template>
	<view>
		<scroll-view scroll-x="true" >
			<view class="scroll-container">
				<view class="scroll-item">首页</view>
				<view class="scroll-item">Java</view>
				<view class="scroll-item">数据结构</view>
				<view class="scroll-item">Vue</view>
				<view class="scroll-item">PHP</view>
				<view class="scroll-item">C++</view>
				<view class="scroll-item">Golang</view>
				<view class="scroll-item">MySQL</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.scroll-container {
	 750rpx;
	white-space: nowrap;
}

.scroll-item {
	display: inline-block;
	 150rpx;
	margin-right: 20rpx;
	background-color: #007AFF;
}
</style>

滑块视图（swiper）

一般用于左右滑动或上下滑动，比如banner轮播图。

注意：动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。(不存在中间态)

swiper-item 是swiper组件的子组件，只能用到swiper中，只有一个 item-id 属性，标识一个 swiper-item 的唯一性

快捷键：uswi + 回车

<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item1">1</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item2">2</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item3">3</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.swiper-item1 {
	background-color: #007AFF;
	height: 300rpx;
}
.swiper-item2 {
	background-color: #4CD964;
	height: 300rpx;
}
.swiper-item3 {
	background-color: #F0AD4E;
	height: 300rpx;
}
</style>

可拖动区域（movable）

movable-area

movable-area 指代可拖动的范围，在其中内嵌 movable-view 组件用于指示可拖动的区域。

即手指/鼠标按住 movable-view 拖动或双指缩放，但拖不出 movable-area 规定的范围。

movable-area 必须设置 width 和 height 属性，不设置默认为 10px

movable-area app-nvue平台 暂不支持手势缩放，并且和滚动冲突。

movable-view

可移动的视图容器，在页面中可以拖拽滑动或双指缩放。

movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

movable-view 必须设置width和height属性，不设置默认为10px

movable-view 默认为绝对定位，top和left属性为0px

当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

代码演示

<template>
	<view>
		<movable-area class="movable-area">
			<movable-view direction="all" inertia="true"   scale="true">
				拖我
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.movable-area {
	 750rpx;
	height: 400rpx;
	background-color: #007AFF;
}
.movable-view {
	 200rpx;
	height: 200rpx;
	background-color: #4CD964;
}
</style>

官方文档

图标（icon）

代码演示

<template>
	<view>
		<view v-for="item in icons" :key="item">
			<icon :type="item"></icon>
			<text>{{item}}</text>
		</view>
		<view class="">
			以下是iconfont
		</view>
		<text class="icon success">&#xe600;</text>
		<text class="icon info">&#xe60f;</text>
		<text class="icon warning">&#xe658;</text>
		<text class="icon danger">&#xe6e6;</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icons: [
					"success", "success_no_circle", "info", "warn", "waiting", "cancel", "download", "search", "clear"
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
/* 以下配置最好在App.vue中设置 */
@font-face {
      font-family: 'iconfont';  /* project id 2032489 */
      src: url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.eot');
      src: url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.eot?#iefix') format('embedded-opentype'),
      url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.woff2') format('woff2'),
      url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.woff') format('woff'),
      url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.ttf') format('truetype'),
      url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.svg#iconfont') format('svg');
 }

.icon {
    font-family: iconfont;
    margin-left: 20rpx;
}
.success {
	color: #4CD964;
}
.info {
	color: #999999;
}
.warning {
	color: #F0AD4E;
}

.danger {
	color: #DD524D;
}
</style>

使用iconfont

uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

• 支持 base64 格式字体图标。

• 支持网络路径字体图标。

• 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3编译模式起支持直接使用本地背景图和字体。

• 网络路径必须加协议头 https。

• 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。

• 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫iconfont，安装字体文件时可以看到），在nvue内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。

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

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

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

  @font-face {
       font-family: 'iconfont';
       src: url('https://...') format('truetype');
   }
  
  .icon {
      font-family: iconfont;
      margin-left: 20rpx;
  }
  
  <text class="icon">&#xe600;</text>
  

nvue中不可直接使用css的方式引入字体文件，需要使用以下方式在js内引入。nvue内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "iconfont",
  'src': "url('https://...')"
})

文本组件（text）

用于包裹文本。

• <text> 组件内只支持嵌套 <text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。
• 在app-nvue下，只有<text>才能包裹文本内容。无法在<view>组件包裹文本。
• 除了文本节点以外的其他节点都无法长按选中。
• 支持 方式换行。
• 如果使用 <span> 组件编译时会被转换为 <text>。

官方文档

地图组件的经纬度必填，如果不填经纬度则默认值是北京的经纬度。

小程序和app-vue中，map组件是由引擎创建的原生组件，级别最高，无法使用z-index设置层级。如果想有在map上显式的元素，可以使用marker、controls设置，也可以使用 cover-view 组件

APP端地图组件使用的时候需要上高德或者百度等三方服务商申请地图SDK资质，获取AppKey，打包时在mainfest勾选相应的模块，填写AppKey。

代码演示

<template>
	<view>
		<map :polyline="polyline" :markers="markers"   :latitude="39.56" :longitude="117.30"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [ // 标记点
					{
						id: 1,
						latitude: 39.56,
						longitude: 117.30
					},
					{
						id: 2,
						latitude: 40.56,
						longitude: 118.30
					},
					{
						id: 3,
						latitude: 39.86,
						longitude: 119.30
					}
				],
				polyline: [ // 路线，每条线是一个对象里包含一个坐标点数组，地图中可以有多条线
					{
						color: "#a55310",
						points: [
							{
								latitude: 39.56,
								longitude: 117.30
							},
							{
								latitude: 40.56,
								longitude: 118.30
							},
							{
								latitude: 39.86,
								longitude: 119.30
							}
						]
					},
					{
						color: "#3b64a5",
						points: [
							{
								latitude: 42.56,
								longitude: 127.30
							},
							{
								latitude: 42.56,
								longitude: 128.30
							},
							{
								latitude: 42.86,
								longitude: 129.30
							}
						]
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.mymap {
	 750rpx;
}
</style>

官方文档参考

扫码组件（Barcode）

app-nvue专用的扫码组件，其他端请使用扫码API uni.scanCode

组件方法

以下方法是组件内部的方法，需要通过 this.$refs 去调用

开始扫码——start(object)

取消扫码——cancel()

字面意思

操作闪光灯——setFlash(boolean)

组件事件

识别成功——marked(e)

识别错误——error(e)

代码演示

<template>
	<view>
		<barcode autostart="true"   ref="barcode" @marked="success" @error="error"></barcode>
		<button type="default" @click="barcode">点我扫码</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			success(e) {
				console.log("扫码成功", e)
				this.$refs.barcode.cancel()
			},
			error(e) {
				console.log("扫码失败", e)
				this.$refs.barcode.cancel()
			},
			barcode() {
				this.$refs.barcode.start({
					vibrate: true,
					sound: true
				})
			}
		}
	}
</script>

<style>
.barcode {
	 750rpx;
	height: 500rpx;
}
</style>