摘要:官方群号在讲之前,我们先来看看是如何做图片加载的。提供了来加载图片,更具体的说,有种使用方式。综上,的这种方式用着都很别扭。抛开的限制,我就问你开发中使用图片最舒服的方式是什么。于是乎,调试的时候跑的时候,本机图片可以正常显示了。
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...
阅读 1091·2021-09-22 15:32
阅读 1696·2019-08-30 15:53
阅读 3186·2019-08-30 15:53
阅读 1331·2019-08-30 15:43
阅读 394·2019-08-28 18:28
阅读 2538·2019-08-26 18:18
阅读 621·2019-08-26 13:58
阅读 2485·2019-08-26 12:10