多种方案解决IOS下uni.share分享分包页面报错Error: Framework inner error

news2024/11/22 16:25:17

项目场景：

有个需求是用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, //要跳转小程序的原始ID
              type: 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做页面区分 这里约定是storageListPage
        storage: 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, //要跳转小程序的原始ID
              type: 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];
        //一定要延迟跳转，需要等待分包加载完成 不然一样失效  延迟时间差不多1s
			  setTimeout(()=>{
			  	navigateTo(jumpUrl,opt);
			  }, 1000);
      }
		},
  }