Name Last Update
..
code-norm Loading commit data...
fake-data/h5 Loading commit data...
README.md Loading commit data...

blk-wap项目中的一些注意点

框架结构

首先,我们先说一下blk-wap项目的架构,这样便于后面的人能够快速上手

  1. 服务端:node的express框架
  2. ui端:vue + gulp + webpack

目录结构

apps: node服务端业务代码

config: 配置信息

doraemon:express中全局的一些中间件,以及views目录下的一些模版文件

public: 前段ui代码(css,js,vue等)以及打包工具(gulp,webpack)

utils:辅助工具方法

app.js: node服务入口文件

dispatch.js :路由分发文件

vue

关于vue部分,如果不熟悉的话,大家可以查看一下官方文档 http://cn.vuejs.org/guide/

这里面主要是组件方面知识,用的比较多。

与app端的交互

混合模式下,比较麻烦的地方是与app原生端的交互。因为有些业务处理需要app端配合处理。

  1. 涉及到与app端跳转相关的逻辑可参看:public/js/common/intercept-click.js文件 具体规则可参看:http://git.yoho.cn/mobile/AppJSBridge/tree/master

2. 监听app端事件参看:public/js/common/vue-bus.js文件,是通过一个全局的vue实例的on及emit来处理的。

h5页面刷新

目前页面跳转时。有些场合下需要刷新页面,由于刷新的逻辑在每个页面都不同,所以app端很难来处理。没办法,只能由h5这边来做了。

那h5这边是怎么拿到前一个页面的状态,来判定本页面是否需要刷新呢? 我们目前的做法是通过localstroage来处理的,也就是yoho.js中的 store属性。 如果,你有更好的想法,欢迎提出来。