最近一直再用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可以设置成/小程序可以设置成一个域名。
或者有没有一个更灵活和完美的可以处理这个问题的方法。
天狐 (作者)
filter不支持nvue吧,主要是main.js注册的nvue基本不生效
2023-01-05 08:02