資訊專欄INFORMATION COLUMN
摘要：官方群號(hào)在講之前，我們先來(lái)看看是如何做圖片加載的。提供了來(lái)加載圖片，更具體的說(shuō)，有種使用方式。綜上，的這種方式用著都很別扭。拋開的限制，我就問你開發(fā)中使用圖片最舒服的方式是什么。于是乎，調(diào)試的時(shí)候跑的時(shí)候，本機(jī)圖片可以正常顯示了。
WeexBox官方QQ群號(hào):943913583
在講WeexBox之前，我們先來(lái)看看Weex是如何做圖片加載的。
Weex提供了
src=Base64 誰(shuí)會(huì)把Base64硬寫到源碼里？
src=http 那我是不是要先把圖片部署到服務(wù)器，再把這個(gè)圖片的地址拷貝來(lái)用，麻煩不麻煩？
src=相對(duì)路徑 相對(duì)路徑是相對(duì)bundle URL的，相對(duì)路徑將被重寫為絕對(duì)資源路徑(本地或遠(yuǎn)程)。 但是我在開發(fā)的時(shí)候，我更清楚的知道圖片相對(duì)源碼的路徑而不是最終bundle的路徑。
綜上，weex的這3種方式用著都很別扭。
拋開weex的限制，我就問你開發(fā)中使用圖片最舒服的方式是什么。
答案當(dāng)然是：臥槽用file-loader?。?/p>
如果把file-loader集成進(jìn)weex項(xiàng)目，在項(xiàng)目里用file-loader的方式引用圖片，跑weex debug肯定是會(huì)報(bào)錯(cuò)的，不信的童鞋可以試試。
于是WeexBox提供了@weexbox/debugger和@weexbox/builder。它們不但能讓你開心的用file-loader，還提供了一些便利的功能。
假設(shè)你已經(jīng)用@weexbox/cli初始化好了項(xiàng)目，并且會(huì)使用file-loader。使用圖片大概是這樣的。（點(diǎn)擊查看完整例子）
這種使用圖片的方式是不是既熟悉又懷念。
重點(diǎn)來(lái)了，打開config/update-config.json文件，你能看到形如下面的配置。
const config = {
develop: {
// 從網(wǎng)絡(luò)加載圖片
imagePublicPath: "https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy",
},
test: {
// 從網(wǎng)絡(luò)加載圖片
imagePublicPath: "https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy",
},
preRelease: {
// 從app加載圖片
imagePublicPath: "bundle://",
},
release: {
// 從app加載圖片
imagePublicPath: "bundle://",
},
}
module.exports = config
當(dāng)imagePublicPath為http時(shí)，需要你自己把deploy部署到服務(wù)器，圖片地址即是部署的地址。
當(dāng)imagePublicPath為bundle://時(shí)，weexbox會(huì)自動(dòng)拷貝static到app中。
于是乎，調(diào)試的時(shí)候跑npm run debug xxx/App.vue的時(shí)候，本機(jī)圖片可以正常顯示了。部署的時(shí)候，任君挑選是要部署到服務(wù)器還是app中。
由此可見，切換圖片源不用你改動(dòng)任何一行業(yè)務(wù)代碼，weexbox全部幫你搞定了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101988.html
摘要：目前團(tuán)隊(duì)使用已研發(fā)了好幾款，它能滿足及支撐我們上百個(gè)頁(yè)面的業(yè)務(wù)場(chǎng)景，讓我們的開發(fā)效率大大提升，使我們的技術(shù)棧更加完善。最后希望我們的方案能幫助開發(fā)中的你。 showImg(https://segmentfault.com/img/remote/1460000017460300?w=2166&h=2166); WeexBox 一套簡(jiǎn)潔高效的APP混合開發(fā)解決方案 寫在開頭 WeexBox...
摘要：官方群號(hào)背景官方提供了模塊可以用來(lái)在組件上執(zhí)行動(dòng)畫，但是它的功能有限還容易造成卡頓。它通過做成動(dòng)畫導(dǎo)出文件，然后前端使用直接加載文件生成動(dòng)畫，不需要前端進(jìn)行復(fù)雜的繪制等操作。多現(xiàn)成可用的優(yōu)秀動(dòng)畫在這里中使用因?yàn)樘?jiǎn)單，我就直接貼代碼了。 showImg(https://segmentfault.com/img/bVbntuK?w=300&h=300); WeexBox官方QQ群號(hào):94...
閱讀 1255·2021-09-22 15:32
閱讀 1814·2019-08-30 15:53
閱讀 3330·2019-08-30 15:53
閱讀 1487·2019-08-30 15:43
閱讀 532·2019-08-28 18:28
閱讀 2673·2019-08-26 18:18
閱讀 762·2019-08-26 13:58
閱讀 2615·2019-08-26 12:10
