這篇文章主要介紹“怎么在uniapp中使用nvue”，在日常操作中，相信很多人在怎么在uniapp中使用nvue問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在uniapp中使用nvue”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

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

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

index.nvue 代碼如下：

<template>
	<div>
<text>{{text}}</text>
</div>
</template>
<script>
	exportdefault{
		data(){
			return{
				text:'HelloWorld'
			}
		}
	}
</script>

如此真機運行可能遇到如下錯誤：

造成這個問題的原因是 uni-app 項目里必須有一個 vue 的頁面，新建一個 vue 頁面然后重新運行就不會有問題了。

image 設(shè)置 border-radius

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

<div>
<imagesrc="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image>
</div>

設(shè)置真實像素

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

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

引入外部的 css

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

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

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

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

使用 ttf 字體文件

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

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

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

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

在 vue 頁面打開 nvue

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

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

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

仿微信朋友圈效果

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

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

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

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

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

代碼如下：

<template>
<div>
<divclass="item">
<divclass="headImg"></div>
<divclass="rgtBox">
<text>一段短文本，一段短文本</text>
</div>
</div>
<divclass="item">
<divclass="headImg"></div>
<divclass="rgtBox">
<text>這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本，這里是一段長文本</text>
</div>
</div>
</div>
</template>

<script>
exportdefault{}
</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>

總結(jié)

以上是生活随笔為你收集整理的怎么在uniapp中使用nvue的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。