分析uniapp入門之nvue爬坑記

更新時(shí)間：2021年06月04日 14:55:03 作者：啤酒煮雞蛋

uni-app的nvue說白了就是weex的那一套東西，uni-app集成了weex的 SDK，也就實(shí)現(xiàn)了App端的原生渲染能力。本文將介紹uniapp遇到的一些坑，分享給大家。

前言

uni-app 是 DCloud 出品的新一代跨端框架，可以說是目前跨端數(shù)最多的框架之一了，目前支持發(fā)布到：App（Android/iOS）、H5、小程序（微信小程序/支付寶小程序/百度小程序/字節(jié)跳動(dòng)小程序），目前市面上類似的框架還有：Taro（京東出品）、Megalo（網(wǎng)易出品）。

weex 支持的東西，在 nvue 里大多都是支持的，所以這里就不詳細(xì)講述 weex 的相關(guān)組件和 api 調(diào)用，只講述一些在實(shí)際開發(fā)過程中遇到的一些小問題。

Hello World

開始創(chuàng)建第一個(gè) nvue 頁(yè)面。

目錄結(jié)構(gòu)：

index.nvue 代碼如下：

<template>
	<div>
        <text>{{text}}</text>
    </div>
</template>
<script>
	export default {
		data() {
			return {
				text: 'Hello World'
			}
		}
	}
</script>

如此真機(jī)運(yùn)行可能遇到如下錯(cuò)誤：

造成這個(gè)問題的原因是 uni-app 項(xiàng)目里必須有一個(gè) vue 的頁(yè)面，新建一個(gè) vue 頁(yè)面然后重新運(yùn)行就不會(huì)有問題了。

image 設(shè)置 border-radius

在 nvue 里面不能給 image 設(shè)置 border-radius，想要將矩形圖案變?yōu)閳A形需要在 image 外面包一層 div，代碼如下：

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <image style="width: 400px;height: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image>
</div>

設(shè)置真實(shí)像素

在 weex 的規(guī)范里只有一個(gè)長(zhǎng)度單位即：px，屏幕總寬度為 750px，設(shè)置長(zhǎng)度后，weex 引擎會(huì)根據(jù)手機(jī)屏幕的寬度動(dòng)態(tài)計(jì)算出實(shí)際長(zhǎng)度，類似于 uni-app 的 upx。

但是在實(shí)際開發(fā)過程中可能不想要這樣動(dòng)態(tài)的長(zhǎng)度單位，此時(shí)可以使用 weex 1.x版本里面一個(gè)長(zhǎng)度單位：wx。這個(gè)單位就是實(shí)際像素單位，雖然 weex 文檔沒有提及，但目前任然是可用的，當(dāng)然隨著 weex 的更新，wx 也可能會(huì)不再支持。

引入外部的 css

在 App.vue 里寫的公用的樣式在 nvue 里是不生效，多個(gè) nvue 想要使用公用的樣式，需要引入外部的 css。

由于 weex 的限制，不能在 style 節(jié)點(diǎn)下使用 @import "xxx.css" 這樣的方式引入外部 css，需要使用如下方式引入 css：

<style src="@/common/test.css"></style>
<style>
   .test {
        color: #E96900;
   }
</style>

需要注意的是在 <style src="@/common/test.css"></style> 節(jié)點(diǎn)里寫樣式是不生效的。

使用 ttf 字體文件

在nvue或者weex中是不能直接在css中通過 @font-face 這樣的方式引入字體文件的，需要在js中使用 dom 模塊引入字體文件，可參考 weex文檔：

const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

vue 打開 nvue 時(shí)傳遞參數(shù)

由于 vue 打開 nvue 時(shí)不能在 url 后攜帶參數(shù)，只能使用 storage 的方式進(jìn)行參數(shù)傳遞。

在 vue 頁(yè)面打開 nvue

uni.setStorageSync('test', 'hello');
uni.navigateTo({
    url:"/pages/nvue/nvue"
})

