uniapp 學集（第二章）nvue、組件

本文轉載自查看原文 2020-10-03 21:43 787 前端

寫在前面：分享技術，共同進步，有不足請見諒，相關意見可評論告知 ~

有道無術，術尚可求；
有術無道，終止於術!

多端運行，架式簡化；
編程路漫，學無止盡！

NVUE
- 介紹
- 區別
組件
- 視圖容器
基礎內容
地圖
小程序開放能力
AppNvue專用組件
- 掃碼組件（Barcode）
- 組件方法
  - 組件事件
    - 識別成功——marked(e)
    - 識別錯誤——error(e)

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，需要注意不能用該組件包裹文字，否則文字樣式將不生效。

屬性名	類型	默認值	說明
hover-class	String	none	指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果
hover-stop-propagation	Boolean	false	指定是否阻止本節點的祖先節點出現點擊態 (冒泡)
hover-start-time	Number	50	按住后多久出現點擊態，單位毫秒
hover-stay-time	Number	400	手指松開后點擊態保留時間，單位毫秒

如果使用 <div> 標簽，編譯時會被轉換為 <view> ，但是不建議使用div

代碼演示

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

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

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

可滾動視圖（scroll-view）

可滾動視圖區域，用於區域滾動。

該組件性能較差，建議只用於導航欄橫向滾動場景，豎向滾動請不要使用。

屬性名	類型	默認值	說明
scroll-x	Boolean	false	允許橫向滾動
scroll-y	Boolean	false	允許縱向滾動
upper-threshold	Number	50	距頂部/左邊多遠時（單位px），觸發 scrolltoupper 事件
lower-threshold	Number	50	距底部/右邊多遠時（單位px），觸發 scrolltolower 事件
scroll-top	Number		設置豎向滾動條位置
scroll-left	Number		設置橫向滾動條位置
scroll-into-view	String		值應為某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素
@scrolltoupper	EventHandle		滾動到頂部/左邊，會觸發 scrolltoupper 事件
@scrolltolower	EventHandle		滾動到底部/右邊，會觸發 scrolltolower 事件
@scroll	EventHandle		滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

代碼演示

<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 {
	width: 750rpx;
	white-space: nowrap;
}

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

滑塊視圖（swiper）

一般用於左右滑動或上下滑動，比如banner輪播圖。

注意：動切換和滾動的區別，滑動切換是一屏一屏的切換。swiper下的每個swiper-item是一個滑動切換區域，不能停留在2個滑動區域之間。(不存在中間態)

swiper-item 是swiper組件的子組件，只能用到swiper中，只有一個 item-id 屬性，標識一個 swiper-item 的唯一性

屬性名	類型	默認值	說明	平台差異說明
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色
indicator-active-color	Color	#000000	當前選中的指示點顏色
active-class	String		swiper-item 可見時的 class	支付寶小程序
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在滑塊的 index
current-item-id	String		當前所在滑塊的 item-id ，不能與 current 被同時指定	支付寶小程序不支持
interval	Number	5000	自動切換時間間隔
duration	Number	500	滑動動畫時長	app-nvue不支持
circular	Boolean	false	是否采用銜接滑動，即播放到末尾后重新回到開頭
vertical	Boolean	false	滑動方向是否為縱向
previous-margin	String	0px	前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值	app-nvue、字節跳動小程序不支持
next-margin	String	0px	后邊距，可用於露出后一項的一小部分，接受 px 和 rpx 值	app-nvue、字節跳動小程序不支持
display-multiple-items	Number	1	同時顯示的滑塊數量	app-nvue、支付寶小程序不支持
@change	EventHandle		current 改變時會觸發 change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置發生改變時會觸發 transition 事件，event.detail = {dx: dx, dy: dy}，支付寶小程序暫不支持dx, dy	App、H5、微信小程序、支付寶小程序、字節跳動小程序、QQ小程序
@animationfinish	EventHandle		動畫結束時會觸發 animationfinish 事件，event.detail = {current: current, source: source}	字節跳動小程序不支持

快捷鍵：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 規定的范圍。

屬性名	類型	默認值	說明
scale-area	Boolean	false	當里面的 movable-view 設置為支持雙指縮放時，設置此值可將縮放手勢生效區域修改為整個 movable-area

movable-area 必須設置 width 和 height 屬性，不設置默認為 10px

movable-area app-nvue平台暫不支持手勢縮放，並且和滾動沖突。

movable-view

可移動的視圖容器，在頁面中可以拖拽滑動或雙指縮放。

movable-view必須在movable-area組件中，並且必須是直接子節點，否則不能移動。

