i8本地兼容html5文件,@ali/weex-html5 0.3.5版本 加载本地bundle中的图片失败

本文详细介绍了如何使用Weex框架结合HTML5构建网页应用,展示了如何设置组件宽度和高度为100%,并演示了如何通过var定义和加载bundleContent中的内容。重点在于模块的导入与导出,以及一个包含图片、文本和CSS样式的简单组件的实现。
摘要由CSDN通过智能技术生成
Weex HTML5

html, body, #weex {

width: 100%;

height: 100%;

}

var bundleContent = 'LyoqKioqKi8gKGZ1bmN0aW9uKG1vZHVsZXMpIHsgLy8gd2VicGFja0Jvb3RzdHJhcAovKioqKioqLyAJLy8gVGhlIG1vZHVsZSBjYWNoZQovKioqKioqLyAJdmFyIGluc3RhbGxlZE1vZHVsZXMgPSB7fTsKCi8qKioqKiovIAkvLyBUaGUgcmVxdWlyZSBmdW5jdGlvbgovKioqKioqLyAJZnVuY3Rpb24gX193ZWJwYWNrX3JlcXVpcmVfXyhtb2R1bGVJZCkgewoKLyoqKioqKi8gCQkvLyBDaGVjayBpZiBtb2R1bGUgaXMgaW4gY2FjaGUKLyoqKioqKi8gCQlpZihpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXSkKLyoqKioqKi8gCQkJcmV0dXJuIGluc3RhbGxlZE1vZHVsZXNbbW9kdWxlSWRdLmV4cG9ydHM7CgovKioqKioqLyAJCS8vIENyZWF0ZSBhIG5ldyBtb2R1bGUgKGFuZCBwdXQgaXQgaW50byB0aGUgY2FjaGUpCi8qKioqKiovIAkJdmFyIG1vZHVsZSA9IGluc3RhbGxlZE1vZHVsZXNbbW9kdWxlSWRdID0gewovKioqKioqLyAJCQlleHBvcnRzOiB7fSwKLyoqKioqKi8gCQkJaWQ6IG1vZHVsZUlkLAovKioqKioqLyAJCQlsb2FkZWQ6IGZhbHNlCi8qKioqKiovIAkJfTsKCi8qKioqKiovIAkJLy8gRXhlY3V0ZSB0aGUgbW9kdWxlIGZ1bmN0aW9uCi8qKioqKiovIAkJbW9kdWxlc1ttb2R1bGVJZF0uY2FsbChtb2R1bGUuZXhwb3J0cywgbW9kdWxlLCBtb2R1bGUuZXhwb3J0cywgX193ZWJwYWNrX3JlcXVpcmVfXyk7CgovKioqKioqLyAJCS8vIEZsYWcgdGhlIG1vZHVsZSBhcyBsb2FkZWQKLyoqKioqKi8gCQltb2R1bGUubG9hZGVkID0gdHJ1ZTsKCi8qKioqKiovIAkJLy8gUmV0dXJuIHRoZSBleHBvcnRzIG9mIHRoZSBtb2R1bGUKLyoqKioqKi8gCQlyZXR1cm4gbW9kdWxlLmV4cG9ydHM7Ci8qKioqKiovIAl9CgoKLyoqKioqKi8gCS8vIGV4cG9zZSB0aGUgbW9kdWxlcyBvYmplY3QgKF9fd2VicGFja19tb2R1bGVzX18pCi8qKioqKiovIAlfX3dlYnBhY2tfcmVxdWlyZV9fLm0gPSBtb2R1bGVzOwoKLyoqKioqKi8gCS8vIGV4cG9zZSB0aGUgbW9kdWxlIGNhY2hlCi8qKioqKiovIAlfX3dlYnBhY2tfcmVxdWlyZV9fLmMgPSBpbnN0YWxsZWRNb2R1bGVzOwoKLyoqKioqKi8gCS8vIF9fd2VicGFja19wdWJsaWNfcGF0aF9fCi8qKioqKiovIAlfX3dlYnBhY2tfcmVxdWlyZV9fLnAgPSAiIjsKCi8qKioqKiovIAkvLyBMb2FkIGVudHJ5IG1vZHVsZSBhbmQgcmV0dXJuIGV4cG9ydHMKLyoqKioqKi8gCXJldHVybiBfX3dlYnBhY2tfcmVxdWlyZV9fKDApOwovKioqKioqLyB9KQovKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqLwovKioqKioqLyAoWwovKiAwICovCi8qKiovIGZ1bmN0aW9uKG1vZHVsZSwgZXhwb3J0cykgewoKCTtfX3dlZXhfZGVmaW5lX18oIkB3ZWV4LWNvbXBvbmVudC8xYWUyYWE0Yzg3NDllMmY1NmUyMDYxZGRhYzcyNDdhYiIsIFtdLCBmdW5jdGlvbihfX3dlZXhfcmVxdWlyZV9fLCBfX3dlZXhfZXhwb3J0c19fLCBfX3dlZXhfbW9kdWxlX18pewoKCTsKCSAgX193ZWV4X21vZHVsZV9fLmV4cG9ydHMgPSB7CgkgICAgZGF0YTogZnVuY3Rpb24gKCkge3JldHVybiB7CgkgICAgICBjdEhlaWdodDogODAwLAoJICAgICAgaW1nOiAnaHR0cDovL2d3LmFsaWNkbi5jb20vdHBzL2kyL1RCMURwc21NcFhYWFhhYmFYWFgyMHlTUVZYWC01MTItNTEyLnBuZ180MDB4NDAwLmpwZycKCSAgICB9fSwKCSAgICByZWFkeTogZnVuY3Rpb24gKCkgewoJICAgICAgdGhpcy5jdEhlaWdodCA9IHRoaXMuJGdldENvbmZpZygpLmVudi5kZXZpY2VIZWlnaHQKCSAgICB9CgkgIH0KCgk7X193ZWV4X21vZHVsZV9fLmV4cG9ydHMudGVtcGxhdGUgPSBfX3dlZXhfbW9kdWxlX18uZXhwb3J0cy50ZW1wbGF0ZSB8fCB7fQoJO09iamVjdC5hc3NpZ24oX193ZWV4X21vZHVsZV9fLmV4cG9ydHMudGVtcGxhdGUsIHsKCSAgInR5cGUiOiAiZGl2IiwKCSAgImNsYXNzTGlzdCI6IFsKCSAgICAiY3QiCgkgIF0sCgkgICJzdHlsZSI6IHsKCSAgICAiaGVpZ2h0IjogZnVuY3Rpb24gKCkge3JldHVybiB0aGlzLmN0SGVpZ2h0fQoJICB9LAoJICAiY2hpbGRyZW4iOiBbCgkgICAgewoJICAgICAgInR5cGUiOiAiaW1hZ2UiLAoJICAgICAgImNsYXNzTGlzdCI6IFsKCSAgICAgICAgImltZyIKCSAgICAgIF0sCgkgICAgICAic3R5bGUiOiB7CgkgICAgICAgICJ3aWR0aCI6IDQwMCwKCSAgICAgICAgImhlaWdodCI6IDQwMAoJICAgICAgfSwKCSAgICAgICJhdHRyIjogewoJICAgICAgICAic3JjIjogZnVuY3Rpb24gKCkge3JldHVybiB0aGlzLmltZ30KCSAgICAgIH0KCSAgICB9LAoJICAgIHsKCSAgICAgICJ0eXBlIjogInRleHQiLAoJICAgICAgInN0eWxlIjogewoJICAgICAgICAiZm9udFNpemUiOiA0MgoJICAgICAgfSwKCSAgICAgICJhdHRyIjogewoJICAgICAgICAidmFsdWUiOiAiSGVsbG8gd29ybGQhIgoJICAgICAgfQoJICAgIH0KCSAgXQoJfSkKCTtfX3dlZXhfbW9kdWxlX18uZXhwb3J0cy5zdHlsZSA9IF9fd2VleF9tb2R1bGVfXy5leHBvcnRzLnN0eWxlIHx8IHt9Cgk7T2JqZWN0LmFzc2lnbihfX3dlZXhfbW9kdWxlX18uZXhwb3J0cy5zdHlsZSwgewoJICAiY3QiOiB7CgkgICAgIndpZHRoIjogNzUwLAoJICAgICJhbGlnbkl0ZW1zIjogImNlbnRlciIsCgkgICAgImp1c3RpZnlDb250ZW50IjogImNlbnRlciIKCSAgfSwKCSAgImltZyI6IHsKCSAgICAibWFyZ2luQm90dG9tIjogMjAKCSAgfQoJfSkKCX0pCgk7X193ZWV4X2Jvb3RzdHJhcF9fKCJAd2VleC1jb21wb25lbnQvMWFlMmFhNGM4NzQ5ZTJmNTZlMjA2MWRkYWM3MjQ3YWIiLCB7CgkgICJ0cmFuc2Zvcm1lclZlcnNpb24iOiAiMC4zLjEiCgl9LHVuZGVmaW5lZCkKCi8qKiovIH0KLyoqKioqKi8gXSk7';

(function () {

var loader = 'source'

window.weex.init({

appId: location.href,

loader: loader,

source: Base64.decode(bundleContent),

rootId: 'weex'

})

})();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值