weex 阶段总结

新年伊始，回顾过去的一年，收获很多，之前一直在研究weex，说心里话感觉心好累，官方文档不全，社区不活跃，遇到很多坑，官方发布的版本有时都有坑，搞得我都不敢更新版本了。

但是，研究了这么久，放弃太可惜，唉，只能抱着相信尤大大能将 weex 打造成 vue 一样的想法一直走下去。

1.weex 默认适配尺寸

weex默认使用750px * 1334px作为适配尺寸, 实际渲染时由于浮点数的误差可能会存在几px的误差, 出现细线等样式问题, 可以通过加减几个px来调试

iPhone界面尺寸

注：style上需要添加 scoped，否则无法自动适配。

2.navigator 页面跳转

示例一：

<script>var navigator = weex.requireModule('navigator')var modal = weex.requireModule('modal')export default {methods: {jump (event) {console.log('will jump')navigator.push({url: 'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js',animated: "true"}, event => {modal.toast({ message: 'callback: ' + event })})}}};
</script>

示例二：

function isWeex () {return process.env.COMPILE_ENV === 'weex' // 需要在webpack中自定义
}export default {methods: {push (path) {if (isWeex()) {const toUrl = weex.config.bundleUrl.split('/').slice(0, -1).join('/') + '/' + path + '.js' // 将a.js的绝对地址转为b.js的绝对地址weex.requireModule('navigator').push({url: toUrl,animated: 'true'})} else {this.$router.push(path) // 使用vue-router}},pop () {if (isWeex()) {weex.requireModule('navigator').pop({animated: 'true'})} else {window.history.back()}}}
}

weex 阶段总结相关推荐

OTT 端性能优化建设之 Weex 实践之路
作者 | 阿里文娱前端技术专家-默吉责编 | 郑丽媛头图 | CSDN下载自视觉中国追求极致的用户体验是个永恒的话题.无论在PC端.移动端,还是IOT端,大家都在尝试着各种技术方案,如提高秒开率 ...
最火移动端跨平台方案盘点：React Native、weex、Flutter
本文原文由"恋猫月亮"原创发布,原题为<移动端跨平台开发的深度解析>,本次重新整理后,为了优化阅读体验,内容略有改动,感谢原作者的无私分享. 1.前言跨平台一直是老生 ...
从Weex到Web，性能逆势如何破局？
简介:双11如丝般顺滑的服务体验背后,是技术团队对性能优化不断地探索尝试.升级迭代.今年飞猪会场实现了主会场直出.重点会场秒开.整体会场体感优秀.飞猪前端技术太吾分享飞猪在前端性能优化上面临的挑战及优 ...
java程序编六角星_跨平台移动端解决方案—Weex
跨端方案背景一 1 起因由于客户端Webview内嵌H5的各种受限,例如性能差.JS执行效率低以及伴随着大量的机型兼容问题,于是有了各种混合跨端开发解决方案:Hybrid.React-Native ...
weex安装环境_WEEX跨平台开发环境搭建
一.Weex简介大约两年前,为了写一本Weex的入门书籍,我花了几个月的时间学习了下Weex跨平台相关的知识. Weex 是阿里前端技术团队开源的一套跨平台开发方案,能以Web的开发体验构建高性能. ...
用WEB技术栈开发NATIVE应用（二）：WEEX 前端SDK原理详解
摘要: WEEX依旧采取传统的web开发技术栈进行开发,同时app在终端的运行体验不输native app.其同时解决了开发效率.发版速度以及用户体验三个核心问题.那么WEEX是如何实现的?目前WEE ...
用WEB技术栈开发NATIVE应用：WEEX SDK原理详解
摘要: WEEX依旧采取传统的web开发技术栈进行开发,同时app在终端的运行体验不输native app.其同时解决了开发效率.发版速度以及用户体验三个核心问题.那么WEEX是如何实现的?目前WEE ...
移动项目工作笔记0002---使用Weex开发移动端应用
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 下面是weex的官网,具体的信息可以去官网查看 https://weex.apache.org/z ...
Weex实战分享|企鹅电竞Weex实践和性能优化
渠宏伟企鹅电竞前端团队Leader H5页面存在的问题 H5页面对比终端的不足,第一,加载慢:第二,交互差. 加载耗时比较长,因为它受限于Webview,Webview在Android上启动就比较慢 ...

weex 阶段总结

iPhone界面尺寸

weex 阶段总结相关推荐

最新文章

热门文章