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

梁杰發表於 2019-9-9 17:57:00

<h3 id="前言">前言</h3>
uni-app 是 DCloud 出品的新一代跨端框架，可以说是目前跨端数最多的框架之一了，目前支持发布到：App（Android/iOS）、H5、小程序（微信小程序/支付宝小程序/百度小程序/字节跳动小程序），目前市面上类似的框架还有：Taro（京东出品）、Megalo（网易出品）。
uni-app 的 nvue 说白了就是 weex 的那一套东西，uni-app 集成了 weex 的 SDK，也就实现了 App 端的原生渲染能力。
weex 支持的东西，在 nvue 里大多都是支持的，所以这里就不详细讲述 weex 的相关组件和 api 调用，只讲述一些在实际开发过程中遇到的一些小问题。
<h3 id="hello-world">Hello World</h3>
开始创建第一个 nvue 页面。
目录结构：
<img src="https://img2018.cnblogs.com/blog/1312841/201902/1312841-20190215170151470-343589713.png" alt="">
index.nvue 代码如下：
<pre><code class="hljs django"><template>
<div>
 <text>{{text}}</text>
</div>
</template>
<script>
export default {
 data() {
 return {
 text: 'Hello World'
 }
 }
}
</script></code></pre>
如此真机运行可能遇到如下错误：
<img src="https://img2018.cnblogs.com/blog/1312841/201902/1312841-20190215170126168-734722797.png" alt="">
造成这个问题的原因是 uni-app 项目里必须有一个 vue 的页面，新建一个 vue 页面然后重新运行就不会有问题了。
<img src="https://img2018.cnblogs.com/blog/1312841/201902/1312841-20190215171400022-1263094606.png" alt="">
<h3 id="image-设置-border-radius">image 设置 border-radius</h3>
在 nvue 里面不能给 image 设置 border-radius，想要将矩形图案变为圆形需要在 image 外面包一层 div，代码如下：
<pre><code class="hljs xml"><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></code></pre>
<h3 id="设置真实像素">设置真实像素</h3>
在 weex 的规范里只有一个长度单位即：px，屏幕总宽度为 750px，设置长度后，weex 引擎会根据手机屏幕的宽度动态计算出实际长度，类似于 uni-app 的 upx。
但是在实际开发过程中可能不想要这样动态的长度单位，此时可以使用 weex 1.x版本里面一个长度单位：wx。这个单位就是实际像素单位，虽然 weex 文档没有提及，但目前任然是可用的，当然随着 weex 的更新，wx 也可能会不再支持。
<h3 id="引入外部的-css">引入外部的 css</h3>
在 App.vue 里写的公用的样式在 nvue 里是不生效，多个 nvue 想要使用公用的样式，需要引入外部的 css。
由于 weex 的限制，不能在 style 节点下使用 <code>@import "xxx.css"</code> 这样的方式引入外部 css，需要使用如下方式引入 css：
<pre><code class="hljs xml"><style src="@/common/test.css"></style>
<style>
.test {
 color: #E96900;
}
</style></code></pre>
需要注意的是在 <code><style src="@/common/test.css"></style></code> 节点里写样式是不生效的。
<h3 id="使用-ttf-字体文件">使用 ttf 字体文件</h3>
在nvue或者weex中是不能直接在css中通过 @font-face 这样的方式引入字体文件的，需要在js中使用 dom 模块引入字体文件，可参考 weex文档：
<pre><code class="hljs javascript">const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "iconfont2",
'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});</code></pre>
<h3 id="vue-打开-nvue-时传递参数">vue 打开 nvue 时传递参数</h3>
由于 vue 打开 nvue 时不能在 url 后携带参数，只能使用 storage 的方式进行参数传递。
在 vue 页面打开 nvue
<pre><code class="hljs less">uni.setStorageSync('test', 'hello');
uni.navigateTo({
url:"/pages/nvue/nvue"
})</code></pre>
在 nvue 页面获得参数，在 created 里调用 uni-app 的 api 时需要延时一段时间才能调用成功（最新版 uni-app 框架已经修复此问题，不用延时也可以调用成功）。
<pre><code class="hljs xml"><script>
export default {
 created() {
 console.log("nvue created!");
 setTimeout(() => {
 uni.getStorage({
 key:'test',
 success: (res) => {
 console.log("获得上个页面传递的数据" + res.data)
 }
 })
 },200)
 }
}
</script></code></pre>
<h3 id="仿微信朋友圈效果">仿微信朋友圈效果</h3>
在开发中，有个页面需要做到如微信朋友圈那样效果：整体列表为从上到下排列，每个列表为左右两列，左边为用户头像，右边消息内容。
在开发的时候，首先想到的是父元素使用 <code>flex-direction: row;</code> 让头像和内容，分别在左右展示。但是出了问题，内容区域的高度不能根据文字的长度而撑开;如果父元素使用上下排列，内容区域的高度就可以被文字所撑开。
出现问题的代码如下：
<pre><code class="hljs xml"><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></code></pre>
出现这个问题应该是 weex 的 bug，左边元素设置高度后，右边若不设置高度，其最大高度为左边元素的高度。解决办法就是将头像和内容均上下排列，然后设置内容区域的 margin-left、margin-top 和 min-height 就能达到类似的效果。
代码如下：
<pre><code class="hljs xml"><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></code></pre> 
来源：https://www.cnblogs.com/dfsxh/p/11493214.html

頁: [1]

琼殿技术论坛's Archiver

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