网易严选 App 感受 Weex 开发

此处是 demo 源码：
https:///zwwill/yanxuan-weex-demo

下面我们具体讲讲入门知识

  • 首先，Weex 的开发和 web 开发体验可以说是几乎一样。包括语法设计和工程链路等。
  • 其次，Weex 的组件、模块设计都是 iOS、Android、Web 的开发者共同讨论出来的，有一定的通用性和普遍性。
  • Weex 开发同一份代码，可以在不同的端上分别执行，避免了多端的重复研发成本。

1、今天在技术社区有大量的 web 开发者，Weex 可以赋能更多的 web 开发者构建高性能和高体验的移动应用。
2、Web 开发本身具有非常强的高效率和灵活性，这和 Weex 想解决的移动端动态性问题不谋而合。
3、Web 标准和开发体验是很多顶尖而优秀的科技公司共同讨论和建设的结果，本身的设计和理念都有极高的品质保障
4、同时 Weex 也希望可以借此机会努力为标准贡献一点自己的微薄之力。
5、Web 是一种标准化的技术，标准本身就是一种力量，基于标准、尊重标准、贴近标准都意味着拥有更多的可能性。
6、Web 今天的生态和社区是非常繁荣的，有很多成熟的工具、库、工程体系、最佳实践可以使用、引入和借鉴。

预科

系统环境要求

你可以参考官方文档安装必须的依赖环境 http://weex.apache.org/cn/guide/set-up-env.html，
也可以直接安装以下环境

Hello Weex

网易严选App感受WEEX 开发_其他

为什么文档要这么设计也是跟Weex的定位有关的，读完下文后续你就慢慢懂了，后面我将做总结解释

Weex 在迭代的过程中选择了于 Vue 2.0 握手，因为该版本的 Vue 加入了 Virtual-DOM 和预编译器的设计，使得该框架在运行时能够脱离 HTML 和 CSS 解析，只依赖 JavaScript，如此，Vue 在和 Weex 合作后，便获得了使用 JS 预编译原生的组件 UI 的能力。

那么接下来我们讲讲，Vue 在 Weex 中的不同

语法差异

2、Weex 环境中没有 DOM

并不支持 Web 中所有的事件类型，详情请参考《通用事件》

样式差异

Weex 开发&调试

如果以上代码脱离工程单独出现，基本上是无法得知他是 Weex 工程。此处可切实感受到 Weex 的 web 开发体验

通过weex-loader、vue-loader、weex-vue-render的解析最终转换输出的便是实际的组件，有此设计只是为了完成「web开发体验」的目标。但是我们身为上层的开发人员要清楚自己每天「把玩」的到底是个什么「鬼」。

单位

Weex 中只支持单个类名选择器，不支持关系选择器，也不支持属性选择器。

/* 支持单个类名选择器 */
.one-class {
  font-size: 36px;
}
/* 不支持关系选择器 */
.parent > .child {
  padding-top: 10px;
}
/* 不支持属性选择器，不支持 `v-cloak` 指令 */
[v-cloak] {
  color: #FF6600;
}

weex支持css基本的盒模型结构，但需要注意的是

    • Weex 中对 flexbox 布局支持度很高，但依然有部分属性并不支持，如 
align-items:baseline;
    • 、
align-content:space-around;
    • 、
align-self:wrap_reverse;
  • 等。

在 Weex 的 ios 和 android 端，并不支持 display 属性。

需要注意的是，ios和android端并不能使用 opacity:0; 来完全模拟 visibility: hidden;，因为，当
opacity 的只小于等于 0.01 时，native 控件便会消失，占位空间还在，但用户无法进行交互操作，点击时会发生点透效果。

以下几种属性我们在开发前需要知道她的支持度

  • 由于使用了增强版的 webpak 打包工具 weexpack，支持第三方框架也是件自然而然的事情。

npm 包管理是前端开发朋友们再熟悉不过的包管理方式了。这也是为什么 React Native 和 Weex 都选择这种管理方式的原因。

Weex 容器默认的显示宽度 (viewport) 是 750px，页面中的所有组件都会以 750px 作为满屏宽度。

类比在 Weex 中，如果所有的显示宽度都是用默认值 750，那么显示出来的实际像素信息为

