uniapp中.vue页转.nvue页

跨端兼容二三事

小程序转APP问题记录

• 不能直接套壳打包为APP吗？为什么要改为.nvue后缀？

可以，但是nvue的渲染速度更快；首屏打开速度更快；技术成分更高，避免无法上架应用市场。

相比vue页来说，nvue页渲染速度快的原因是不需等待手机rom的webview模块渲染。直接使用自带的高性能原生渲染引擎weex即可。

• App和小程序双端开发已经是普遍需求，此场景下uniapp跨端作用大。条件编译可以帮助我们处理不同平台下不同的代码，适合编写特定平台专用组件或API，把工作交给编译器。 这里说明：选型没有最好，只有最合适。
• uni-app的App端与微信小程序是一样的技术架构，相同的架构是可以跨端的前提，都是逻辑层独立运行于jscore下，视图层运行于webview下或者weex渲染引擎下。所以不可避免的会引出逻辑层与视图层频繁通讯的性能问题。

那么如果遇到此类问题如何解决？

若是.vue后缀的文件使用webview模块渲染，则使用renderjs。它是比wxs更为强大的运行在视图层的js。

若是.nvue后缀的文件使用weex原生引擎渲染，则使用bindingX。此机制原理是由频繁向原生层传递数据变为了一次性整体传递数据。另外，类似原理但更为简单的方式还有设置render-whole属性。

• nvue页也可以编译为H5和小程序。只是css写法受限。只支持flex布局，且排列方向默认是竖排，需要手动去manifest.json下修改。
• 如不同平台下样式不正常，多是css兼容性问题。
• 标签要遵循微信小程序的标签。比如写<div>时要知道写为<view>。
• 跨端不是迁移web的习惯，而是要按照uni的写法全平台使用，所以遇到问题时第一反应是要查文档。查文档。查文档。
• body的元素选择器改为page
• App的js运行在jscore中而不是浏览器中，所以没有document，window等浏览器对象。如果你在app中使用的一些插件内部用到了这些对象，需要引入renderjs。这是比wxs更为强大运行在视图层的js。
• uni的API在编译到web平台运行时，会转为浏览器的API。所以uni-admin框架既可以运行在PC也可以运行在移动端的H5，小程序，App。
• 自定义组件放在components文件夹下，并且目录是components/组件名称/组件名称.vue，就可以直接在页面使用了，因为它符合uniapp的easycom组件规范。在uni_modules文件夹下也有相同的作用。

这里提个小知识，这个组件叫做<uni-section>，uni的扩展组件中并没有提供它，如果想使用，可以下载uni-ui这个示范项目，在components文件夹下找到它，复制到自己的项目中。

• vue中css单位使用viewport但uniapp中css单位建议使用rpx。因为nvue不支持的css单位太多，实在解决不了一致性就条件编译。
• uniapp中制作通用的根组件，添加背景图片的方法，是将写好的组件放入components目录下，然后在子组件中当做父组件使用。

注意不能在app.vue文件中编写template，app.vue文件的作用是调用应用生命周期函数，配置全局样式，配置全局存储globalData。

• 不想使用uniapp提供的App通用启动界面？Android平台使用.9.png格式自定义启动图。iOS平台使用自定义storyboard启动界面。详细了解请点击链接。
• uniapp小程序中数据更新但视图层不更新，一般是setData这个API导致的，因为这个API负责的就是将数据从逻辑层发送至视图层。

如果使用常规web排查方法还未解决该如何处理：使用this.$mp.page.setData()方法，相当于vue中的this.$forceUpdate()强制更新。这两种方法大多数时候都能解决问题。

• 凡涉及到与客户端工程师合作都可以称为混合开发，多数情况下，要么以URL的形式链接，更新部署更为自由。要么是前端代码放入原生工程，采取wgt包方式更新。
• 配置favicon.ico需要自定义HTML模板，官方模板链接。
• 视频下载并保存至相册。
• HbuilderX打不开微信开发者工具解决：

开启微信开发者工具中的系统代理和服务端口。
将微信开发者工具或项目移动到没有空格的目录。
更改微信小程序的AppID。

简单记录，后续更新~