文档版本更新日期更新内容1.0.02026/6/31.app打包Android流程及兼容性问题适配背景开发环境开发工具:Visual Studio Code/HBuilderX5.0.7部署目标: cli编译器版本3.3.13/vue 2基础配置1.将三方分包集成到当前框架项目里面框架源码暂时无法在飞书文档外展示此内容分包文件及路由配置保持跟微信小程序集成方式一样2.三方分包适配app兼容性uni-app能实现一套代码、多端运行适配App兼容性问题主要是使用条件编译条件编译是用特殊的注释作为标记在编译时根据这些特殊的注释将注释里面的代码编译到不同平台。写法以 #ifdef 或 #ifndef 加%PLATFORM%开头以 #endif 结尾。#ifdefif defined 仅在某平台存在#ifndefif not defined 除了某平台均存在%PLATFORM%平台名称条件编译写法说明#ifdef APP-PLUS需条件编译的代码#endif仅出现在 App 平台下的代码#ifndef H5需条件编译的代码#endif除了 H5 平台其它平台均存在的代码#ifdef H5 || MP-WEIXIN需条件编译的代码#endif在 H5 平台或微信小程序平台存在的代码这里只有||不可能出现因为没有交集运行及调试Appuniapp运行及编译可以参考官方文档1.连接设备1.1Android设备连接运行App到手机或模拟器打开安卓手机设置里面的开发者模式设置中开启USB调试手机上允许电脑设备调试手机进入项目点击工具栏的运行 - 运行App到手机或模拟器可以看到运行设备名称,即可在设备上运行2.Chrome及Safari调试app界面模式主要功能是审查元素/控制台/断点相关功能需要安卓手机开启调试模式初试需要翻墙参考官方配置chrome调试地址chrome://inspect/#devices,界面如下左边是连接设备及展示页面右边是审查的页面元素相关信息。App发包HBuilderX提供了离线打包和云端打包本项目主要是通过HBuilderX云端发包到处ipa和apk包详细发包流程参考文档1.Android发包配置及导出apk主要是包括包名和证书配置信息证书别名证书密钥证书路径在生成证书的过程中获取参考基础配置。配置信息填完右下角提交打包即可生成apk文件1.1 当前项目已经生成好证书文件安卓证书文件名android.keystore所在目录当前项目里面public/cert目录下证书私钥密码123456App兼容性适配1、首页自定义导航栏高度适配自定义首页导航栏使用到了悬浮按钮获取其布局相关信息查询api不支持APP。使用条件编译方法单独适配app获取原生导航栏布局相关信息2、在发送验证码界面template里面单独适配使用条件编译只有非app走相关属性设3、打开分享图片弹窗适配微信小程序自带分享uniapp支持的系统分享// #ifndef APP-PLUS uni.showShareImageMenu({ path: res.tempFilePath }) // #endif // #ifdef APP-PLUS uni.shareWithSystem({ imageUrl:res.tempFilePath }) // #endif4、基本数据类型定义规范子组件props定义参数类型如果是Number,如果赋值的时候字符串类型则App里面会提示错误需按照属性类型传值,下面需要将返回的字符串转成Number类型... view v-ifi.score stars :ratingNumi.score ? Number(i.score.toFixed(1)) : 0/stars /view ... ... props:{ ratingNum:{ type:Number }, } ...5、空对象上操作属性适配在App运行会很明显出现空对象操作问题导致界面异常常见的有:1.如果对象为undefined或者null, 需要做非空判断导致报错Error in render: TypeError: Cannot read property length of undefined。view classblock v-ifdetail detail.length/view6、图表echarts适配小程序与App端app端主要是通过renderjs在app和h5端使用完整的echarts或者考虑全端兼容插件uChartsscript moduleecharts langrenderjs let myChart export default { mounted() { if (typeof window.echarts function) { console.log(function) this.initEcharts() } else { console.log(script) // 动态引入较大类库避免影响页面展示 const script document.createElement(script) // view 层的页面运行在 www 根目录其相对路径相对于 www 计算 script.src ./static/echarts.js script.onload this.initEcharts.bind(this) document.head.appendChild(script) } }, methods: { initEcharts() { myChart echarts.init(document.getElementById(echarts)) console.log(myChart:,myChart) // 观测更新的数据在 view 层可以直接访问到 myChart myChart.setOption(this.options) }, updateEcharts(newValue, oldValue, ownerInstance, instance) { // 监听 service 层数据变更 myChart myChart.setOption(newValue) }, onClick(event, ownerInstance) { // 调用 service 层的方法 ownerInstance.callMethod(onViewClick, { test: test }) } } } /script7、scroll-view组件水平滚动App上滑动适配在app上scroll-view组件添加css样式overflow-x与overflow-y属性会导致无法左右滑动的问题/* #ifndef APP-PLUS */ overflow-x: auto; overflow-y: hidden; /* #endif */8、数据绑定未生效某些情况在app里面数据双向绑定后在js里面刷新数据view层没有刷新此时须$forceUpdate()强制刷新才行。