weex 学习手记
现今大前端趋势势如破竹,公司不少native相关人员都在做js 相关技术,本人从事 iOS以及node 后端开发,学习大前端也是顺理成章,前阵子用mpvue 搞了小程序,对前端相关技术有些许了解,再把以前一直要搞的weex重拾起来,遂有不少心得。
router 与navigator 关系。
- vuerouter
先看下官网
vue-router 是专为 Vue.js 开发的便于实现单页应用的工具库,能够以声明式的方法编写页面的导航和跳转信息
由于 Weex 的运行环境不只是浏览器,通常是以移动端原生环境为主,然而在 Android 和 iOS 中都没有浏览器的 History API,也不存在 DOM,因此如果想在 Weex 环境中使用 vue-router ,有些功能受到了限制,使用时应该注意。
我们在entry.js 中有写这么一句 router.push('/');
,这就是一个路由跳转。
在index.vue (默认入口文件)<router-view class="r-box"></router-view>
这个router-view不能忽略 这玩意就是用来跳转切换的view。你的每次 router.push()
都是操作的这个router-view
。可以说是前端的写法
- navigator
先看下官网
原生开发者来说,就熟悉这个玩意了。我们拿iOS来说 就相当于 navigationController -> push 入栈的操作。它就是将weex 压入原生的导航堆栈中的操作。
看下用法
<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>