Weex 知识点

⚙️ 一、核心概念与特性

1. 跨平台能力
   • 使用 Vue.js 或 Rax 语法编写代码，编译为原生组件（iOS/Android/Web），实现“一次编写，多端运行”。
   • 原生渲染引擎直接调用平台组件（如 <text>、<image>），性能接近原生应用，避免 WebView 性能瓶颈。

2. 开发语言与框架
   • Vue.js 为主：支持 Vue 的模板语法、数据绑定、生命周期钩子，但需注意部分特性受限（如 v-html）。

   • 组件化开发：内置基础组件（<list>、<scroller>、<input>）和模块（navigator、storage），支持自定义组件复用。

3. 布局系统
   • 基于 Flexbox 模型，不支持浮动布局或百分比单位，需使用 flex-direction、align-items 等属性适配多端。

   • 样式仅支持部分 CSS：禁用简写（如 border:1px solid red; 需拆写），单位仅用 px。

🛠️ 二、开发环境与工具链

1. 环境搭建
   • 安装 Node.js 和 npm → 全局安装 Weex CLI：npm install -g @weex-cli。

   • 初始化项目：weex create project-name，生成包含 src/（代码）、platforms/（平台配置）的目录。

2. 调试与预览
   • Weex Playground：手机端实时预览应用。

   • DevTools：连接 Chrome 开发者工具调试日志、元素检查（功能弱于 React Native）。

   • 热更新：npm run dev 启动本地服务，修改代码后自动刷新。

📦 三、组件与模块开发

1. 内置组件
   • 基础组件：<text>（文本必须用此标签包裹）、<image>（需闭合标签）、<list>（高性能长列表）。

   • 功能组件：<web>（嵌入网页）、<video>（视频播放，支持事件如 @pause）。

2. 模块扩展
   • 内建模块：通过 weex.requireModule 调用原生功能，如 modal.toast() 弹窗、storage 本地存储。

   • 自定义模块：封装原生功能（如相机调用），通过 Bridge 与 JavaScript 通信。

⚠️ 四、常见问题与优化

1. 兼容性挑战
   • 平台差异：iOS/Android 组件行为不一致（如滚动效果），需条件编译或平台特定样式。

   • 第三方库限制：非所有 Web 库兼容 Weex，需验证或适配。

2. 性能优化
   • 减少层级：嵌套过深影响渲染速度，优先使用 <list> 替代循环 <div>。

   • 图片处理：压缩资源、使用 resize="cover" 避免变形，懒加载长列表图片。

   • 避免频繁更新：批量处理数据变更，减少虚拟 DOM 操作。

🔀 五、与其他框架对比

💡 六、学习资源推荐

• 官方文档：https://weexapp.com/zh/（组件 API、配置详解）。

• 社区：GitHub 仓库、阿里技术论坛（问题排查与案例分享）。

• 实战入门：

  <template><div class="container"><text class="title">Hello Weex!</text><image src="path/to/logo.png" resize="cover"></image></div></template><style>.container { flex-direction: column; align-items: center; }.title { font-size: 48px; color: #333; }</style>

通过 weex run android/ios/web 编译运行。

---

掌握 Weex 需重点突破 Flexbox 布局、多端适配逻辑及性能优化策略。对于 Vue 开发者，可快速上手并发挥跨平台效率，但需持续关注社区生态进展（如 weex-ui 组件库更新）以应对复杂场景需求。