项目场景:
有个需求是用uni.share从app分享微信小程序,发现在苹果手机真机调试的时候 跳转的目标页面会白屏、页面样式错乱、一些组件不出现等问题。并且报错
Error: Framework inner error
问题描述
uniapp开发在苹果手机下app分享微信小程序会出现白屏、样式错乱问题,并且配置均正确 排除配置问题。满足以下条件 均可100%复现
- ios手机必现、安卓手机正常
- 分享的小程序目标页面是小程序分包下的页面
- 目标页面引入的组件多,基础页面正常
app分享代码如下
uni.share({provider: 'weixin',type: 5,title: that.shareTitle,scene: 'WXSceneSession',imageUrl: that.shareImageUrl,miniProgram: {id: getBaseConfig().WE_CHAT_OFFER_ID, //要跳转小程序的原始IDtype: getBaseConfig().WE_CHAT_OFFER_TYPE,//小程序版本类型 0正式版 1开发版 2体验版path:'/subpkg/safeguard/SafeguardDetailPage/subPage/firstCheckData',//跳转的目标页面webUrl: 'https://mujidigital.com/index',},success: (e) => {uni.showToast({title: '分享成功',icon: 'none',});},fail: (e) => {uni.showToast({title: '将通过微信打开,请下载微信',icon: 'none',});},});
解决方案:
一开始会认为是没有配置预加载分包配置
preloadRule
导致的,然后配置了也是一样的有问题。
下面是我的项目结构图
- 首先问题出现之一就是这个z-paging组件是来自uni_modules下的,然后分包下页面直接引用主包的组件就会出现这个。解决方案 可以把分包使用的组件直接copy到分包下
引用
或注释
即可 - 在app下uni.share的path做操作,大概流程是先跳到主包下一个页面作为中转页面 然后做相关逻辑下发到具体分包页面 着重讲这一方案
app分享代码path逻辑调整
// 分享小程序地址sharePathUrl() {//要带的参数const storageParams = {addressCityId: this.storageData.addressCityId,addressProvinceId: this.storageData.addressProvinceId,addressCity: this.storageData.addressCity,storageTypes: JSON.stringify(this.storageData.storageTypeList),};const obj = {//jumpUrlType做页面区分 这里约定是storageListPagestorage: this.joinUrl('pages/homepage/homepage', { jumpUrlType: 'storageListPage', ...storageParams }),};return obj[this.showTitleType];},uni.share({provider: 'weixin',type: 5,title: that.shareTitle,scene: 'WXSceneSession',imageUrl: that.shareImageUrl,miniProgram: {id: getBaseConfig().WE_CHAT_OFFER_ID, //要跳转小程序的原始IDtype: getBaseConfig().WE_CHAT_OFFER_TYPE,path: that.sharePathUrl,webUrl: 'https://mujidigital.com/index',})
APP代码调整概括
其中我这有多个跳转页面,预期是自己设计一个映射表
app中通过jumpUrlType
字段的值来映射小程序下的具体分包页面
pages/homepage/homepage是小程序下的中转页面
路径
jumpUrlType字段的值来映射小程序下的具体分包
页面
其余的是要带的业务参数
小程序分发代码调整
中转页的onLoad代码
onLoad(option) {// app跳转分包页面小程序 特殊处理 分发操作this.jumpPageTypeHandle(option);},methods:{// 分发分享进入各个页面jumpPageTypeHandle(opt){console.log(opt,'optopt');if (!XEUtils.isEmpty(opt)) {const jumpUrlType = opt.jumpUrlType ? opt.jumpUrlType : 'topicDetail';// topicDetail是详情页 storageListPage 是冷库列表 faDaDaApprove是电子签 safeguardProcessPage是牧集保障订单 firstCheckData是验证报告 topicCashActivity活动const jumpUrlObj = {'topicDetail':'/subpkg/topic/topicDetail/index','storageListPage':'/subpkg/storage/StorageListPage/index','faDaDaApprove':'/subpkg/groupPage/faDaDaSign/approve','safeguardProcessPage':'/subpkg/safeguard/SafeguardProcessPage/index','firstCheckData':'/subpkg/safeguard/SafeguardDetailPage/subPage/firstCheckData','topicCashActivity':'/subpkg/topicCashActivity/index',}const jumpUrl = jumpUrlObj[jumpUrlType];//一定要延迟跳转,需要等待分包加载完成 不然一样失效 延迟时间差不多1ssetTimeout(()=>{navigateTo(jumpUrl,opt);}, 1000);}},}
小程序代码调整概括
在onload拿到jumpUrlType 字段 去对照要跳转的分包页面路劲
然后带上相关参数做延迟跳转``延迟跳转``延迟跳转
原因分析
目前了解到的是设备差异性,因为安卓手机能够直接跳分包不会有问题,苹果手机分享的分包页面就会出现,核心本质的原因就是分包页面不能引入主包组件 不然会出现各种各样的问题