weex加载图片方式有三种,1.src直接引用base64编码,2.加载网络图片,3.加载本地图片(三端分别放在项目目录)。前两种都是比较简单直接,第三种相对初学者会比较头疼,尤其对于只掌握一端开发的人员来说,验证其他端就是比较难的事情。今天终于完成了三端本地图片的加载,特此分享和记录。
由于三端图片路径不一致,所以需要写一个方法来分别转换路径,在weex项目src/mixins目录中新建index.js文件,加入如下转换方法:
// e.g. 图片文件名是 test.jpg, 转换得到的图片地址为
// - H5 : images/test.jpg images和所在html路径同级
// - Android : local:///test local代表项目各dpi目录,一般放在hdpi里一张即可
// - iOS : local///test.jpg local代表从项目中全局扫描 test.jpg可放至项目中任何目录
export const getImg=function(img_name) {// 获取图片在三端上不同的路径
let platform = weex.config.env.platform
let img_path = ''
if (platform == 'Web') {
img_path = `src/images/${img_name}`
} else if (platform == 'android') { //android 不需要后缀
img_name = img_name.substr(0, img_name.lastIndexOf('.'));
img_path = `local:///${img_name}`
} else {
img_path = `local:///${img_name}` // img_path = `../images/${img_name}`
}
return img_path
}
//导出接口
export default{
getImg:getImg,
}
在需要导入的页面中使用:
import { getImg } from '@/lib/fuc.js';
export default {
data:{
rightIcon:getImg('icon_nav.png'),
show: false,
},
created: function(){
},
};
</script>
android端放在hdpi中即可
ios端可放在项目目录均可,一般放在打包后的js文件同级目录
web端放在打包后的html文件和js文件同级目录
weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。
Weex 是一个既支持多个前端框架又能跨平台渲染的框架,JS Framework 介于前端框架和原生渲染引擎之间,处于承上启下的位置,也是跨框架跨平台的关键。无论你使用的是 Vue 还是 Rax,无论是渲染在 Android 还是 iOS,JS Framework 的代码都会运行到
在讲WeexBox之前,我们先来看看Weex是如何做图片加载的。Weex提供了<image>来加载图片,更具体的说,<image>有3种使用方式。于是乎,调试的时候跑npm run debug xxx/App.vue的时候,本机图片可以正常显示了。部署的时候,任君挑选是要部署到服务器还是app中。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!