新年伊始,回顾过去的一年,收获很多,之前一直在研究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 阶段总结的更多相关文章

  1. 第八章 交互技术,8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障(作者:鬼道)

    8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障 前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的.流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近 ...

  2. Weex详解:灵活的移动端高性能动态化方案

    原文地址:http://www.infoq.com/cn/articles/introducing-weex 在2016年4月份的QCon上,阿里巴巴资深总监,淘宝移动平台及新业务事业部.阿里百川负责 ...

  3. weex入门

    近期要做一个安卓端的原生应用程序.情况是这样的:需求方原先已经实现了网页,是一个工具类应用,大致作用是连接到他们公司生产的硬件,然后通手机与智能硬件通信来对硬件进行一系列控制.不过呢,这个网页先前是由 ...

  4. Weex入门指南

    背景 由于公司项目需要,需求变化频繁,计划总改不上变化,由于app更新版本周期长,不能很好应对这种变化,正在此前提下热修复和热更新技术也有了发展的空间,不管热修复还是热更新,都是对app内容或者逻辑的 ...

  5. 阿里巴巴开源前端框架--Weex实践

    Weex是最近很火很NB的一个技术产品,因为本篇介绍的是怎样使用Weex的最佳实践,所以就不罗里吧嗦的夸它怎么怎么好了,感兴趣的可以访问Weex HomePage,或加入旺旺群:1330170019. ...

  6. Weex 初探

    Weex 初探 Weex 介绍 Weex 是阿里于 2016 年开源的一款开发框架,它的介绍是: Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架. 它使用了 Web 技术来开发 An ...

  7. 移动端跨平台方案对比:React Native、weex、Flutter

    跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需 ...

  8. WEEX入坑指南(1)

    weex create newtest 然后在某个阶段卡死, 解决方案: 在路径下创建新建文件夹,并命名为项目的名称.

  9. 最火移动端跨平台方案盘点:React Native、weex、Flutter

    1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...

随机推荐

  1. i.mx53开发的一些问题

    i.mx53开发的一些问题 转载于此:http://blog.csdn.net/shell_albert/article/details/8242288   原来i.mx53上4GB的Nand Fla ...

  2. 使用VS2015编写驱动时出现的部分错误以及解决方法

    前几日在github上下载了一个Windows驱动的demo,原本想着直接下载下来打开解决方案就可以用,没想到一编译,出现了奇奇怪怪的Error,部分Error网上也没什么好的解决办法,对我这个从未深 ...

  3. 关于Linux下的环境变量

    一.交互式shell和非交互式shell 要搞清bashrc与profile的区别,首先要弄明白什么是交互式shell和非交互式shell,什么是login shell 和non-login shel ...

  4. angular controller与directive相互引用

    /** * Created by Administrator on 2017/8/28. */ var app =angular.module('app',[]); app.directive('fo ...

  5. TOJ 5020: Palindromic Paths

    5020: Palindromic Paths  Time Limit(Common/Java):10000MS/30000MS     Memory Limit:65536KByteTotal Su ...

  6. P1736 创意吃鱼法 (动态规划)

    题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢(猫猫就是这么可爱,吃鱼也要想好吃法 ^_*).她发现,把大池子视为01矩阵(0表示对应位置无鱼,1 ...

  7. day1之校花网小试牛刀

    一 利用生成器来完成爬去校花网视频 import requests import re import os import hashlib import time DOWLOAD_PATH=r'D:\D ...

  8. Linux(6):定时任务

    定时任务 定时任务的说明和分类 # 定时任务分类: 1. crond(crontab) 定时任务软件(软件包 cronie) 2. atd 运行一次 3. anacron 非7*24小时运行的服务器 ...

  9. 更改UISwitch大小

    UISwitch大小总是改不了...找了一个简便方法. 
mySwitch = [[UISwitch alloc] initWithFrame: CGRectMake( width - 55, hei ...

  10. EGO V2

    Original EGO: mkdir -p ~/Library/Developer/Xcode/UserData/FontAndColorThemes; cd ~/Library/Developer ...