屬性名	類型	默認值	說明	平台差異說明
direction	String	none	movable-view的移動方向，屬性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否帶有慣性	微信小程序、支付寶小程序、App、H5、百度小程序
out-of-bounds	Boolean	false	超過可移動區域后，movable-view是否還可以移動	微信小程序、支付寶小程序、App、H5、百度小程序
x	Number / String		定義x軸方向的偏移，如果x的值不在可移動范圍內，會自動移動到可移動范圍；改變x的值會觸發動畫
y	Number / String		定義y軸方向的偏移，如果y的值不在可移動范圍內，會自動移動到可移動范圍；改變y的值會觸發動畫
damping	Number	20	阻尼系數，用於控制x或y改變時的動畫和過界回彈的動畫，值越大移動越快	微信小程序、支付寶小程序、App、H5、百度小程序
friction	Number	2	摩擦系數，用於控制慣性滑動的動畫，值越大摩擦力越大，滑動越快停止；必須大於0，否則會被設置成默認值	微信小程序、支付寶小程序、App、H5、百度小程序
disabled	Boolean	false	是否禁用
scale	Boolean	false	是否支持雙指縮放，默認縮放手勢生效區域是在movable-view內	微信小程序、支付寶小程序、App、H5
scale-min	Number	0.5	定義縮放倍數最小值	微信小程序、支付寶小程序、App、H5
scale-max	Number	10	定義縮放倍數最大值	微信小程序、支付寶小程序、App、H5
scale-value	Number	1	定義縮放倍數，取值范圍為 0.5 - 10	微信小程序、支付寶小程序、App、H5
animation	Boolean	true	是否使用動畫	微信小程序、支付寶小程序、App、H5、百度小程序
@change	EventHandle		拖動過程中觸發的事件，event.detail = {x: x, y: y, source: source}，其中source表示產生移動的原因，值可為touch（拖動）、touch-out-of-bounds（超出移動范圍）、out-of-bounds（超出移動范圍后的回彈）、friction（慣性）和空字符串（setData）
@scale	EventHandle		縮放過程中觸發的事件，event.detail = {x: x, y: y, scale: scale}，	微信小程序、App、H5、百度小程序

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" class="movable-view" scale="true">
				拖我
			</movable-view>
		</movable-area>
	</view>
</template>

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

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

基礎內容

官方文檔

圖標（icon）

屬性名	類型	默認值	說明
type	String		icon的類型
size	Number	23	icon的大小，單位px
color	Color		icon的顏色，同css的color

代碼演示

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

用於包裹文本。

屬性名	類型	默認值	說明	平台差異說明
selectable	Boolean	false	文本是否可選

<text> 組件內只支持嵌套 <text>，不支持其它組件或自定義組件，否則會引發在不同平台的渲染差異。

在app-nvue下，只有<text>才能包裹文本內容。無法在<view>組件包裹文本。

除了文本節點以外的其他節點都無法長按選中。

支持 \n 方式換行。

如果使用 <span> 組件編譯時會被轉換為 <text>。

地圖

官方文檔

屬性名	類型	默認值	說明	平台差異說明
longitude	Number		中心經度
latitude	Number		中心緯度
scale	Number	16	縮放級別，取值范圍為5-18
markers	Array		標記點
polyline	Array		路線
circles	Array		圓
controls	Array		控件
include-points	Array		縮放視野以包含所有給定的坐標點	App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付寶小程序
enable-3D	Boolean	false	是否顯示3D樓塊	App-nvue 2.1.5+、微信小程序2.3.0
show-compass	Boolean	false	是否顯示指南針	App-nvue 2.1.5+、微信小程序2.3.0
enable-overlooking	Boolean	false	是否開啟俯視	App-nvue 2.1.5+、微信小程序2.3.0
enable-satellite	Boolean	false	是否開啟衛星圖	App-nvue 2.1.5+、微信小程序2.7.0
enable-traffic	Boolean	false	是否開啟實時路況	App-nvue 2.1.5+、微信小程序2.7.0
show-location	Boolean		顯示帶有方向的當前定位點	微信小程序、H5、百度小程序、支付寶小程序
polygons	Array.`<polygon>`		多邊形	App-nvue 2.1.5+、微信小程序、百度小程序、支付寶小程序
@markertap	EventHandle		點擊標記點時觸發，e.detail = {markerId}	App-nvue 2.3.3+, App平台需要指定 marker 對象屬性 id
@labeltap	EventHandle		點擊label時觸發，e.detail = {markerId}	微信小程序2.9.0
@callouttap	EventHandle		點擊標記點對應的氣泡時觸發，e.detail = {markerId}
@controltap	EventHandle		點擊控件時觸發，e.detail = {controlId}
@regionchange	EventHandle		視野發生變化時觸發	微信小程序、H5、百度小程序、支付寶小程序
@tap	EventHandle		點擊地圖時觸發; App-nuve、微信小程序2.9支持返回經緯度
@updated	EventHandle		在地圖渲染更新完成時觸發	微信小程序、H5、百度小程序

