Nvue/Weex

使用Uniapp做了一個App，感覺性能不是很好，了解過Uniapp的Nvue，就想做一個純Nvue項目，其實基本就是做一個Weex項目，不得不說坑是真的多，但是渲染性能真的是沒得比
本項目開發環境為 UNIAPP 的 純NVUE 項目，與WEEX有不同之處
https://github.com/WindrunnerMax/SW

一、 CSS選擇器

1. 簡單類選擇器

/** Weex僅支持簡單類選擇器，不支持標簽選擇器以及子選擇器 **/

/* 支持 */
.test{
	padding: 10px;
	font-size: 15px;
	background-color: #F8F8F8;
}

.test , .test2{
	padding: 10px;
	font-size: 15px;
	background-color: #F8F8F8;
}
	
	
/* 不支持 */
a{
	padding: 10px;
	font-size: 15px;
	background-color: #F8F8F8;
}
.test .test2{
	padding: 10px;
	font-size: 15px;
	background-color: #F8F8F8;
}

二、通用樣式

1. flex 布局

• 每個節點自動設置為flex，無需再次顯示聲明，且flex為唯一布局方式
• flex默認方向為縱向，與Web默認不同，需手動聲明為橫向 flex-direction: row;
• 使用align-items: center;justify-content: center;/* flex為橫向為例 */進行居中
• 建議閱讀http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
• 使用 flex: 1;可以將父容器填充滿

2. text 文字

• 顯示文字必須在<text></text>中使用
• color: #aaa;font-size: 15px;等樣式僅在<text></text>中生效
• color、font-size等屬性不支持從父節點繼承，必須使用class或者內聯聲明
• text標簽中內聯 margin、padding 樣式失效，需使用class聲明

3. page 頁面

Weex不支持page選擇器，也沒有page樣式，page.json中設置backgroundColor也無效
只能彎道超車設置整體頁面顏色，但是效果並不是特別好
注意這是Uniapp的Nvue方式
此外，直接在 .page 設置 flex:1 ， 並將 class="page" 賦予根節點，可以將頁面擴充至滿屏，但也會導致頁面無法滾動
官方機器人給予了更好的解決方案
此外一個坑，Nvue不支持全局組件，每個頁面需要的組件必須在頁面單獨引入

/** 首先聲明 .page 類 **/
.page{
	font-family: Arial,, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
	padding: 10px;
	font-size: 15px;
	background-color: #F8F8F8;
}

<template>
	<view>
		<view class="page" ref="box"> <!-- 聲明page與容器塊，注意ref -->
			<!-- 頁面內容 -->
		</view>
		<view style="background-color: #F8F8F8;" :style="pageFill"></view> <!-- 填充塊 -->
	</view>
</template>

// 獲取頁面已使用高度，將填充塊高度設置為屏幕高度-已使用容器高度
const app = getApp()
const dom = weex.requireModule('dom');
export default {
	data() {
		return {
			pageFill: {
				width: "750rpx",
				height: "0rpx"
			}
		}
	},
	onReady: function() {
		this.resize(); // 調用resize調整填充塊大小
		var that = this;
		// uni.requests 中 success 可以調用 that.$nextTick(() => { that.resize() })
	},
	methods: {
		resize: function() {
			const that = this;
			const result = dom.getComponentRect(this.$refs.box, option => {
				that.pageFill.height = (uni.getSystemInfoSync().windowHeight - option.size.height) + 'px';
				console.log(uni.getSystemInfoSync().windowHeight, option.size.height);
			})
		},
	}
}

<!-- 使用flex:1;的情況，可以設置全屏頁面，但這樣頁面將無法滾動 -->
<!-- 頁面中 -->
<template>
	<view class="page">
		
		<!-- 節點內容 -->
		
	</view>
</template>

<!-- App.vue -->
<style>
.page{
	font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
	padding: 10px;
	font-size: 15px;
	flex: 1;
	background-color: #F8F8F8;
}
</style>

<!-- 官方的方法，偶然看到官方群機器人的回復 -->
<template>
	<view class="page" style="flex:1;">
		<scroll-view scroll-y="true">
			<view>
				<!-- 頁面內容 -->
			</view>
		</scroll-view>
	</view>
</template>

<!-- 封裝個組件 -->
<template name="scrollpage">
	<view class="scrollPage">
		<scroll-view scroll-y="true">
			<view class="scrollRootView">
				<slot></slot>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "scrollpage",
		data() {
			return {};
		}
	}
</script>

<style>
	.scrollPage{
		font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
		font-size: 15px;
		background-color: #F8F8F8;
		flex: 1;
	}
	.scrollRootView{
		padding: 10px;
	}
</style>

4. width 寬度

• Weex 針對長度單位，支持 px 和 wx 作為長度單位，不支持相對單位（em，rem，pt，%）
• Uniapp編譯模式，rpx是以750寬屏幕為基准的動態單位，px則是固定像素單位
• 750rpx是Uniapp中Nvue的滿屏基准，是需要編譯模式為Uniapp，區別於Weex編譯模式
• 除了固定大小的圖片等，直接使用 flex 就可以完成布局，注意使用flex:1;

5. border 邊框

/** border不支持簡寫 **/

/* 支持 */
.border{
	border-style: solid;
	border-color: #EEEEEE;
	border-bottom-width: 1px;
}

/* 不支持 */
.border{
	border: 1px solid #eee;
}

6. display 屬性

• 不支持 display 屬性
• 不能使用 display:none; 來控制元素的顯隱性
• v-show 條件渲染是不生效的，使用 v-if 代替

7. z-index 層級

• 不支持 z-index 進行層級關系的設定，但是靠后的元素層級更高，因此，可以將層級高的元素放在靠后的位置

8. background 背景

/** background不支持簡寫，簡寫在瀏覽器上顏色能夠正常渲染，但是在手機端，顏色無法正常渲染 **/

/* 支持 */
.backgroundT{
	background-color: #F8F8F8;
}

/* 不支持 */
.backgroundT{
	background: #F8F8F8;
}

9. padding、margin 邊距

/* 支持 */
padding: 1px;
padding: 1px 2px 3px 4px; /* class */
margin: 1px;
margin: 1px 2px 3px 4px; /* class */

三、字體圖標

1. 阿里矢量圖標庫

/** 以阿里矢量圖標庫iconfont為例引入字體圖標 **/
/** 只需要在首頁引入一次即可全部頁面使用 **/

/* App.vue */
.iconfont{
	font-family: iconfont;
}

// 應用首頁引入
const dom = weex.requireModule('dom');
dom.addRule('fontFace', {
	'fontFamily': 'iconfont',
	'src': "url('https://at.alicdn.com/t/font_1582902_mwrjy69s3lm.ttf')"
})

<!-- 顯示圖標 -->
<text class='iconfont' style="color: #FF6347;">&#xe601;</text>

四、內部組件

1. image

• width, height 和 src必須被提供，否則圖片無法渲染。
• resize屬性決定圖片縮放，允許值cover / contain / stretch，默認stretch

2. webview

• <web />是weex支持的webview組件，加載完成后顯示HTML
• <web-view />是uniapp支持的webview組件，webview-styles屬性不支持
• 上述組件都必須指定width, height 和 src，否則無法顯示
• 可以使用 flex: 1; 來設置填充滿屏幕
• <web />阻斷了下載與打開其他應用事件