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

前言
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 代码如下：

如此真机运行可能遇到如下错误：

文章图片

造成这个问题的原因是 uni-app 项目里必须有一个 vue 的页面，新建一个 vue 页面然后重新运行就不会有问题了。

文章图片

image 设置 border-radius
在 nvue 里面不能给 image 设置 border-radius，想要将矩形图案变为圆形需要在 image 外面包一层 div，代码如下：

设置真实像素
【uni-app中nvue|uni-app中nvue (weex) 注意事项】在 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：

需要注意的是在节点里写样式是不生效的。
使用 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