|
|
|
# blk-wap项目中的一些注意点
|
|
|
|
|
|
|
|
## 框架结构
|
|
|
|
## 1.框架结构
|
|
|
|
首先，我们先说一下blk-wap项目的架构，这样便于后面的人能够快速上手
|
|
|
|
|
|
|
|
1. 服务端：node的express框架
|
|
|
|
2. ui端：vue + gulp + webpack
|
|
|
|
|
|
|
|
## 目录结构
|
|
|
|
## 2.目录结构
|
|
|
|
|
|
|
|
apps: node服务端业务代码
|
|
|
|
|
|
...
|
...
|
@@ -22,14 +22,14 @@ app.js: node服务入口文件 |
|
|
|
|
|
|
|
dispatch.js :路由分发文件
|
|
|
|
|
|
|
|
## vue
|
|
|
|
## 3.vue
|
|
|
|
|
|
|
|
关于vue部分，如果不熟悉的话，大家可以查看一下官方文档
|
|
|
|
http://cn.vuejs.org/guide/
|
|
|
|
|
|
|
|
这里面主要是组件方面知识，用的比较多。
|
|
|
|
|
|
|
|
## 与app端的交互
|
|
|
|
## 4.与app端的交互
|
|
|
|
混合模式下，比较麻烦的地方是与app原生端的交互。因为有些业务处理需要app端配合处理。
|
|
|
|
|
|
|
|
1.
|
|
...
|
...
|
@@ -39,7 +39,7 @@ http://cn.vuejs.org/guide/ |
|
|
|
2.
|
|
|
|
监听app端事件参看：public/js/common/vue-bus.js文件，是通过一个全局的vue实例的on及emit来处理的。
|
|
|
|
|
|
|
|
## h5页面刷新
|
|
|
|
## 5.页面刷新
|
|
|
|
|
|
|
|
目前页面跳转时。有些场合下需要刷新页面，由于刷新的逻辑在每个页面都不同，所以app端很难来处理。没办法，只能由h5这边来做了。
|
|
|
|
|
|
...
|
...
|
@@ -47,5 +47,17 @@ http://cn.vuejs.org/guide/ |
|
|
|
我们目前的做法是通过localstroage来处理的，也就是yoho.js中的 store属性。
|
|
|
|
如果，你有更好的想法，欢迎提出来。
|
|
|
|
|
|
|
|
## 6.开发中碰到的一些坑
|
|
|
|
|
|
|
|
前端开发，最大的一个坑莫过于适配不同的手机浏览器。混合模式下，这个问题稍微有些好转，因为我们会指定webview的版本号。
|
|
|
|
|
|
|
|
不过对于ios及android的区别，适配的工作量仍然很大。
|
|
|
|
|
|
|
|
我先列出我碰到的一些适配问题，欢迎补充
|
|
|
|
1. <input type='date'> 元素在ios和android的效果是完全不一样的（比如在ios中会显示年月日，在android中则是／）。而这个元素的可设置的属性也很有限。
|
|
|
|
于是只能用曲线救国的办法了， 在input元素下面方一个span，然后把input给背景透明，这样我们就可以通过改动span来显示我们想要的了（欢迎更好的解决方法）
|
|
|
|
|
|
|
|
2. <select> 元素 在ios和android也是完全不一样，在ios中默认值如果未改变的话，是不会触发change事件的。所以目前的做法是在ios的选择项中多加一个默认值。
|
|
|
|
而android则不需要。目前的做法是会根据ua来判断是否是ios，来进行不同的处理
|
|
|
|
|
|
|
|
3. 目前blk－wap项目中的字体全部用的css，不要手动去写unicode码 |
...
|
...
|
|