当然，Weex 提供了改变此显示宽度的 API，setViewport，通过此方法可以改变页面的显示宽度，可以实现每个页面根据自己的需求改变基数逻辑尺寸本地调试此方法多用于解决 bug，检测控件的布局问题# 调试单个页面 $ weex debug your_weex.vue # 调试整个工程 $weex debug your/path -e App.vue网易严选App感受WEEX 开发_其他_02网易严选App感受WEEX 开发_其他_03网易严选App感受WEEX 开发_其他_04方法二网易严选App感受WEEX 开发_其他_05但前提是你要保证，你的手机和电脑的连在同一个局域网下，并且使用IP访问。网易严选App感受WEEX 开发_其他_06熟悉 React Native 的人都知道， React Native 的发布实际上就是发布一个 JSBundle，Weex 也是这样，但不同的是，Weex 将工程进行分包，发布多个 JSBundle。因为 Weex 是单页独立开发的，每个页面都将通过 Weex 打包器将 vue/we 页面打包成一个单独的 JSBundle，这样的好处在于减少单个 bundle 包的大小，使其变的足够小巧轻量，提高增量更新的效率。# 仅打包 $ npm run build # 打包+构建 $ weex build ios # 打包+构建+安装执行 $ weex run ios网易严选App感受WEEX 开发_其他_07至此，我们准备「热更新的包」就已经准备完毕了，接下就是发包执行了。【WeexSDK】包括
  • 【JS Framework】JSBundle 的执行环境
  • 【JS-Native Bridge】中间件或者叫通讯桥梁，也叫【Weex Runtime】
  • 【Native Render Engine】解析 js 端发出的指令做原生控件布局渲染
JSBundle 被 push 到客户端后就会在 JSFramework 中执行，最终输出三端可读性的 VNode 节点，数据结构简化如下：{ tag: 'div', data: { staticStyle: { justifyContent: 'center' } }, children: [{ tag: 'text', data: { staticClass: 'txt' }, context: { $options: { style: { freestyle: { textAlign: 'center', fontSize: 200 } } } }, children: [{ tag: '', text: '文字' }] }] }网易严选App感受WEEX 开发_其他_08网易严选App感受WEEX 开发_其他_09
  • Weex 文件分包打包成单个 JSBundle 文件
  • 发布到发包服务器上，通过热更新 push 到用户的客户端，交由【Weex SDK】执行解析
  • SDK 中的【JS Framework】执行 Bundle 脚本生成 Virtual DOM
  • Virtual DOM 经由各端执行环境【Weex Runtime】解析翻译成执行指令
  • 【Native RenderEngine】接收到指令后执行渲染操作，作出渲染出完整的界面
网易严选App感受WEEX 开发_其他_10网易严选App感受WEEX 开发_其他_11目前支持单页使用或整个 App 使用 Weex 开发（还不完善，需要开发 Router 和生命周期管理）。网易严选App感受WEEX 开发_其他_123. H5 Component 模式严选 App Demo 实现过程中的感想网易严选App感受WEEX 开发_其他_13image & iconfont网易严选App感受WEEX 开发_其他_14网易严选App感受WEEX 开发_其他_15网易严选App感受WEEX 开发_其他_16网易严选App感受WEEX 开发_其他_17性能是一个大课题，在此就不做展开了，只稍微提及一些我们开发需要注意的几点Weex 解决了的但优点也是缺点，如果新包依赖于心的 SDK，此情况下，我们需要发布还有新 SDK 的 app 到应用市场，用户也须从市场更新此 app。不够随着 WeexSDK 版本的稳定后，相信此策略的优势就会凸显出来。统一三端意思就是，三端统一的不够彻底，但就目前的环境下，这一句是最优方案了，却是提高了开发效率。大前端将来将如何一统三国我们且行且观望吧。近期笔者将尝试发布一款纯Weex构建的益智小游戏，敬请期待。虽然说大一统事件百利的事，但并非无一害。独立的 bug 修复比如安卓的波纹按钮、3DTouch、 Widget、iWatch版本等，目前这些功能还是没有的，不知道以后 Weex
是否将其加入到官方文档中。参考