weex官方demo weex-hackernews代码解读(下)

weex 是阿里出品的一个类似RN的框架,可以使用前端技术来开发移动应用,实现一份代码支持H5,IOS和Android。而weex-hacknews则是weex官方出品的,首个使用 Weex 和 Vue 开发的 Hacker News 原生应用,在项目中使用了 Vuex 和 vue-router等官方组件。本文会分析weex-hacknews的代码,学习如何使用weex进行开发,本文是第二部分,第一部分见(http://www.cnblogs.com/xiaoqi/p/weex-hackernews-code-part1.html)

 接上文

二、代码分析

6、再看入口程序

代码如下,注意标红的位置:

6.1 App.vue

代码如下:

定义了一个div作为body容器,router-view作为component容器

@androidback="back"处理了Android返回按钮点击事件,点击返回按钮时,router执行back回退。

6.2 入口程序

通过Vue.util.extend,将router和store注入到所有子组件,这样就可以使用`this.$router`and`this.$store`来访问路由和vuex。

代码最后一行,router.push('/') , 跳转到'/', 根据上篇的内容,会跳转到/top

7、 首页

我们来看StoriesView,主要UI代码如下:

几个关键点如下:

7.1 组件通过props属性传递数据

Vues.js可以使用 props 把数据传给子组件,prop 是父组件用来传递数据的一个自定义属性,子组件需要显式地用 props 选项声明 "prop":

我们再来看router.js里的createStoriesView方法,是否恍然大悟?

7.2 子组件

在StoriesView中,包含app-header、story两个子组件,使用时需要import:

7.2.1 app-header 组件
代码如下:

几个关键点:

  • @click 处理点击事件,jump是在入口程序里mixin的router跳转函数
  • weex里,text用于显示文本元素,可以理解为html里的span
7.2.2 story 组件

<story :story="story"></story>

调用的时候,将story对象作为props传递过去了,我们猜测下,story组件有一个story的props属性,来看代码验证:

不出所料,包含story对象,并且是required,通过该属性将story传递过来。

值得一提的是,这里使用了timeAgo filter,还有extennal-link子组件,v-if条件判断等。

剩下的就是具体的数据绑定,不细说了。

7.2.3 数据加载
  • 在入口程序通过Vue.util.extend将store注入,所以在子组件可以使用this.$store访问vuex
  • 通过名为stories的computed计算属性访问数据
  • 在created(vue.js生命周期,可理解为jq的ready)时,调用fetchListData,实则是调用FETCH_LIST_DATA action,调用前设置loading为true,显示loading;
  • 处理成功的话,设置loading = false,loading隐藏。
  • loadMoreStories 则是加载更多数据,list列表事件,下滑到底部时触发

  其他页面类似,这里就不一 一介绍了

三、小结

weex-hacknews的代码分析就告一段落了,总体感觉:

  • Weex 可以让前端开发人员开发native app程序,值得点赞,但缺点是目前坑还比较多,开源社区资源也较少
  • Vuejs router应该是简化了开发,推荐使用
  • vuex则较难理解,开发复杂度也较高,大家在实际项目中需要酌情考虑是单独维护组件的state,还是使用vuex维护全局的state,推荐中大型的单页应用项目使用vuex

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android开发指南

安卓模拟器

4309
来自专栏IMWeb前端团队

解读bootstrap v4 sass设计

首先关于bootstrap从v3的less转到v4的sass的十万个为什么,这里暂且不表(计划会另起一篇文章对比less,sass,postcss)。 其次本篇...

3010
来自专栏Jerry的SAP技术分享

微信小程序开发系列五:微信小程序中如何响应用户输入事件

通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上,让我们进一步学习微信小程序控制器,掌握在小...

1042
来自专栏Golang语言社区

Go语言TCP Socket编程--1

Go语言TCP Socket编程 Golang的 主要 设计目标之一就是面向大规模后端服务程序,网络通信这块是服务端 程序必不可少也是至关重要的一部分。在日常应...

3956
来自专栏后端之路

乌龙事件之chrome页面部分白屏

背景 最近客户抱怨网页加载慢 经常出不来,但是从后端查看大部分页面都还算及时结束! 除了和劫持有关的问题之外网页慢!谁的锅?【通过network可以观察得出】 ...

3614
来自专栏软件开发

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

一、浏览器兼容 1.1、概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同,相同内核的版本不同...

2349
来自专栏指尖下的Android

AndroidStudio无法输出日志的Bug

正常情况下我们在真机调试程序时,如图箭头所指的位置显示的应该是该应用的主包名,但是有的时候明明打开了开发者模式,但是却无法输出日志,该位置显示的也不是应用包名,...

1632
来自专栏Linyb极客之路

前端性能优化-雅虎军规35条

合并图片(如css sprites,内置图片使用数据)、合并CSS、JS,这一点很重要,但是要考虑合并后的文件体积。

1195
来自专栏james大数据架构

Eclipse快捷键大全

一、实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制)、CTRL+X(剪切)、CTRL+Z(撤销)、CTRL+F(查找)、CTRL+H(搜索文件或字符串)...

18910
来自专栏Aloys的开发之路

C++从键盘输入文件结束符

        当我们使用一个istream对象作为条件时,其效果是检测流的状态。如果流是有效的,即流未遇到错误,那么检测成功。当遇到文件结束符,或遇到一个无...

2558

扫码关注云+社区