摘要：官方群号在讲之前，我们先来看看是如何做图片加载的。提供了来加载图片，更具体的说，有种使用方式。综上，的这种方式用着都很别扭。抛开的限制，我就问你开发中使用图片最舒服的方式是什么。于是乎，调试的时候跑的时候，本机图片可以正常显示了。
WeexBox官方QQ群号:943913583
在讲WeexBox之前，我们先来看看Weex是如何做图片加载的。
Weex提供了
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。使用图片大概是这样的。（点击查看完整例子）
这种使用图片的方式是不是既熟悉又怀念。
重点来了，打开config/update-config.json文件，你能看到形如下面的配置。
const config = {
develop: {
// 从网络加载图片
imagePublicPath: "https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy",
},
test: {
// 从网络加载图片
imagePublicPath: "https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy",
},
preRelease: {
// 从app加载图片
imagePublicPath: "bundle://",
},
release: {
// 从app加载图片
imagePublicPath: "bundle://",
},
}
module.exports = config
当imagePublicPath为http时，需要你自己把deploy部署到服务器，图片地址即是部署的地址。
当imagePublicPath为bundle://时，weexbox会自动拷贝static到app中。
于是乎，调试的时候跑npm run debug xxx/App.vue的时候，本机图片可以正常显示了。部署的时候，任君挑选是要部署到服务器还是app中。
由此可见，切换图片源不用你改动任何一行业务代码，weexbox全部帮你搞定了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101988.html
摘要：目前团队使用已研发了好几款，它能满足及支撑我们上百个页面的业务场景，让我们的开发效率大大提升，使我们的技术栈更加完善。最后希望我们的方案能帮助开发中的你。 showImg(https://segmentfault.com/img/remote/1460000017460300?w=2166&h=2166); WeexBox 一套简洁高效的APP混合开发解决方案 写在开头 WeexBox...
摘要：官方群号背景官方提供了模块可以用来在组件上执行动画，但是它的功能有限还容易造成卡顿。它通过做成动画导出文件，然后前端使用直接加载文件生成动画，不需要前端进行复杂的绘制等操作。多现成可用的优秀动画在这里中使用因为太简单，我就直接贴代码了。 showImg(https://segmentfault.com/img/bVbntuK?w=300&h=300); WeexBox官方QQ群号:94...
阅读 1121·2021-09-22 15:32
阅读 1722·2019-08-30 15:53
阅读 3253·2019-08-30 15:53
阅读 1404·2019-08-30 15:43
阅读 453·2019-08-28 18:28
阅读 2565·2019-08-26 18:18
阅读 668·2019-08-26 13:58
阅读 2528·2019-08-26 12:10
