分析uniapp入門之nvue爬坑記
前言
uni-app 是 DCloud 出品的新一代跨端框架,可以說是目前跨端數最多的框架之一瞭,目前支持發佈到:App(Android/iOS)、H5、小程序(微信小程序/支付寶小程序/百度小程序/字節跳動小程序),目前市面上類似的框架還有:Taro(京東出品)、Megalo(網易出品)。
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/[email protected]"></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="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>
以上就是分析uniapp入門之nvue爬坑記的詳細內容,更多關於uniapp入門之nvue爬坑記的資料請關註WalkonNet其它相關文章!