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

妖狐艹你老母 2022-07-10 04:25 275阅读 0赞

一、介绍

weex 是阿里出品的一个类似RN的框架，可以使用前端技术来开发移动应用，实现一份代码支持H5，IOS和Android。最新版本的weex已默认将vue.js作为前端框架，而weex-hacknews则是weex官方出品的，首个使用 Weex 和 Vue 开发的 Hacker News 原生应用，在项目中使用了 Vuex 和 vue-router等官方组件 。因此这个应用可以作为weex-vue开发的典范，分析该项目代码可以了解如何使用weex技术栈进行开发，实现同一份代码在 iOS、Android、Web 下都能完整地工作。

1、下载

下载地址：https://github.com/weexteam/weex-hackernews

使用git clone项目或者直接下载zip包

2、安装

安装依赖：

npm install

编译代码：

npm run build

![38465-20170221195141804-325785029.png][]

启动 Web 服务

npm run serve

![38465-20170221195143070-1639172851.png][]

3、访问

启动服务后会监听 1337 端口，访问 http://127.0.0.1:1337/index.html 即可在浏览器中预览页面。

Chrome浏览器打开，F12进入开发者模式，启用手机模拟，可以看到如下的效果

3.1 首页

![38465-20170221195144038-1144410431.png][]

3.2 评论页

![38465-20170221195144648-1920247530.png][]

更多的请自行安装体验。

二、代码分析

将项目里的src导入到IDE里，可以看到代码结构如下：

![38465-20170221195145116-440853456.png][]

1、简单说明

1.  components ——vue组件
2.  views ——视图
3.  store ——Vuex
4.  mixins——扩展
5.  filters——vue.js 的filter
6.  App.vue 主UI界面
7.  entry.js 入口程序
8.  router.js ——vue-router

2、入口程序

上代码：

![38465-20170221195145804-1419875783.png][]

该段代码主要实现将各个组件和扩展导入，执行各种初始化工作，包括view、store、router等核心功能。暂且说这么多，后面再详说。

3、vue-router

*3.1 vue-router介绍*

vue-router （https://github.com/vuejs/vue-router）是vue.js生态里重要的一环，是vue.js官方router ，它与Vue.js核心深度集成，使得使用Vue.js构建单页面应用程序变得轻而易举，包含如下特性:

*  嵌套路由/视图映射
 *  基于组件的路由器配置
 *  路由参数，查询，通配符
 *  集成Vue.js页面过渡效果
 *  导航控制
 *  历史记录：HTML5 history mode 或者 hash mode

我们从hackernews项目来看如何使用vue-router：

![38465-20170221195146616-1088036241.png][]

*3.2 代码分析*

