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>