Nvue / weex
Uso UniApp hizo una aplicación, no sentirse muy buen rendimiento, para averiguar sobre Nvue UniApp, que desea ser un proyecto Nvue pura, de hecho, es hacer un proyecto weex básica, tengo que decir que el pozo es realmente mucho, pero realmente el rendimiento del procesamiento no se puede comparar
este entorno de desarrollo de proyectos para el proyecto NVUE pura UniApp y weex hay diferencias
https://github.com/WindrunnerMax/SW
A, selectores CSS
1. selector de clase simple
/** 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;
}
En segundo lugar, el estilo general
1. Disposición flexión
- Cada nodo se ajusta automáticamente a la flexión, sin mostrar la declaración de nuevo, y la flexión es el único diseño
- El valor por defecto flexione dirección longitudinal, diferente de la Web predeterminado, la necesidad de manualmente declaró lateral
flex-direction: row; - Uso
align-items: center;justify-content: center;/* flex为横向为例 */realiza centralmente - Lecturas recomendadas http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- El uso
flex: 1;se puede llenar hasta el contenedor padre
2. Texto de texto
- texto de la pantalla debe estar en
<text></text>uso color: #aaa;font-size: 15px;Otros estilos solamente<text></text>entran en vigor en- color, tamaño de fuente y otros atributos heredados del nodo padre no es compatible, debe utilizar la clase o la declaración en línea
- Dentro de la etiqueta de texto margen asociado, el relleno de la insuficiencia estilo, utilizar la declaración de clase
3. página
Weex no soporta los selectores de página, no hay un estilo de página, juego page.json backgroundColor también inválida
su vez sólo para superar a toda la configuración de la página de color, pero los resultados no son particularmente buenos
nota que este es UniApp Nvue modo de
adición, ajustes directamente .página flex: 1, y class = "página" dada la raíz, la página se puede ampliar a pantalla completa, pero también puede conducir a una página no desplazarse
robot oficial da una mejor solución
, además de un pozo, Nvue no es compatible con componentes globales, cada una páginas componentes necesitan ser introducidos en una página separada
/** 首先声明 .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. anchura Anchura
- Weex para unidad de longitud, y la unidad de apoyo px wx de longitud no es compatible con unidades relativas (em, rem, pt,%)
- modo de compilación UniApp, unidad dinámica rpx 750 es una pantalla ancha como referencia, px es una unidad de pixel fijo
- 750rpx está en Nvue de puntos de referencia UniApp pantalla completa son necesarios para el modo de compilación UniApp, modo de compilación es diferente de la weex
- Además de imágenes de tamaño fijo, etc., se puede utilizar directamente diseño completo de la flexión, prestar atención a la utilización de
flex:1;
5. frontera frontera
/** border不支持简写 **/
/* 支持 */
.border{
border-style: solid;
border-color: #EEEEEE;
border-bottom-width: 1px;
}
/* 不支持 */
.border{
border: 1px solid #eee;
}
6. Propiedades de pantalla
- No es compatible con la propiedad de presentación
- No se puede usar el display: none; explícita al elemento de control implícito
- v-show condiciones representación no es, en efecto, en lugar de utilizar el v-si
nivel 7. z-index
- No es compatible con la relación jerárquica conjunto z-index, pero el nivel hacia atrás más Elemental, por lo tanto, una serie de elementos de alto nivel puede ser colocado en la posición hacia atrás
8. FONDO
/** background不支持简写，简写在浏览器上颜色能够正常渲染，但是在手机端，颜色无法正常渲染 **/
/* 支持 */
.backgroundT{
background-color: #F8F8F8;
}
/* 不支持 */
.backgroundT{
background: #F8F8F8;
}
9. relleno, Margen margen
/* 支持 */
padding: 1px;
padding: 1px 2px 3px 4px; /* class */
margin: 1px;
margin: 1px 2px 3px 4px; /* class */
En tercer lugar, el icono de fuente
biblioteca de iconos 1. Ali vectorial
/** 以阿里矢量图标库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;"></text>
En cuarto lugar, los componentes internos
1. imagen
- anchura, se deben proporcionar altura y src, de lo contrario la imagen puede no ser prestados.
- atributo de cambio de tamaño determina la escala de imagen, permitiendo que el valor de la cubierta / contener / estiramiento, estiramiento predeterminado
2. WebView
<web />Weex se apoya componentes WebView a HTML pantalla después de la carga está completa<web-view />UniApp componentes están soportados en vista web, no se admite WebView estilos de atributo- Los componentes antes mencionados deben especificar el ancho, la altura y src, de lo contrario no se puede visualizar
- Se puede utilizar
flex: 1;para establecer la pantalla se llenó <web />Descarga bloqueada eventos y otras aplicaciones abiertas