uni-app中nvue (weex) 注意事項

前言

uni-app 是 DCloud 出品的新一代跨端框架，能夠說是目前跨端數最多的框架之一了，目前支持發佈到：App（Android/iOS）、H五、小程序（微信小程序/支付寶小程序/百度小程序/字節跳動小程序），目前市面上相似的框架還有：Taro（京東出品）、Megalo（網易出品）。

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

weex 支持的東西，在 nvue 裏大多都是支持的，因此這裏就不詳細講述 weex 的相關組件和 api 調用，只講述一些在實際開發過程當中遇到的一些小問題。

Hello World

開始建立第一個 nvue 頁面。

目錄結構：

index.nvue 代碼以下：

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

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

形成這個問題的緣由是 uni-app 項目裏必須有一個 vue 的頁面，新建一個 vue 頁面而後從新運行就不會有問題了。

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> 節點裏寫樣式是不生效的。

使用 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 時傳遞參數

因爲 vue 打開 nvue 時不能在 url 後攜帶參數，只能使用 storage 的方式進行參數傳遞。

在 vue 頁面打開 nvue

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

在 nvue 頁面得到參數，在 created 裏調用 uni-app 的 api 時須要延時一段時間才能調用成功（最新版 uni-app 框架已經修復此問題，不用延時也能夠調用成功）。

<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=""> <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="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>