在讲WeexBox之前,我们先来看看Weex是如何做图片加载的。Weex提供了<image>来加载图片,更具体的说,<image>有3种使用方式。
1、src=Base64:谁会把Base64硬写到源码里?
2、src=http: 那我是不是要先把图片部署到服务器,再把这个图片的地址拷贝来用,麻烦不麻烦?
3、src=相对路径:相对路径是相对bundle URL的,相对路径将被重写为绝对资源路径(本地或远程)。 但是我在开发的时候,我更清楚的知道图片相对源码的路径而不是最终bundle的路径。
综上,weex的这3种方式用着都很别扭。
抛开weex的限制,我就问你开发中使用图片最舒服的方式是什么。
答案当然是:卧槽用file-loader啊!
如果把file-loader集成进weex项目,在项目里用file-loader的方式引用图片,跑weex debug肯定是会报错的,不信的童鞋可以试试。
于是WeexBox提供了@weexbox/debugger和@weexbox/builder。它们不但能让你开心的用file-loader,还提供了一些便利的功能。
假设你已经用@weexbox/cli初始化好了项目,并且会使用file-loader。使用图片大概是这样的。(点击查看完整例子)
<template>
<div>
<image :src="logo" class="logo" />
</div>
</template>
<script>
import logo from '../../../static/logo.png'
export default {
data() {
return {
logo,
}
},
}
</script>
这种使用图片的方式是不是既熟悉又怀念。
重点来了,打开config/update-config.json文件,你能看到形如下面的配置。
const config = {
develop: {
// 从本机加载图片,只有在调试的时候有效
imagePublicPath: null,
},
test: {
// 从网络加载图片
imagePublicPath: 'https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy',
},
preRelease: {
// 从app加载图片
imagePublicPath: 'bundle://',
},
release: {
// 从网络加载图片
imagePublicPath: 'https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy',
},
}
module.exports = config
当imagePublicPath为null时,weexbox会把static部署到本机。
当imagePublicPath为http时,需要你自己把deploy部署到服务器,图片地址即是部署的地址。
当imagePublicPath为bundle://时,weexbox会自动拷贝static到app中。
于于是乎,调试的时候跑npm run debug xxx/App.vue的时候,本机图片可以正常显示了。部署的时候,任君挑选是要部署到服务器还是app中。
由此可见,切换图片源不用你改动任何一行业务代码,weexbox全部帮你搞定了。
来自:https://segmentfault.com/a/1190000018250543
weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。
Weex 是一个既支持多个前端框架又能跨平台渲染的框架,JS Framework 介于前端框架和原生渲染引擎之间,处于承上启下的位置,也是跨框架跨平台的关键。无论你使用的是 Vue 还是 Rax,无论是渲染在 Android 还是 iOS,JS Framework 的代码都会运行到
weex加载图片方式有三种,1.src直接引用base64编码,2.加载网络图片,3.加载本地图片(三端分别放在项目目录),今天终于完成了三端本地图片的加载,特此分享和记录
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!