*  首先，需要import Router from 'vue-router'，导入Router，然后Vue.use(Router)
 *  rourter是基于组件的路由配置，所以还需要导入各种View
 *  最重要的，router需要返回Router的实例对象，关键是配置routes，如代码所示，routes是一个json-array，里面的每一个json-object包含了path和component
    
     *  path支持字符串、通配符
     *  component返回一个View
     *  看到这里大概就理解了router的原理，通过path去匹配，然后返回匹配的View，比如访问主页，route里配置的是redirect：'/top', 则会跳转到top
     *  项目里，top，new，show等都是StoriesView，只是类型不同，所以createStoriesView函数用于实例化不同类型的StoriesView
 *  路由跳转
    
     *  跳转：包含两种方式，声明和编程。
        
         *  <router-link :to="...">
         *  router.push(...)
            
             *  router.push(\{ path: 'home' \})
             *  router.push('home')
             *  router.push(\{ name: 'user', params: \{ userId: 123 \}\})
        
        ![38465-20170221195147179-651148982.png][]
     *  这里顺带提一下mixins，在入口代码里有
    
    // register global mixins. 
    
    Vue.mixin(mixins) 
    
    我们来看mixins 
    
     *  ![38465-20170221195147554-414288460.png][]
     *  Vue.mixin 混合是一种灵活的分布式复用 Vue  组件的方式，所有混合对象的选项将被混入该组件本身的选项，因此上述代码实现为Vue组件增加jump方法，而jump的核心就是路由的跳转。mixin后，可以在vue组件里使用jump方法。例如：<div class="link" @click="jump('/top')">
    
    4、vuex
    
    *4.1 vuex介绍*
    
    *Vuex 是一个专为 Vue.js  应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex  也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。*
    
    状态管理模式，开发中大型单页应用时需要使用到，Vuex 借鉴了 Flux、Redux等成熟框架的思想开发而成。什么是"状态管理模式"呢，我们来看官方的说明： 
    
    让我们从一个简单的 Vue 计数应用开始：
    
    new Vue(\{   
    // state  
    data () \{   
    return \{   
    count: 0  
    \}  
    \},  
    // view  
    template: \`  
    <div>\{ \{ count \}\}</div>  
    \`,  
    // actions  
    methods: \{   
    increment () \{   
    this.count\++  
    \}  
    \}  
    \})
    
    这个状态自管理应用包含以下几个部分：
    
     *  state，驱动应用的数据源；
     *  view，以声明方式将state映射到视图；
     *  actions，响应在view上的用户输入导致的状态变化。
    
    以下是一个表示"单向数据流"理念的极简示意：
    
    ![38465-20170221195147960-559927432.png][]
    
    但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
    
     *  多个视图依赖于同一状态。
     *  来自不同视图的行为需要变更同一状态。
    
    我们可以把组件的共享状态抽取出来，以一个全局单例模式管理。这样组件树构成了一个巨大的"视图"，不管在树的哪个位置，任何组件都能获取状态或者触发行为。另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，代码将会变得更结构化且易维护。
    
    Vuex包含State，Getters，Mutations ,Actions 和Modules 五大核心概念
    
     *  State ： Vuex 使用 单一状态树，State是全局唯一数据源，可以理解为state为数据库
     *  Getters可以认为是 store 的计算属性，类似面向对象类里的get，set
     *  mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
     *  Actions Action 类似于 mutation，不同在于：
        
         *  Action 提交的是 mutation，而不是直接变更状态
         *  Action 可以包含任意异步操作
     *  Modules ： 使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪，Vuex 允许将 store 分割到模块（module），每个模块拥有自己的 state、mutation、action、getters
    
    再来看下面的图，Sate作为全局数据源，可以通过Action提交Mutation来改变State，State改变后自动Render到Vue的component,同时可以安装vue.js提供的devtools查看mutation变更记录。
    
    ![38465-20170221195148648-462527583.png][]

*4.2 代码分析*

4.2.1 导入Vuex

import Vuex from 'vuex'

4.2.2 定义Store，实例化Vuex.Store

![38465-20170221195149007-407421880.png][]

4.2.3 定义state 和getters

state是全局唯一数据，定义了包含items，lists等需要展示到UI上的数据，getters可以理解为state的一个切片或者视图函数，返回符合条件的特定数据。

![38465-20170221195149538-926850128.png][]

4.2.4 mutation

回顾下前面说的，state的所有改变必须是通过mutation，我们来看实现：

每个mutation是一个函数，第一个参数是state，第二个是所谓的载荷，理解为变化的数据

![38465-20170221195150179-2116745627.png][]

mutation如何调用的呢？

*  store.commit('mutation名称')
 *  store.commit('mutation名称', \{ 
    
    参数: 参数值 
    
    \})

**Vuex 规定mutation必须是同步函数，不能为异步。**

4.2.5 数据API

store最主要的功能就是获取和存储数据，如何获取数据呢？

weex中通过stream提供网络访问功能，通过stream.fetch获取，注意fetch.js里fetch函数返回的是一个Promise对象

关于Promise，不了解的可以查看(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Promise)

store/fetch.js

![38465-20170221195150835-1557476690.png][]

4.2.6 action

进入store/action.js

看code：

**export function** *FETCH\_LIST\_DATA*(\{ *commit*,*dispatch*,*state*\},\{ *type*\})\{

*commit*('SET\_ACTIVE\_TYPE',\{ *type*\})

**return** *fetchIdsByType*(*type*)

.**then**(*ids***=>***commit*('SET\_LIST',\{ *type*,*ids*\}))

.**then**(()**=>***dispatch*('ENSURE\_ACTIVE\_ITEMS'))

*  定义了一个名为FETCH\_LIST\_DATA的action
 *  Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
 *  为什么*FETCH\_LIST\_DATA的第一个参数是*\{ *commit*,*dispatch*,*state*\}？因为使用了ES2015 的 参数解构 来简化代码
 *  commit('SET\_ACTIVE\_TYPE',\{type\}) 实现调用名为SET\_ACTIVE\_TYPE 的mutation，传递的参数为type，可以回过头去看下mutation的定义
 *  *fetchIdsByType返回的是*Promise对象，后面两个then理解为异步结果回调函数，第一个是操作成功，则调用SET\_LIST Mutation，第二个then则是处理失败

5、filters过滤器

filter是vue.js的一个特性，

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档， http://cn.vuejs.org/api/\#过滤器 ，过滤器通常会使用管道标志 " | "， 比如：

\{ \{ msg | capitalize \}\}

// 'abc' => 'ABC'

项目里的定义如下：

![38465-20170221195154538-1917597809.png][]

提供了获取host，以及格式化时间的filter

看下如何使用过滤器

<**text** class=**"text-cellsmall-text"**>**|\{ \{comment.time|timeAgo\}\} ago**</**text**>

未完待续…

[38465-20170221195141804-325785029.png]: /images/20220709/771a9099bc0d4e0a9edb897846753f0a.png
[38465-20170221195143070-1639172851.png]: /images/20220709/862f56f34b794f80814d3e914229e237.png
[38465-20170221195144038-1144410431.png]: /images/20220709/338e1c313b03454bbfcd4ff98a41602e.png
[38465-20170221195144648-1920247530.png]: /images/20220709/388d7964759c4b8f85031522c57505e9.png
[38465-20170221195145116-440853456.png]: /images/20220709/b52dfef80f8242599122e6f0c75d2436.png
[38465-20170221195145804-1419875783.png]: /images/20220709/6969e7fed70a45a98b4a5eff1f307039.png
[38465-20170221195146616-1088036241.png]: /images/20220709/92fa26849a4b406b822e063db52b0108.png
[38465-20170221195147179-651148982.png]: /images/20220709/ec911250ce984dfb855de19786769eaf.png
[38465-20170221195147554-414288460.png]: /images/20220709/6ea7a5f7111545ed918b28dbf39a0016.png
[38465-20170221195147960-559927432.png]: /images/20220709/33ad2a9a3dc84c10ada0489041f3c21e.png
[38465-20170221195148648-462527583.png]: /images/20220709/999e6fffc03f4f72979989ae4f6e271c.png
[38465-20170221195149007-407421880.png]: /images/20220709/4c8af2b5411e4ad2995182c2a16b74fb.png
[38465-20170221195149538-926850128.png]: /images/20220709/3dd71c5be13f4ff4a80a0d9d86de263d.png
[38465-20170221195150179-2116745627.png]: /images/20220709/da7acf2be9d04509bb36c314970cf251.png
[38465-20170221195150835-1557476690.png]: /images/20220709/823042743c0b4754b143417a9c679706.png
[38465-20170221195154538-1917597809.png]: /images/20220709/71c8034c9a624e7d82be25ceadc7312d.png