本文讲解内容为weex加载三端本地图片,所写解决方案均已验证,使用sdk版本为0.18.0,其他版本不能保证可行。
weex加载图片方式有三种,1.src直接引用base64编码,2.加载网络图片,3.加载本地图片(三端分别放在项目目录)。前两种都是比较简单直接,第三种相对初学者会比较头疼,尤其对于只掌握一端开发的人员来说,验证其他端就是比较难的事情。借着公司项目作为一个android开发人员写了一些weex页面功能,有机会和资源来调试验证,今天终于完成了三端本地图片的加载,特此分享和记录。
weex项目中引用
- 由于三端图片路径不一致,所以需要写一个方法来分别转换路径:
在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可放至项目中任何目录
get_img_path: function(img_name) {
let platform = weex.config.env.platform
let img_path = ''
if (platform == 'Web') {
img_path = `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 = `../images/${img_name}`
img_path = `local:///${img_name}`
}
return img_path
},
- entry.js中配置全局引用该index.js文件:
import mixins from '@/mixins'
// register global mixins.
Vue.mixin(mixins)
- vue中调用get_img_path(‘test.png’)方法:
template中使用:
<image class = "border-image" style="width:200px;height:200px; margin-left:50px;" :src="get_img_path('test.png')"/>
script中使用:
me.get_img_path('test.png')
三端图片放置
- android端放在hdpi中即可
- ios端可放在项目目录均可,一般放在打包后的js文件同级目录
- web端放在打包后的html文件和js文件同级目录
上文中已有详细注释:
// 获取图片在三端上不同的路径
// e.g. 图片文件名是 test.jpg, 转换得到的图片地址为
// - H5 : images/test.jpg images和所在html路径同级
// - Android : local:///test local代表项目各dpi目录,一般放在hdpi里一张即可
// - iOS : local///test.jpg local代表从项目中全局扫描 test.jpg可放至项目中任何目录
以上方案已在项目中应用没有问题,希望对遇到此问题的同学有所帮助。