Nvue/Weex
Nvue/Weex
使用Uniapp做了一個(gè)App，感覺性能不是很好，了解過Uniapp的Nvue，就想做一個(gè)純Nvue項(xiàng)目，其實(shí)基本就是做一個(gè)Weex項(xiàng)目，不得不說坑是真的多，但是渲染性能真的是沒得比
本項(xiàng)目開發(fā)環(huán)境為 UNIAPP 的 純NVUE 項(xiàng)目，與WEEX有不同之處
https://github.com/WindrunnerMax/SW
一、 CSS選擇器
1. 簡單類選擇器
/** Weex僅支持簡單類選擇器，不支持標(biāo)簽選擇器以及子選擇器 **/
/* 支持 */
.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 布局
每個(gè)節(jié)點(diǎn)自動(dòng)設(shè)置為flex，無需再次顯示聲明，且flex為唯一布局方式
flex默認(rèn)方向?yàn)榭v向，與Web默認(rèn)不同，需手動(dòng)聲明為橫向 flex-direction: row;
使用align-items: center;justify-content: center;/* flex為橫向?yàn)槔?*/進(jìn)行居中
建議閱讀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等屬性不支持從父節(jié)點(diǎn)繼承，必須使用class或者內(nèi)聯(lián)聲明
text標(biāo)簽中內(nèi)聯(lián) margin、padding 樣式失效，需使用class聲明
3. page 頁面
Weex不支持page選擇器，也沒有page樣式，page.json中設(shè)置backgroundColor也無效
只能彎道超車設(shè)置整體頁面顏色，但是效果并不是特別好
注意這是Uniapp的Nvue方式
此外，直接在 .page 設(shè)置 flex:1 ， 并將 class="page" 賦予根節(jié)點(diǎn)，可以將頁面擴(kuò)充至滿屏，但也會(huì)導(dǎo)致頁面無法滾動(dòng)
官方機(jī)器人給予了更好的解決方案
此外一個(gè)坑，Nvue不支持全局組件，每個(gè)頁面需要的組件必須在頁面單獨(dú)引入
/** 首先聲明 .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 -->
<!-- 頁面內(nèi)容 -->
</view>
<view :style="pageFill"></view> <!-- 填充塊 -->
</view>
</template>
// 獲取頁面已使用高度，將填充塊高度設(shè)置為屏幕高度-已使用容器高度
const app = getApp()
const dom = weex.requireModule('dom');
export default {
data() {
return {
pageFill: {
"750rpx",
height: "0rpx"
}
}
},
onReady: function() {
this.resize(); // 調(diào)用resize調(diào)整填充塊大小
var that = this;
// uni.requests 中 success 可以調(diào)用 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;的情況，可以設(shè)置全屏頁面，但這樣頁面將無法滾動(dòng) -->
<!-- 頁面中 -->
<template>
<view class="page">
<!-- 節(jié)點(diǎn)內(nèi)容 -->
</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>
<!-- 官方的方法，偶然看到官方群機(jī)器人的回復(fù) -->
<template>
<view class="page">
<scroll-view scroll-y="true">
<view>
<!-- 頁面內(nèi)容 -->
</view>
</scroll-view>
</view>
</template>
<!-- 封裝個(gè)組件 -->
<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 針對(duì)長度單位，支持 px 和 wx 作為長度單位，不支持相對(duì)單位（em，rem，pt，%）
Uniapp編譯模式，rpx是以750寬屏幕為基準(zhǔn)的動(dòng)態(tài)單位，px則是固定像素單位
750rpx是Uniapp中Nvue的滿屏基準(zhǔn)，是需要編譯模式為Uniapp，區(qū)別于Weex編譯模式
除了固定大小的圖片等，直接使用 flex 就可以完成布局，注意使用flex:1;
5. border 邊框
/** border不支持簡寫 **/
/* 支持 */
.border{
border-style: solid;
border-color: #EEEEEE;
border-bottom- 1px;
}
/* 不支持 */
.border{
border: 1px solid #eee;
}
6. display 屬性
不支持 display 屬性
不能使用 display:none; 來控制元素的顯隱性
v-show 條件渲染是不生效的，使用 v-if 代替
7. z-index 層級(jí)
不支持 z-index 進(jìn)行層級(jí)關(guān)系的設(shè)定，但是靠后的元素層級(jí)更高，因此，可以將層級(jí)高的元素放在靠后的位置
8. background 背景
/** background不支持簡寫，簡寫在瀏覽器上顏色能夠正常渲染，但是在手機(jī)端，顏色無法正常渲染 **/
/* 支持 */
.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 */
三、字體圖標(biāo)
1. 阿里矢量圖標(biāo)庫
/** 以阿里矢量圖標(biāo)庫iconfont為例引入字體圖標(biāo) **/
/** 只需要在首頁引入一次即可全部頁面使用 **/
/* App.vue */
.iconfont{
font-family: iconfont;
}
// 應(yīng)用首頁引入
const dom = weex.requireModule('dom');
dom.addRule('fontFace', {
'fontFamily': 'iconfont',
'src': "url('https://at.alicdn.com/t/font_1582902_mwrjy69s3lm.ttf')"
})
<!-- 顯示圖標(biāo) -->
<text class='iconfont'></text>
四、內(nèi)部組件
1. image
width, height 和 src必須被提供，否則圖片無法渲染。
resize屬性決定圖片縮放，允許值cover / contain / stretch，默認(rèn)stretch
2. webview
<web />是weex支持的webview組件，加載完成后顯示HTML
<web-view />是uniapp支持的webview組件，webview-styles屬性不支持
上述組件都必須指定width, height 和 src，否則無法顯示
可以使用 flex: 1; 來設(shè)置填充滿屏幕
<web />阻斷了下載與打開其他應(yīng)用事件
總結(jié)
- 上一篇： 三极管导通条件
- 下一篇： Spark启动程序：Master