天狐
天狐
  • 发布:2023-01-04 14:11
  • 更新:2023-01-04 17:39
  • 阅读:216

Uniapp素材图片在app与小程序中的适配问题

分类:uni-app

最近一直再用uniapp开发一套app代码,同时发布到微信小程序,钉钉小程序。

遇到一个非常鸡肋的问题,就是因为app开发过程中的UI素材图片比较多,甚至超过了2MB(weixin小程序分包最大2MB),当然分包小程序能暂时性规避这个问题。
这就很棘手,所以快速想到的解决方案就是把图片存在oss中,加载远程图片,但是这个造成一个问题就是app打开页面的时候加载出整体ui特别慢。很不原生体验。

那么有没有一种方法,让素材图片在小程序中使用远程图片,app中使用本地的static文件呢。

我现在可以搞4件事:
1.不同平台定义不同的static文件夹我现在知道怎么弄 uni-app如何自定义打包的文件
2.通过vue.config.js 定义imageload 通过判断process.env.UNI_PLATFORM,批量替换src路径,app加载本地static目录图片,小程序加载url远程图片。
3.自定义全局image组件,在内部处理src
4.在js template中使用ifdef进行平台的条件判断,但是这个代码量有点高了就。


<image class="icon-small" src="@appstatic/arrow_up_open_icon.png" />  
module.exports = function(source) {  

  if(process.env.UNI_PLATFORM == 'mp-weixin'){  
     return source.replace(/@appstatic\//g, `/static/`);  
  }  
  if(process.env.UNI_PLATFORM == 'h5'){  
     return source.replace(/@appstatic\//g, `https://file.xxx.com/appstatic/`);  
  }   
  return source;  
};

但是上述也只是解决了vue的问题,imageload不支持nvue页面。

有没有可能再nvue或者vue的template中是否可以有类似的东西<image src="{BASEURL}static/arrow_up_open_icon.png",BASEURL是个配置在manifest中的一个变量,app可以设置成/小程序可以设置成一个域名。

或者有没有一个更灵活和完美的可以处理这个问题的方法。

2023-01-04 14:11 负责人:无 分享
已邀请:
深海智行

深海智行 - 专注前端培训

也可以使用 filter 代替

<image src="static/arrow_up_open_icon.png|srcFilter">

在这个 srcFilter 内写处理逻辑

  • 天狐 (作者)

    filter不支持nvue吧,主要是main.js注册的nvue基本不生效

    2023-01-05 08:02

要回复问题请先登录注册