Weex 入门文档

Weex 入门文档

 

Weex 背景

       动态性需求的出现有很多必然的因素：我们的移动应用背后是一个平台级甚至是生态级的电商系统，它需要有海纳百川的能力和高速流通的特点，市场上很多移动应用也有类似的客观形态和诉求；同时整个行业迄今为止在移动端的积累都还不足以对产品形态、用户体验、交互方式等细节有完全的前期把握，一个移动应用，客观上需要更多的尝试和探索，甚至是“试错”，而这种动态化的程度和产品迭代演进的速度有着强烈的正相关；第三，我们不必要为这些动态性在多个端投入重复的精力，更不应该因此而频繁的触发新版本。所以动态性问题在今天的移动端显得尤其重要。

 

无线电商动态化

无线（移动端）：

1、前端快速迭代（试错）：

      无线端很多形态大家都还在一起摸索之中，这其中有很高的“试错”成本，产品经理甚至会在项目初期就主动坦承我们需要很多试错，需要快速迭代。

2、后台版本兼容：

      由于前端以平均每两周一个版本的速度在疯狂迭代，后台代码中从最开始的比较规整的代码，演变成进行各种各样的容错、兼容的臃肿代码。

电商：

1、可变、实时性：

      从电商的角度来讲，运营郭某无时无刻不在为用户挑选更合适的商品，如：一分钱拿羊奶皂，85元拿成本价德运全脂奶粉……

      它作为平台：展现形式一定是自由、灵活、实时的；

2、稳定性：

      电商是和真金白银打交道的，这要求我们对技术方案的稳定性和准确性做非常严格的把控，对项目工程化有极高的要求，项目过程中的半点松懈都有可能对用户产生极大的影响。

动态化：

     今天前端app 都是 native 的，有必要的版本控制和发布节奏，并且能够快速迭代、实时调整、还能把控性能和各方面风险，就变成了重中之重，但是这部分还有其他的问题修复BUG需要送审

   iOS审核周期不定，打包-发布-审核（这个工作流程避免不了，总是在浪费时间），在这种恶略条件下，催生出了动态化这个概念，app不发布照样更新，这样必将是未来互联网发展的大方向。

 

 

一 . 前期准备

     1. HTML  ,CSS ,  VUE 、JS等前端知识

 

     2. Weex 环境搭建

      http://weex.apache.org/cn/guide/set-up-env.html

 

     3. weex 原理、架构了解和说明

 

 

 

http://weex.apache.org/cn/guide/intro/how-it-works.html

 

 

二．工具的使用

 

主要命令工具

http://weex.apache.org/cn/guide/tools/toolkit.html

 

三 关键技术

 

1. 基础语法和相关api使用

a. WeexSDK 的使用    

http://weex.apache.org/cn/guide/integrate-to-your-app.html

https://github.com/xkli/WXSample

 

b. Android API & IOS API

 

WXSDKEngine: 是Weex对外的总入口

  1.注册相关 adapter和获取adapter

  2.注册自定义module和component

  3.重置JSFramework

Adapter 相关api

  IWXImgLoaderAdapter 

IWXHttpAdapter 

IWXUserTrackAdapter 

 

c.内建模块使用

Eg: toast  http://weex.apache.org/cn/references/modules/modal.html

 

d.内建组件的使用

 

Eg: <text>  http://weex.apache.org/cn/references/components/text.html

 

e.通用事件

 Click  组件点击事件

 Longpress  组件长按事件

 Appear  组件显示事件

 Disapper 组件消失事件

 Viewappear 页面显示事件（必须绑定到页面根元素上）

 Viewdisappear 页面消失事件（必须绑定到页面根元素上）

 

   

2.双向通信的原理和 实现的方式

  a. JS 调用native

    扩展 module,component,adapter等组件

 

  b. native 通知 JS页面

     globalModule 注册全局事件监听    

 

备注：

( 这部分还没完全搞明白,后期有时间 研究源码)

http://weex.apache.org/cn/references/advanced/extend-jsfm.html

https://github.com/apache/incubator-weex/tree/master/android/sdk/src/main/java/com/taobao/weex/bridge

 

3.扩展

Android

iOS

 

 a. Module

 b. component

 c. adapter

 d.组件方法扩展

 e. JS framework

 

4.边界

 a. HTML5的标签 支持不完全，功能一部分

 b. Weex 和Vue有差异，不是完全支持该Vue所有功能

 c. CSS单位的支持不完全，特别要注意 长度只支持px

 

相关知识：

Weex 开发注意事项

l HTML 标签：目前 Weex 支持了基本的容器 (div)、文本 (text)、图片 (image)、视频 (video) 等组件，HTML 中几乎所有的块级标签都可以通过容器组件进行自定义模拟，inline 的标签则可以通过文本组件进行自定义模拟，另外 Weex 还支持了 input/textarea 这样的表单型组件。

l CSS：Weex 支持了部分常用的 CSS 属性、值类型和单位，并且会根据用户反馈和在 web 中的使用频度陆续支持更多。

l JavaScript：目前 Weex 提供了一套简化版的 DOM APIs，用来操作原生界面，同时 Weex 在陆续支持更多的 W3C Device APIs。

l 在框架方面，Weex 官方支持了 Vue 2.0，以及相关的 vuex, vue-router 等，同时开发者可以直接使用各种第三方 JavaScript 工具库。

l 在工程方面，Weex 推荐 npm 包管理工具，也推荐用 webpack 进行 JS bundle 打包，并提供了 weex-devtool 开发工具，让开发者可以像调试 Chrome 一样调试 Weex 原生应用，同时 Weex 的页面发布系统、客户端缓存机制都尊重目前 Web 的最佳实践

Weex的优势

 alibab经过一系列的调研、思考和讨论之后，提出了一套完全针对无线电商动态化的技术方案：

l 致力于移动端

l 能够充分调度 native 的能力

l 能够充分解决或回避性能瓶颈

l 能够灵活扩展

l 能够多端统一

l 能够优雅“降级”到 HTML5

l 能够保持较低的开发成本

l 能够快速迭代

l 能够轻量实时发布

l 能够融入现有的 native 技术体系

l 能够工程化管理和监控

 

Weex 三种集成方式

 

全页模式：目前支持单页使用或整个app使用weex开发（还不完善，需要开发router和生命周期管理）这是主推的模式，可以类比RN。

 

Native Component模式:把weex当作一个ios/Android组件来使用，类比ImageView。这类需求遍布手淘主链路，如首页、主搜结果、交易组件化等，和业务同学沟通下来这类Native页面主体已经很稳定，但是局部动态化需求旺盛导致频繁发版，解决这类问题也是Weex的重点。
  这也涉及到如何让Native同学快速上手“准Web”开发，有意思的话题，大家多给些建议。

 

H5 Component模式:在H5种使用Weex，类比WVC。一些较复杂或特殊的H5页面短期内无法完全转为Weex全页模式（或RN），比如猫超、互动类页面、一些复杂频道页 等。针对这个痛点我发起过WVC项目，并在实际业务中验证了这样的想法：在现有的H5页面上做微调，引入Native解决长列表内存暴增、滚动不流畅、动 画/手势体验差等问题。

   WVC将会融入到Weex中，成为Weex的H5 Components模式。这3种模式几乎涵盖了淘系业务上的动态化需求（针对Native）或体验提升需求（针对H5）。更有趣的是这3种模式的技术基础是一致的，这非常重要，意 味着：业务方可以使用Native或H5 Component模式 解决实际的业务痛点，同时平滑过渡到Weex全页模式。期待Weex成长壮大到AppFramework的那天。