使用 nvue 的注意事项以及坑

已于 2023-01-05 10:44:56 修改
阅读量1.7k 收藏
点赞数
分类专栏： nvue 笔记 文章标签： vue javascript js uni-app 前端
于 2021-04-15 12:48:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43390928/article/details/115720961
版权
笔记 同时被 2 个专栏收录
16 篇文章 1 订阅
订阅专栏
nvue
1 篇文章 0 订阅
订阅专栏
本文记录了使用uniapp的nvue进行APP开发时遇到的问题及解决方案，包括全局引用不支持、CSS样式限制以及组件引入的注意事项。在H5环境下正常但在APP真机调试时出现问题，需注意接口的局部引入和CSS宽度设置。同时，nvue对于组件和方法的引入要求更严格，必须单独引入才能正常使用。
摘要由CSDN通过智能技术生成

使用 nvue 的注意事项以及坑

——日常踩坑记录

1. 不支持全局引用
我使用 uniapp 混合编写，在一次调用一个接口的时候老是报错，也找不到原因，因为在 H5 上没有报错，最后发现是我的接口全局封装好的，在调用的时候不存在，单独引入进页面来就没问题了（APP真机调试）


2. css样式问题
元素的宽度不能用百分比，官方也有声明（传送门），当时没注意看，导致我弄了很久


3. 引入问题
使用任何组件或封装好的方法之类的，一定要单独引入。（之前程序一直说找不到我封装成全局的方法，我看了半天，也没写错，后面发现没有单独引入-_-）



持续更新中。。。

个人博客 http://www.sharekong.xyz 欢迎访问

