uni-app 入門之 nvue (weex) 爬坑記

啤酒煮雞蛋發表於2019-02-22

前言

uni-app 是 DCloud 出品的新一代跨端框架,可以說是目前跨端數最多的框架之一了,目前支援釋出到:App(Android/iOS)、H5、小程式(微信小程式/支付寶小程式/百度小程式/位元組跳動小程式),目前市面上類似的框架還有:Taro(京東出品)、Megalo(網易出品)。

uni-app 的 nvue 說白了就是 weex 的那一套東西,uni-app 整合了 weex 的 SDK,也就實現了 App 端的原生渲染能力。

weex 支援的東西,在 nvue 裡大多都是支援的,所以這裡就不詳細講述 weex 的相關元件和 api 呼叫,只講述一些在實際開發過程中遇到的一些小問題。

Hello World

開始建立第一個 nvue 頁面。

目錄結構:

uni-app 入門之 nvue (weex) 爬坑記

index.nvue 程式碼如下:

<template>
	<div>
        <text>{{text}}</text>
    </div>
</template>
<script>
	export default {
		data() {
			return {
				text: 'Hello World'
			}
		}
	}
</script>
複製程式碼

如此真機執行可能遇到如下錯誤:

uni-app 入門之 nvue (weex) 爬坑記

造成這個問題的原因是 uni-app 專案裡必須有一個 vue 的頁面,新建一個 vue 頁面然後重新執行就不會有問題了。

uni-app 入門之 nvue (weex) 爬坑記

image 設定 border-radius

在 nvue 裡面不能給 image 設定 border-radius,想要將矩形圖案變為圓形需要在 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>
複製程式碼

設定真實畫素

在 weex 的規範裡只有一個長度單位即:px,螢幕總寬度為 750px,設定長度後,weex 引擎會根據手機螢幕的寬度動態計算出實際長度,類似於 uni-app 的 upx。

但是在實際開發過程中可能不想要這樣動態的長度單位,此時可以使用 weex 1.x版本里面一個長度單位:wx。這個單位就是實際畫素單位,雖然 weex 文件沒有提及,但目前任然是可用的,當然隨著 weex 的更新,wx 也可能會不再支援。

引入外部的 css

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

由於 weex 的限制,不能在 style 節點下使用 @import "xxx.css" 這樣的方式引入外部 css,需要使用如下方式引入 css:

<style src="@/common/test.css"></style>
<style>
   .test {
        color: #E96900;
   }
</style>
複製程式碼

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

vue 開啟 nvue 時傳遞引數

由於 vue 開啟 nvue 時不能在 url 後攜帶引數,只能使用 storage 的方式進行引數傳遞。

在 vue 頁面開啟 nvue

uni.setStorageSync('test', 'hello');
uni.navigateTo({
    url:"/pages/nvue/nvue"
})
複製程式碼

在 nvue 頁面獲得引數,在 created 裡呼叫 uni-app 的 api 時需要延時一段時間才能呼叫成功。

<script>
    export default {
        created() {
        	console.log("nvue created!");
            setTimeout(() => {
                uni.getStorage({
                	key:'test',
                    success: (res) => {
                    	console.log("獲得上個頁面傳遞的資料" + res.data)
                    }
                })
            },200)
        }
    }
</script>
複製程式碼

仿微信朋友圈效果

在開發中,有個頁面需要做到如微信朋友圈那樣效果:整體列表為從上到下排列,每個列表為左右兩列,左邊為使用者頭像,右邊訊息內容。

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

出現問題的程式碼如下:

<template>
    <div style="background-color: #ccc;">
        <div class="items">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>上下排列時候可以撐開內容,上下排列時候可以撐開內容,上下排列時候可以撐開內容,上下排列時候可以撐開內容,上下排列時候可以撐開內容,上下排列時候可以撐開內容,上下排列時候可以撐開內容,上下排列時候可以撐開內容,上下排列時候可以撐開內容。</text>
            </div>
        </div>
        <div class="items" style="flex-direction: row;">
            <div class="headImg"></div>
            <div class="rgtBox" style="flex: 1;">
                <text>左右排列時候不可以撐開內容,左右排列時候不可以撐開內容,左右排列時候不可以撐開內容,左右排列時候不可以撐開內容,左右排列時候不可以撐開內容,左右排列時候不可以撐開內容,左右排列時候不可以撐開內容,左右排列時候不可以撐開內容,左右排列時候不可以撐開內容</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>
複製程式碼

出現這個問題應該是 weex 的 bug,左邊元素設定高度後,右邊若不設定高度,其最大高度為左邊元素的高度。解決辦法就是將頭像和內容均上下排列,然後設定內容區域的 margin-left、margin-top 和 min-height 就能達到類似的效果。

程式碼如下:

<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>這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字,這裡是一段長文字</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>
複製程式碼

相關文章