地圖組件的經緯度必填，如果不填經緯度則默認值是北京的經緯度。

小程序和app-vue中，map組件是由引擎創建的原生組件，級別最高，無法使用z-index設置層級。如果想有在map上顯式的元素，可以使用marker、controls設置，也可以使用 cover-view 組件

APP端地圖組件使用的時候需要上高德或者百度等三方服務商申請地圖SDK資質，獲取AppKey，打包時在mainfest勾選相應的模塊，填寫AppKey。

代碼演示

<template>
	<view>
		<map :polyline="polyline" :markers="markers" class="mymap" :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 {
	width: 750rpx;
}
</style>

小程序開放能力

官方文檔參考

AppNvue專用組件

掃碼組件（Barcode）

app-nvue專用的掃碼組件，其他端請使用掃碼API uni.scanCode

屬性	類型	默認值	必填	說明
autostart	boolean	false	否	是否自動開始掃碼
background	string		否	條碼識別控件背景顏色,顏色值支持(參考CSS顏色規范)：顏色名稱(參考CSS Color Names)/十六進制值/rgb值，默認值為黑色。
frameColor	string		否	掃碼框顏色,顏色值支持(參考CSS顏色規范)：顏色名稱(參考CSS Color Names)/十六進制值/rgb值/rgba值，默認值為紅色。
scanbarColor	string		否	掃碼條顏色,顏色值支持(參考CSS顏色規范)：顏色名稱(參考CSS Color Names)/十六進制值/rgb值/rgba值，默認值為紅色。
filters	Array[Number]	[0,1,2]	否	條碼類型過濾器，條碼類型常量數組，默認情況支持QR、EAN13、EAN8類型。通過此參數可設置掃碼識別支持的條碼類型（注意：設置支持的條碼類型越多，掃描識別速度可能將會降低）。

組件方法

以下方法是組件內部的方法，需要通過 this.$refs 去調用

開始掃碼——start(object)

屬性	說明	類型	必填	備注
conserve	是否保存掃碼成功時的截圖	Boolean	否	如果設置為true則在掃碼成功時將圖片保存，並通過onmarked回調函數的file參數返回保存文件的路徑。默認值為false，不保存截圖。
filename	保存掃碼成功時圖片保存路徑	String	否	可通過此參數設置保存截圖的路徑和名稱，如果設置圖片文件名稱則必須指定文件的后綴名（必須是.png），否則認為是指定目錄，文件名稱則自動生成。
vibrate	掃碼成功時是否需要震動提醒	Boolean	否	如果設置為true則在掃碼成功時震動設備，false則不震動。默認值為true。
sound	掃碼成功時播放的提示音	String	否	可取值： "none" - 不播放提示音； "default" - 播放默認提示音（5+引擎內置）。默認值為"default"。

取消掃碼——cancel()

字面意思

操作閃光燈——setFlash(boolean)

類型	必填	說明	備注
Boolean	是	是否開啟閃光燈	可取值true或false，true表示打開閃光燈，false表示關閉閃光燈。

組件事件

識別成功——marked(e)

參數	類型	說明
type	string	"success" 表示成功
message	string	識別到的條碼數據，掃碼識別出的數據內容，字符串類型，采用UTF8編碼格式。
code	Number	識別到的條碼類型，與Barcode組件的條碼類型常量一致。
file	string	掃碼成功的截圖文件路徑，掃碼識別到的截圖，png格式文件，如果設置為不保存截圖，則返回undefined。

識別錯誤——error(e)

參數	類型	說明
type	string	"fail" 表示失敗
code	number	相應 code 碼
message	string	失敗描述

代碼演示

<template>
	<view>
		<barcode autostart="true" class="barcode" 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 {
	width: 750rpx;
	height: 500rpx;
}
</style>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【統計學】第二章管理經濟學之第二章(供求分析) 第二章坐標系，運動學和地球第二章 Spring MVC入門 —— 跟開濤學SpringMVC 第二章第二章習題二第二章-1、打開鏈接第二章課后習題 Shiro第二章Authentication [DeeplearningAI筆記]第二章1.1-1.3偏差/方差/欠擬合/過擬合/訓練集/驗證集/測試集

uniapp 學集 （第二章）nvue、組件

NVUE

介紹

區別

組件

視圖容器

視圖容器（view）

可滾動視圖（scroll-view）

滑塊視圖（swiper）

可拖動區域（movable）

movable-area

movable-view

基礎內容

圖標（icon）

使用iconfont

文本組件（text）

地圖

小程序開放能力

AppNvue專用組件

掃碼組件（Barcode）

組件方法

開始掃碼——start(object)

取消掃碼——cancel()

操作閃光燈——setFlash(boolean)

組件事件

識別成功——marked(e)

識別錯誤——error(e)

免責聲明！

uniapp 學集（第二章）nvue、組件