空晓天
关注
专栏目录
vue整合uniapp_【重跳坑指南】使用uniapp中的nvue结合weex开发APP
weixin_35149412的博客
12-23 3156
作为一个有一年经验的uniapp的开发者，自从脱坑老老实实做web前端，已经蛮久没有使用dcloud家的东西，由于今年的工作计划中，uniapp仍然占据着主导的地位，便老老实实的看看uniapp最近半年的更新文档，映入眼帘的就是v3引擎和一个fast极速启动的功能，下面会简单的提到我重新踩坑过程。写在前面本文需要一定的uniapp基础和必备的vue基础在之前的开发中，并没有使用到nvue这个基于原...
uni-app中使用lodash_uniapp适配到微信小程序注意事项
weixin_39667080的博客
11-21 853
uniapp我也是第一次玩，官网说可以一次编码，多端发布。说实话，一开始我是怀疑的。不过，走到现在，app已经开发好、h5页面也接近完成。现在要生成小程序了，想想就很激动。。在hbuilderx上运行到小程序，看到了熟悉的有胶囊的登录界面我很激动，登录进去一看。结果首页的按钮全没了，底部的tabbar也没了。。这还只是第一步，已经严重打击了我的信心。我有一种第一次吃螃蟹被夹住的感觉！好在...
uniapp nvue页面注意事项
最新发布
oldolder的博客
08-25 428
nuve
使用 Weex/nvue 注意事项
wusejiege6的博客
07-17 1246
使用 Weex/nvue 注意事项 nvue开发与vue开发的常见区别 基于原生引擎的渲染，虽然还是前端技术栈，但和web开发肯定是有区别的。 nvue 页面控制显隐只可以使用v-if不可以使用v-show nvue 页面只能使用 flex 布局，不支持其他布局方式。页面开发前，首先想清楚这个页面的纵向内容有什么，哪些是要滚动的，然后每个纵向内容的横轴排布有什么，按 flex 布局设计好界面。 原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（list、waterfal
uniapp开发app以及使用nvue的注意事项
weixin_43090018的博客
01-04 5056
在nvue中，只能使用默认的flex布局方式，默认是竖排（column）排列
关于uniapp map组件的使用（nvue）
LDL_CQ的博客
05-25 6651
1、什么是nvue 在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面，hello uni-app 示例就是如此。 https://uniapp.dcloud.net.cn/tutorial/nvue-outline.html 官方文档 2.nvue的注意事项 1、不能使用% vw vh (css不支持less和scss.
nvue基础快速入门
weixin_56663198的博客
11-09 9491
学习的内容，持续更新坑
uni-app nvue/vue 引入第三方字体教程，在线ttf转base64和在线识别字体网站分享
tuonioooo
03-27 1万+
说明在我们日常Web开发过程中，经常会遇到内置UI字体和图标不能满足场景，需要额外的使用一些字体或者图标，一般常用的就是使用阿里图标库，非常方便，下面就介绍一下，基于uni-app nvue/vue 中引入第三方字体的处理过程。uni-app vue 引入第三方字体uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：支持 base64 格式字体图标。支持网络路径字体图标。小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文
小程序嵌套h5页面_uni-app 中使用 web-view 微信小程序嵌套H5
weixin_39797693的博客
12-19 3164
uni-app 中使用 web-view 微信小程序嵌套H5由于项目需要，我们的小程序中嵌套了web-view， 对于第一次接触uni-app，第一次用web-view的我真的是踩坑无数，屡次站在放弃的边缘，终于在今天搞定了。所以我感觉有必要更新一篇关于uni-app中嵌套web-view的文章，希望下面的文章可以帮助到正在学习的朋友吧。1、uni-app 中为什么要嵌套 web-view ？2、...
uni-app跨平台开发
o1dkdj的博客
06-15 798
Uni-app 框架提供了许多平台原生的 UI 控件和 API 的访问，但是这些控件和 API 在不同平台之间的支持和表现情况会有所不同，因此我们需要注意在编写代码时尽量避免使用不同平台独有的 API 或特性，同时要特别关注不同平台之间的差异，以便在不同平台上运行时代码能够正确地工作。Uni-app 运行在多个平台上，每个平台的特点是不同的。最后，总体来说，Uni-app 的跨平台开发提供了许多可能性和便利性，但也需要在搭建过程中注意兼容性问题，同时进行版本控制和测试，从而确保应用程序能够稳定地运行。
uni-app入门学习
An_Cool_bree的博客
06-28 1069
什么是 uni-app 1.1uni-app是一个使用Vue.js开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。 官方的体验例子： 1.2uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势 。 跨端数量更多 平台能力不受限 性能体验更优秀 周边生态丰富 学习成本低 开发成本低 1.3功能框架 使用 uni-...
uniapp-在vue页面使用封装好的api方法，在nvue页面无法正常使用
m0_64397933的博客
02-10 1492
uniapp-在vue页面使用封装好的api方法，在nvue页面无法正常使用
个人经历过的uni-app+App Nvue坑
o_u_c_h的博客
12-03 2818
uniapp+nvue做app，在这里记录下我遇到过的大坑和解决方案吧，希望seo能帮到有相似需求的人。
uni-app 使用Weex/nvue的注意事项
m0_58492934的博客
06-15 4929
uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。以往的 weex ，有个很大的问题是它只是一个高性能的渲
uni-app 开发nvue时注意事项
lingdian1614114082的博客
09-09 1853
相比Web平台，vue.js在 uni-app 中使用差异主要集中在两个方面： 新增：uni-app除了支持vue实例的生命周期，还支持应用启动、页面显示等生命周期 受限：相比web平台，部分功能受限，比如 v-html指令，具体见下。（受限部分仅在App和小程序端受限，H5版不受限） 注意： 不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue =&g...
uniapp 中nvue的踩坑经历
weixin_46479579的博客
08-15 1208
nvue注意事项
Vue与Nvue区别
热门推荐
weixin_53853031的博客
06-22 2万+
vue与nvue区别
Uni-app之Nvue开发细节总结
gcyaozuodashen的博客
07-07 3476
uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力适用场景Nvue与vue区别 不能使用百分比布局，如 Nvue与Vue直接可以通过,进行通讯，注意要在界面销毁前调用销毁监听器，或者使用. Nvue与Vue共享数据vuex、uni.storage、globalData。推荐使用vuex（之后会出一篇简书总结vuex使用示例）。 兼容性安卓与iOS区别 作者：大码猴 链接：https://www.jianshu.com/p/2fc394637
uni-app使用nvue人脸识别实现方法
06-03
要在uni-app中使用nvue实现人脸识别，你可以按照以下步骤操作： 1. 下载uni-mpvue-faceid插件并引入到你的项目中。 2. 在manifest.json文件中声明使用相机权限，这是人脸识别功能所必需的。示例代码如下： ``` "app-plus": { "permissions": { "camera": { "desc": "用于人脸识别功能", "scope": "camera" } } } ``` 3. 创建一个nvue页面，用于展示相机预览界面和人脸识别的结果。在nvue页面中，你可以使用mpvue-faceid组件来实现人脸识别。示例代码如下： ``` <template> <view> <mpvue-faceid @success="onSuccess" :detect="true"></mpvue-faceid> </view> </template> <script> export default { methods: { onSuccess(res) { console.log(res) // 在这里处理人脸识别的结果 } } } </script> ``` 4. 在需要使用人脸识别功能的页面中，使用uni.navigateTo()方法跳转到nvue页面。示例代码如下： ``` uni.navigateTo({ url: '/pages/faceid/index' }) ``` 这样，你就可以在uni-app中使用nvue实现人脸识别功能了。当你跳转到nvue页面时，相机预览界面会自动打开，并开始进行人脸识别。在人脸识别成功时，会触发onSuccess事件，并返回识别结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值