在講WeexBox之前,我們先來看看Weex是如何做圖片加載的。
Weex提供了<image>來加載圖片,更具體的說,<image>有3種使用方式。
src=Base64
誰會把Base64硬寫到源碼裏?
src=http
那我是不是要先把圖片部署到服務器,再把這個圖片的地址拷貝來用,麻煩不麻煩?
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中。
由此可見,切換圖片源不用你改動任何一行業務代碼,weexbox全部幫你搞定了。