前言

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 页面。

目录结构:

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

uni-app 入门之 nvue (weex) 爬坑记的更多相关文章

  1. mac开发环境爬坑记(搭建php+nginx+mysql+redis+laravel+git+phpstorm)

    题外话:前几天,终于以原价一半的价格,将我那台15版mbp在bbs上卖了出去.之所以用了“终于”这个词儿,是我一直迟迟没有下定决心卖掉它,可眼瞅着再不卖掉,又要掉价,况且我的新电脑,也终于下来了. 话 ...

  2. mint-ui之picker爬坑记

    picker的数据来源为动态获取时,数据无法正常渲染!因为方法不对,所以坑大了!深刻地体会到'业不精,我之过',谨以此文,深刻地记录一下踩坑及爬坑的整个过程,以便日后不再入坑,也给后来者提供一下参考 ...

  3. .NET Core爬坑记 1.0 项目文件

    前言: 之所以要写这个系列是因为在移植项目到ASP.NET Core平台的过程中,遇到了一些“新变化”,这些变化有编译方面的.有API方面的,今天要讲的是编译方面的一些问题.我把它们整理后分享出来,以 ...

  4. python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)

    简介 有些 post 的请求参数是 json 格式的,这个前面发送post 请求里面提到过,需要导入 json模块处理.现在企业公司一般常见的接口因为json数据容易处理,所以绝大多数返回数据也是 j ...

  5. centos部署yapi爬坑记

    前言 这几天终于完成了为期三个月的公司某个demo版的项目,在这期间和公司的后台因为API的事怼过无数次了,'我的接口没问题,是你请求的方式不对吧!'.'一定是你请求的参数不对'......诸如此类问 ...

  6. 【MyBatis】MyBatis自动生成代码查询之爬坑记

    前言 项目使用SSM框架搭建Web后台服务,前台后使用restful api,后台使用MyBatisGenerator自动生成代码,在前台使用关键字进行查询时,遇到了一些很宝贵的坑,现记录如下.为展示 ...

  7. SQL Server 事务复制爬坑记

    SQL Server 复制功能折腾了好几天了,现特将其配置过程以及其间遇到的问题记录下来,以备日后查阅.同时,也让“同道”同学们少走不必要的弯路.如果有不对之处,欢迎大家指正,欢迎沟通交流. 一.复制 ...

  8. vue-router爬坑记

    简介 因为我们用Vue开发的页面是单页面应用,就相当于只有一个主的index.html,这时候我们就不能使用a标签来进行页面的切换了,所以这时候我们今天的主角Vue-Router就闪亮的登场了 Vue ...

  9. protobuf + maven 爬坑记

    疯狂创客圈 死磕Netty 亿级流量架构系列之20 [博客园 总入口 ] 本文说明 本篇是 netty+Protobuf 整合实战的 第一篇,完成一个 基于Netty + Protobuf 实战案例. ...

随机推荐

  1. Android studio 运行打包 Ionic 项目

    1.创建项目 ionic start myapp tabs 2.cd 到项目文件夹中 3.ionic cordova platfrom add android 执行这个命令后建议修改一下应用包名称,参 ...

  2. shell编程系列14--文本处理三剑客之awk的概述及常用方法总结

    shell编程系列14--文本处理三剑客之awk的概述及常用方法总结 awk是一个文本处理工具,通常用于处理数据并生成结果报告 awk的命名是它的创始人 Alfred Aho.Peter Weinbe ...

  3. 【转载】 tf.train.slice_input_producer()和tf.train.batch()

    原文地址: https://www.jianshu.com/p/8ba9cfc738c2 ------------------------------------------------------- ...

  4. Linux记录-批量安装ssh(转载)

    首先,需要检查expect是否安装:rpm -qa|grep expect 然后,在操作机上创建公钥:ssh-keygen 一路回车即可 创建好之后到/root/.ssh/下就可以看到id开头的2个文 ...

  5. 转:HR schema

    ###createe RemRem $Header: hr_cre.sql 29-aug-2002.11:44:03 hyeh Exp $RemRem hr_cre.sqlRemRem Copyrig ...

  6. sed替换字符串(变量)

    sed “s/查找字段/替换字段/g” echo helloworld|sed  ‘s/hello/world/g’ sed 替换字符串以变量形式 1.sed命令使用双引号的情况下,可以使用$var( ...

  7. Arcgis javascript api 动态图层自图层可见性设置

    Arcgis javascript api 动态图层自图层可见性设置 子图层管理 rest服务 sublayers sublayer ArcGISDynamicMapServiceLayer 本文主要 ...

  8. 【GStreamer开发】GStreamer基础教程12——流

    目标 直接播放Internet上的文件而不在本地保存就被称为流播放.我们在前面教程里已经这样做过了,使用了http://的URL.本教程展示的是在播放流的时候需要记住的几个点,特别是: 如何设置缓冲 ...

  9. web框架之Django

    windows下安装了Django后,在cmd里输入django-admin会返回Django的所有命令

  10. [转帖]Linux运维工程师的十个基本技能点

    Linux运维工程师的十个基本技能点 https://cloud.tencent.com/developer/article/1115068   本人是Linux运维工程师,对这方面有点心得,现在我说 ...