# weex

**Repository Path**: wangziting/weex

## Basic Information

- **Project Name**: weex
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-01-16
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# manufacturer-crm-app

#### 项目介绍


#### 软件架构
1.表现层：
* store/ - Vuex 状态管理
* router/ - vue-router前端路由
* views/ - 各个业务页面
* assets/ - 公共资源
* components/ - 通用组件

2. 业务层：

3. API 层：
* 接口API （mock数据）

4. util层：
* util

#### 目录结构
```
/src
  ├── assets/        # 公共资源
  ├── common/        # 统用配置
  ├── components/    # 统用组件
  ├── core/          # API接口
  ├── filters/       # 通用过滤器
  ├── mixins/        # 全局混合
  ├── store/         # 全局的 Store
  ├── views/         # 视图（页面）
  │
  ├── App.vue        # 根组件
  ├── entry.js       # 入口文件
  └── router.js      # 路由配置
```

#### 项目依赖
```
     "dependencies": {
       "phantom-limb": "0.0.1",
       "vue": "^2.5.11",
       "vue-router": "^3.0.1",
       "vuex": "^3.0.1",
       "weex-ui": "^0.6.7",
       "weex-vue-render": "^0.12.26"
     },
```


#### 安装教程

1. cnpm install
2. npm start
3. weex run android(运行在android手机上)

#### 使用说明

1. 通用组件建议进行封装使用，及时在真机上预览，查看效果，避免native端功能不生效问题
2. 不能使用history模式。原生不支持
3. 不支持display: none;可用opacity: 0;代替，（opacity<=0.01时，元素可点透）
4. 样式属性暂不支持简写（提高解析效率）
5. flex 布局需要注意 web 的兼容性
6. css 不支持 3D 变换
7. 在 Weex 的 ios 和 android 端，并不支持 display 属性。因此，不能使用 display:none; 来控制元素的显隐性，所以 vue 语法中的 v-show 条件渲染是不生效的。我们可以使用 v-if 代替，或者用 opacity:0; 来模拟。
8. 不能使用keep-alive移动端的原生组件不能被前端缓存
9. 不建议使用嵌套路由，路由模式可以如下
```
{
    path: '/mine',
    name: 'mine',
    component: Mine
},
{
    path: '/mine/equipment',
    name: 'equipment',
    component: equipment
},
```

10. 公共组件、方法、过滤规则提取出来放置相应的目录下


###### 交互相关
Weex 到 Weex 之间:
 如果是父子页面关系: emit() refs
 如果是跨页面: BroadcastChannel

 web端状态存储可以使用vuex


###### 参考文档：
* 在 Weex 中使用 Vue.js
http://weex-project.io/cn/guide/use-vue.html
* 与 Web 平台的差异
http://weex-project.io/cn/wiki/platform-difference.html
* 使用 Vuex 和 vue-router
https://www.cnblogs.com/hehey/p/6295480.html
* 网易严选App感受Weex开发（已完结）
https://segmentfault.com/a/1190000011027225
* 可能是史上最全的weex踩坑攻略
https://www.jianshu.com/p/497f1a9ff33f
* 其他优秀项目
https://github.com/joggerplus/awesome-weex


#### 注意事项

1. 首次运行Android项目时需要修改/platforms/android 下 local.properties

    sdk.dir=D\:\\tool1\\sdk
路径修改为自己本地sdk路径

2. 在web端使用状态存储时候。需要配置src/store/index.js中
```
    // web 环境下需要如下配置(将Native端的配置注释掉)
    import Vue from 'vue'
    Vue.use(Vuex)
```
   在原生端运行时候，需要进行如下配置(将web端的配置注释掉)
```
    // 原生环境下需要如下配置
    if (WXEnvironment.platform !== 'Web') {
       Vue.use(Vuex)
    }
```
3. 公共样式可以提取出来，放置到assets/css 下。页面引用方式
```
eg: assets/css/base.css
在custome中引用方式
<style src='../../assets/css/base.css' />
<style scoped>
  ...
</style>

```
4. IconFont 缓存处理
   将最新的iconfont.ttf下载，放置到android/app/src/main/assets下缓存
```
        if (platform == 'android') {
            url = "url('local:///iconfont.ttf')"
        } else if (platform == 'ios') {
            url = "url('local:///iconfont.ttf')"
        } else {
            url = "url('http://at.alicdn.com/t/font_934596_1c1u5ufwqey.ttf?v=" + new Date().getTime() + "')"
        }
```
5. APP更新涉及到两端的更新。
 * 1.前端模块的更新（增量更新）
 * 2.原生android端更新（如果原生没修改东西无需更新）。
 前端更新一般是把 build的js放置到服务器上，进行热更新。原生更新需要把新打包的apk放置到服务器上。














.
.........................................