Nvue/Weex

Use Uniapp made a App, feel not very good performance, to find out about Nvue Uniapp, you want to be a pure Nvue project, in fact, is to do a basic Weex project, have to say that the pit is really much, but really rendering performance can not compare
this project development environment for UNIAPP pure NVUE project, and WEEX there are differences
https://github.com/WindrunnerMax/SW

A, CSS selectors

1. Simple class selector

/** 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;
}

Second, the general style

1. flex layout

Each node is automatically set to flex, without displaying the statement again, and the flex is the only layout
The default flex longitudinal direction, different from the default Web, the need to manually declared lateral flex-direction: row;
Use align-items: center;justify-content: center;/* flex为横向为例 */performed centrally
Suggested Reading http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Use flex: 1;can be filled up to the parent container

2. text text

Display text must be in <text></text>use
color: #aaa;font-size: 15px;Other styles only <text></text>take effect in
color, font-size and other attributes inherited from the parent node is not supported, you must use the class or inline statement
Within the text label associated margin, padding style failure, use the class declaration

3. page page

Weex does not support the page selectors, there is no page style, page.json set backgroundColor also invalid
only turn to overtake the whole page color settings, but the results are not particularly good
note that this is Uniapp Nvue way of
addition, directly .page settings flex: 1, and class = "page" given root, the page can be expanded to full screen, but it can also lead to a page not scroll
official robot gives a better solution
in addition a pit, Nvue does not support global components, each components pages need to be introduced in a separate page

/** 首先声明 .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 Width

Weex for unit of length, and wx px support unit of length is not supported relative units (em, rem, pt,%)
Uniapp compilation mode, rpx dynamic unit 750 is a wide screen as a reference, px is a pixel unit fixed
750rpx is in Nvue of Uniapp full screen benchmarks are needed to compile mode Uniapp, compilation mode is different from the Weex
In addition to fixed-size pictures, etc., can be used directly flex complete layout, pay attention to the use offlex:1;

5. border border

/** border不支持简写 **/

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

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

6. display properties

Does not support the display property
You can not use the display: none; explicit to implicit control element
v-show conditions rendering is not in effect, instead of using the v-if

7. z-index level

It does not support the z-index set hierarchical relationship, but more Elemental rearward level, therefore, a high-level elements can be placed in the rearward position

8. background background

/** background不支持简写，简写在浏览器上颜色能够正常渲染，但是在手机端，颜色无法正常渲染 **/

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

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

9. padding, margin Margin

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

Third, the font icon

1. Ali Vector icon library

/** 以阿里矢量图标库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>

Fourth, internal components

1. image

width, height and src must be provided, otherwise the picture can not be rendered.
resize attribute determines the image scaling, allowing the value of the cover / contain / stretch, stretch default

2. webview

<web />Weex it is supported webview components to display HTML after loading is complete
<web-view />Uniapp components are supported webview, webview-styles attribute is not supported
The above-mentioned components must specify the width, height and src, otherwise it can not be displayed
It can be used flex: 1;to set the screen filled up
<web />Download blocked events and open other applications

Nvue/Weex

Nvue/Weex

A, CSS selectors

1. Simple class selector

Second, the general style

1. flex layout

2. text text

3. page page

4. width Width

5. border border

6. display properties

7. z-index level

8. background background

9. padding, margin Margin

Third, the font icon

1. Ali Vector icon library

Fourth, internal components

1. image

2. webview

Guess you like