在 nvue 頁(yè)面獲得參數(shù)，在 created 里調(diào)用 uni-app 的 api 時(shí)需要延時(shí)一段時(shí)間才能調(diào)用成功（最新版 uni-app 框架已經(jīng)修復(fù)此問題，不用延時(shí)也可以調(diào)用成功）。

<script>
    export default {
        created() {
        	console.log("nvue created!");
            setTimeout(() => {
                uni.getStorage({
                	key:'test',
                    success: (res) => {
                    	console.log("獲得上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)" + res.data)
                    }
                })
            },200)
        }
    }
</script>

仿微信朋友圈效果

在開發(fā)中，有個(gè)頁(yè)面需要做到如微信朋友圈那樣效果：整體列表為從上到下排列，每個(gè)列表為左右兩列，左邊為用戶頭像，右邊消息內(nèi)容。

在開發(fā)的時(shí)候，首先想到的是父元素使用 flex-direction: row; 讓頭像和內(nèi)容，分別在左右展示。但是出了問題，內(nèi)容區(qū)域的高度不能根據(jù)文字的長(zhǎng)度而撐開;如果父元素使用上下排列，內(nèi)容區(qū)域的高度就可以被文字所撐開。

出現(xiàn)問題的代碼如下：

<template>
    <div style="background-color: #ccc;">
        <div class="items">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>上下排列時(shí)候可以撐開內(nèi)容，上下排列時(shí)候可以撐開內(nèi)容，上下排列時(shí)候可以撐開內(nèi)容，上下排列時(shí)候可以撐開內(nèi)容，上下排列時(shí)候可以撐開內(nèi)容，上下排列時(shí)候可以撐開內(nèi)容，上下排列時(shí)候可以撐開內(nèi)容，上下排列時(shí)候可以撐開內(nèi)容，上下排列時(shí)候可以撐開內(nèi)容。</text>
            </div>
        </div>
        <div class="items" style="flex-direction: row;">
            <div class="headImg"></div>
            <div class="rgtBox" style="flex: 1;">
                <text>左右排列時(shí)候不可以撐開內(nèi)容，左右排列時(shí)候不可以撐開內(nèi)容，左右排列時(shí)候不可以撐開內(nèi)容，左右排列時(shí)候不可以撐開內(nèi)容，左右排列時(shí)候不可以撐開內(nèi)容，左右排列時(shí)候不可以撐開內(nèi)容，左右排列時(shí)候不可以撐開內(nèi)容，左右排列時(shí)候不可以撐開內(nèi)容，左右排列時(shí)候不可以撐開內(nèi)容</text>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
    }
</script>
<style>
    .items {
        background-color: #fff;
        margin-bottom: 50px;
    }
    .headImg {
        width: 100px;
        height: 100px;
        background-color: #555;
    }
    .rgtBox {
        background-color: #fff;
    }
</style>

出現(xiàn)這個(gè)問題應(yīng)該是 weex 的 bug，左邊元素設(shè)置高度后，右邊若不設(shè)置高度，其最大高度為左邊元素的高度。解決辦法就是將頭像和內(nèi)容均上下排列，然后設(shè)置內(nèi)容區(qū)域的 margin-left、margin-top 和 min-height 就能達(dá)到類似的效果。

代碼如下：

<template>
    <div style="background-color: #ccc;flex-direction: column;">
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>一段短文本，一段短文本</text>
            </div>
        </div>
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本，這里是一段長(zhǎng)文本</text>
            </div>
        </div>
    </div>
</template>

<script>
    export default {}
</script>
<style>
    .item {
        background-color: #fff;
        margin-bottom: 50px;
    }
    .headImg {
        width: 100px;
        height: 100px;
        background-color: #555;
    }
    .rgtBox {
        width: 600px;
        min-height: 100px;
        margin-left: 130px;
        margin-top: -100px; 
        background-color: #fff;
    }
</style>

以上就是分析uniapp入門之nvue爬坑記的詳細(xì)內(nèi)容，更多關(guān)于uniapp入門之nvue爬坑記的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: