最近在尝试将现有的uni-app项目编译成app，过程中出现许多坑。现在记录一下编译打包过程主要顺序以及要注意的点。

uni-app是跨平台开发框架，开发一次IOS、Android都有了，uni-app在App端，基于能力层/渲染层分离的架构，渲染层是webview和weex二选一，能力调用共同的plus api 比如蓝牙、扫码等。

使用vue编写的页面就是通过webview编译的，使用nvue(native vue)编写的就是原生编译，因为MVVM模式架构逻辑层与试图层相分离，通信问题导致性能差。但建议仍然以使用 vue 页面为主，在 App 端某些 vue 页面表现不佳的场景下使用 nvue 作为强化补充，使用的nvue场景如下：

介绍 | uni-app官网https://uniapp.dcloud.io/tutorial/nvue-outline.html#%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF如果不追求性能，以大部分页面vue页面为主，nvue为补充，适用使用nvue的页面有以下：

1、在应用到大量原生控件，map、viedo、live-push等。

2、首页启动速度有要求的，首页可以使用nvue，在渲染上会快很多。

3、区域滚动以及瀑布滚动等

4、复杂的自定义下拉刷新等。

但nvue不仅有诸多限制，而且canvas的支持也是不如vue页面。而且nvue不支持ts 横竖屏也是难以适配，官方推荐横竖屏直接固定锁。

跨端经常出现的问题可在下面官网链接提前绕路避坑。

uni-app官网https://uniapp.dcloud.io/matter.html

nvue页面对样式也存在诸多限制，

仅支持flex布局。无法引入字体文件，媒体查询，不支持百分比布局等，文字必须在text中，详细可见以下链接，查看官网的罗列的问题，避免踩坑

nvue所支持的通用样式已在本文档中全部列出，一些组件可能有自定义样式，请参考组件文档。除此之外的属性，均不被支持。 | uni-app官网https://uniapp.dcloud.io/tutorial/nvue-css.html无论使用各种ide，cli创建的项目在进行云打包的时候，经常出现一个升级，而另一个未升级的情况。如果未进行cli以及云打包还有手机基底的适配，应用将无法运行。正常在HBuilderX升级后，在打包时进行升级cli即可。可以下载@dcloudio/uvm来管理。

npm i @dcloudio/uvm /*下载包管理器*/npx @dcloudio/uvm /*更新*/npx @dcloudio/uvm 3.2.12.20211029 /*更新指定版本*/

详细见

uni-app官网https://uniapp.dcloud.io/quickstart-cli.html#%E4%BD%BF%E7%94%A8cli%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%E5%92%8C%E4%BD%BF%E7%94%A8hbuilderx%E5%8F%AF%E8%A7%86%E5%8C%96%E7%95%8C%E9%9D%A2%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB如果需要打包成apk，在菜单栏发行-->云打包。可以选择想要打包类型，以及相应的配置。前提需要对manifest.json进行修改。这也是uni-app项目跟其他的项目的区别

在main.ts中修改挂载形式

(App as any).mpType = 'app'//标记类型new Vue({
...App,
render:(h)=>h(App)
}).$mount() //修改挂载形式

解决完报错与cli版本以及打包cli的基底版本冲突之后就。推荐先使用真机调试，首先解决真机调试问题。真机运行常见问题 - HBuilderX 文档 (dcloud.net.cn)https://hx.dcloud.net.cn/Tutorial/App/PhoneDebuggingandroid需下载360、腾讯的手机助手。ios需下载itunes。并下载调试工具，运行--》手机--》选择手机，并运行。

编辑到真机成功后开启调试工具查看数据交互

浏览器手机模拟器显示效果如下，因为未做兼容处理。编译后出现样式排版的问题，灵敏度也下降

ios真机调试下载到手机上显示效果如下

使用mumu模拟器调试

首先在官网下载mumu模拟器，记住安装地址！！！

1、在hbuilderx中找到模拟器端口设置

2、mumu模拟器的adb端口为7555，模拟器路径找到安装路径

./emulator/nemu/vmonitor/bin/adbserver.exe （根据自己的安装路径来）

3、找到电脑系统环境变量,在path中写入mumu模拟器的启动路径

./emulator/nemu/vmonitor/bin

4、重启hbuilderx以及mumu模拟器，在打开hbuilderx前先开启mumu模拟器，防止找不到。然后运行到android app 基底就可以运行电脑上的模拟器

uni-app生成app的兼容性调研报告相关推荐

python ppt自动生成_实战 | Python自动生成PPT调研报告
原标题:实战 | Python自动生成PPT调研报告原文: 全文约 3821 字,读完可能需要 5 分钟. 文/JSong @2017.02.28 在数据分析里面有一句话是说,80%的时间要用于数据 ...
python自动生成ppt报告_把时间还给洞察，且看PPT调研报告自动生成攻略
文/JSong @2017.02.28 在数据分析里面有一句话是说,80%的时间要用于数据清洗和整理,而我觉得理想的状态应该是把更多的把时间花在数据背后的洞察当中.去年11月在简书占了个坑,说要自己写 ...
中国市场Android终端App兼容性质量报告
由于Google的开放策略,越来越多的终端厂商甚至互联网企业加入到手机终端商的领域,迅速加剧了Android移动终端的碎片化,但随之而来基于Android的移动App产品因为智能终端不能正常安装.意外 ...
uni中使用select标签后生成APP页面跳转空白
uni中使用select标签后生成APP页面跳转空白最近再用webstrom时,写uni APP时发现一个问题当生成apk后,带有select选择器标签的页面突然无法显示一片空白. 报错显示:Ca ...
使用 MATLAB Coder App生成MEX函数
目录使用 MATLAB Coder App 生成 MEX 函数的工作流使用 MATLAB Coder App 生成 MEX 函数配置工程设置编译 MATLAB Coder 工程使用 MATL ...
如何保证APP兼容性覆盖测试和手机APP测试如何进行兼容性测试？（学习笔记）
1.背景众所周知,APP兼容性覆盖测试一直以来被认为是一个高成本.耗时低效.耗人力的测试工作,且兼容性测试是一项必须要进行的测试项目,因为有不同的机型.系统平台.分辨率.网络.厂商.数据兼容以及不同 ...
关于vs生成app错误提示，提醒Execution failed for task ':transformClassesWithDexForDebug'.
昨天将vs和android SDK更新之后生成app之后发现app生成出错,报错如下: FAILURE: Build failed with an exception. * What went wro ...
react-native(五)生成App
关于RN生成APK的步骤,相信大家一定能用上.话不多说,直接开始: 该过程会用到工具 `keytool` 产生签名的key 注:在产生的时候需要提供密钥和存储密码,后续会用到,请先保存好 keytoo ...
XCode4.3.3 + iOS5.1 无证书开发并生成app、ipa文件
测试环境: 系统:Mac OS X 10.7.3(黑苹果) xcode:4.3.3 ipad:2 (需越狱) 1.生成证书打开实用工具->钥匙串访问,选择钥匙串访问->证书助理- ...

uni-app生成app的兼容性调研报告

使用mumu模拟器调试

uni-app生成app的兼容性调研报告相关推荐

最新文章

热门文章