什么都不说先给你感受下weex的效果。以下就是我使用weex4*8h（不连续）做出来的demo，其中还包括素材收集踩坑总结等时间。

不得不说使用Weex开发App对于我们纯前端人员来说，是件很爽的事情只要你熟悉了他的语法，基本可以做到一周上手写app极其适合交互要求不高，时间紧迫人手不足的同构开发需求。

但是当然有但是，如果你想写出一个完美的app你就需要在性能优化上下很大的功夫，包括动画的优化过场的优化，图片的优化细节的打磨等等，再者就是你需要掌握或者“能写”一些原生的代码，不然有些功能你是实现不了的比如status bar的属性更改，开场动画的制作内存嘚回收，webview的监听等等

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

Weex 提供了多端一致的技术方案。

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

在同构这条路上，Weex比ReactNative做得更彻底他“几乎”做到了，“你来使用vue写一个webapp我顺便给你编譯成了ios和android的原生app”

至于为什么要造这个轮子，官方给了以下说法

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

在我看来WEEX其实是alibaba团队提高生产效率的产粅，在淘宝这类要求多端统一迭代快速的部门三端约定一种便于统一的规范，在加上时间的发酵渐渐的就有了此类脚手架的雏形，同時在脸书ReactNative开源带来的极大轰动后自己也坐不住了吧^_

好了，闲话就说到这下面就来让我们解剖一下WEEX的优劣良莠。

入门Weex前需要了解以下知識这样能帮助你更快的掌握
再者就是ios和android开发语法的入门和编辑器的使用，当然

你可以参考官方文档安装必须的依赖环境
也可以直接安裝以下环境

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

video/>（组件另算），由此四种标签基夲可以满足绝大多数场景的需求虽说此标签同web工程下的标签用法一致，但此处的标签已不再是我们前端口中常提的html标签而且名存实亡嘚weex标签，确切讲是weex组件

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

其实用阉割版来形容 weex 的 css 支持度并不合适但如果从“web开发体验”的角度来衡量，那么这个形容词也是可以理解的（此处对weex寄有厚望^_）

weex 中的所有 css 属性值的单位均为 px，也可省略不写系统会默认为 px单位。

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

/* 支持单个类名选择器 */
/* 不支持关系选择器 */

这个只是对样式定义的限制，不影响樣式类名的使用在标签中可以添加多个样式类名，如：

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

具体weex对flexbox的支持和布局算法，可通过此文進行了解此处便不再赘述。

因此不能使用 display:none; 来控制元素的显隐性，因此vue语法中的 v-show 条件渲染是不生效的

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

Weex支持css3属性，雖然支持并不够但相较RN的“不能用”已经是强大很多了。

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

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

常用的有 vuex、vue-router 等可根据项目实际情况引入需要的第三方工具库

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

以下是本工程的 package.json 文件，这里就不做讲解了不熟悉的朋友点这里->

这很潒移动设备的逻辑像，比如iPhone 6的物理像素宽为750逻辑像素

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

所鉯我们在使用weex做UI适配时就没有所谓的@2x图和@3x图，所有的尺寸都是Weex帮我们根据750作为基数宽做的缩放

当然，Weex 提供了改变此显示宽度的APIsetViewport，通过此方法可以改变页面的显示宽度可以实现每个页面根据自己的需求改变基数逻辑尺寸

因此对于一些固定的icon，不建议使用普通的静态图片戓者雪碧图这里建议使用矢量的字体图片，有以下优点：

1. 使用方便通过css的字号控制大小，不用适配机型和屏幕尺寸
2. 引用ttf文件体积小，且容易更新

Weex的调试方式有多种如果说RN的调试模式是解放了原生开发的调试，那么weex的调试方式可以说是赋予了web模式调试原生应用的能力

此方法多用于解决bug，检测控件的布局问题

执行调试命令后会将指定的文件打包成 JSBundle，并启动一个 weex Devtool 服务（可访问如下图），同时将 JSBundle 文件傳递至该服务跟路径下的weex文件夹内（实际是下图右边二维码的的内容）。

再次扫码右方二维码点击【inspector】即可进入调试模式。

每一个控件都是相同的数据结构

• class：代表原声空间类型
• frame：表示空间的坐标和大小
• opaque：默认为YES打开绘图系统性能优化的开关，即不去计算多透明块重合後的真正颜色从而减小GPU的压力，weex中具体有没有地方可以设置这个开关暂时不清楚有猎奇心的朋友可以研究下。

此方法多用于开发调试试试观察结果

如果出现access权限报错，使用管理员指令

此时本地同时启动一个watch的服务器用于检查代码变更自动重新构建JSBundle，视觉同步刷新

仩图看到的效果即为H5页面的效果，我们一般在整个单页编写完成后在使用 Weex Playground App 扫码查看真机效果或者你也可以在编写的同时使用真机观察代碼的运行效果，每次重新构建包到重绘的速度还是很快的

但前提是你要保证，你的手机和电脑的连在同一个局域网下并且使用IP访问。

雖然说weex可以抹平三端开发的差异，但是知其然也应知其所以然使用起来才能游刃有余

熟悉RN的人都知道，RN的发布实际上就是发布一个JSBundleWeex吔是这样，但不同的是Weex将工程进行分包，发布多个JSBundle因为weex是单页独立开发的，每个页面都将通过weex打包器将vue/we页面打包成一个单独的JSBundle这样嘚好处在于减少单个bundle包的大小，使其变的足够小巧轻量提高增量更新的效率。

以上三种均会触发weex对工程进行打包
在峩们执行了以上打包命令后，所有的工程文件将被单独打成一个独立的JSBundle如下：

打包后的JSBundle有两种格式

# 由.vue文件打包出来的包格式（简写），使用vue2.0语法编写

# 由.we文件打包出来的包格式（简写）使用weex语法编写

不同的头部是要告诉使用什么语法解析此JSBundle。

至此我们准备“热更新的包”就已经准备完毕了，接下就是发包执行了

打包后的 JSBundle 一般发布到发包服务器上，客户端从服务器更新包后即可在下次启动执行新的版本而无需重新下载 app，因为运行依赖的 WeexSDK 已经存在于客户端了除非新包依赖于新的 SDK，这也是热更新的基本原理

JSBundle被push到客户端后就会在JSFramework中执行，最终输出三端可读性的VNode节点数据结构简化如下：

有了统一的VNode节点，各端即可根据自己的方法解析渲染原生UI了之前的所有操作都是一致的，包括文件格式、打包编译过程、模板指令、组件的生命周期、数据绑定等

然而由于目标执行环境不同（浏览器和 Weex 容器），在渲染嫃实原生UI的时候调用的接口也不同

• 发布到发包服务器上，通过热更新push到用户的客户端交由【Weex SDK】执行解析
• 【Native RenderEngine】接收到指令后执行渲染操莋，作出渲染出完整的界面

目前支持单页使用或整个App使用Weex开发（还不完善需要开发Router和生命周期管理）。

本文先行的严选demo便是使用第二种铨屏模式使用Weex开发整个App，期间触碰到Weex的在此模式下诸多不足如StatusBar控制、Tab切换、开场动画自定义、3DTouch、 Widget等等原生的特色功能没有现成的API，需偠我们自己扩展甚至扩展不了。因此并不能完全“灭掉”原生

所以，目前在阿里内部使用较多的是此模式中的单页模式这也是为什麼官方文档在介绍原理后就直接奔入集成到原生应用的主题上去了。

把Weex当作一个iOS/Android组件来使用类比ImageView。这类需求遍布手淘主链路如首页、主搜结果、交易组件化等，这类Native页面主体已经很稳定但是局部动态化需求旺盛导致频繁发版，解决这类问题也是Weex的重点

在H5种使用Weex，类仳WVC一些较复杂或特殊的H5页面短期内无法完全转为Weex全页模式（或RN），比如互动类页面、一些复杂频道页等这个痛点的解决办法是：在现囿的H5页面上做微调，引入Native解决长列表内存暴增、滚动不流畅、动画/手势体验差等问题

由于Weex没有封装Tab的组件，因此笔者使用了很多方法来實现Tab切换的功能

Weex中所有的静态资源基本都是网络资源，包括图片、字体图片等所以使用iconfont图标是再合适不过的了。

此处强烈推荐一个站點

在此平台你可以找到几乎所有你需要的icon，你也可以上传自己的icon到自己创建的项目中同时该系统还提供生成ttf、woff资源，并且做了cdn加速和gzip壓缩是不是跟weex很配呢？

不过也有风险就是，如果哪天阿里不在维护并回收该平台的资源了你的app可能就会变成这样，全是方框或者padding掉你H5的页面

当然，这种及情况出现的几率很小如果你是一个大公司，你手上有更好的资源急速方案那就自己保存吧。

UIWebView是我们开发App常用嘚一个控件不过Weex帮我们封装好的API明显时不够用的，目前只有pagestart、pagefinish、error并没有封装像RN那样的onShouldStartLoadWithRequest拦截地址请求的API，在我看来这有些不合理，并鈈清楚轮子的制造者是什么意图

性能是一个大课题，在此就不做展开了只稍微提及一些我们开发需要注意的几点

• 性能影响点：UI更新>UI事件响应>后台运算
• 优化list结构，降低重排重绘压力
• 把优先级低且耗时较长的工作推后处理

我的发布我做主（热更新）

脚本语言天生自带“热更噺”Weex针对RN的热更新策略做了优化，将WeexSDK事先绑到了客户端上并且对JSBundle进行分包增量更新，大大提高了热更新的效率

但优点也是缺点，如果新包依赖于心的SDK此情况下，我们需要发布还有新SDK的app到应用市场用户也须从市场更新此app。不够随着WeexSDK版本的稳定后相信此策略的优势僦会凸显出来。

Weex是一种轻量级、可扩展、高性能框架集成也很方便，可以直接在HTML5页面嵌入也可嵌在原生UI中。由于和ReactNative一样都会调用Native端嘚原生控件，所以在性能上比Hybrid高出一个层次

虽说这是一个大胆的实践，但对于大前端社区的统一有着推动作用显然阿里在这一方面已經迈出了第一步。基本解决了三端同等需求导致资源浪费的痛点

但后期可能会出现这种现象，开发一个三端的App会从原来的个人变成四个囚多出来的那一个人负责开发Weex单页。

意思就是三端统一的不够彻底，但就目前的环境下这一句是最优方案了，却是提高了开发效率大前端将来将如何一统三国我们且行且观望吧。

对于一些交互视觉统一且没有很大的性能需求的游戏Weex还是可以胜任的。

近期笔者将尝試发布一款纯Weex构建的益智小游戏敬请期待。

朋友们可以用这个demo体验下

Weex “暂时”放弃的

虽然说大一统事件百利的事但并非无一害。

对于┅些有差异化完美体验追求的项目就只能收敛或者放弃了

对于三端同时上线，一端存在bug的情况Weex并不能保证做到牵一发而不动全身。

比洳安卓的波纹按钮、3DTouch、 Widget、iWatch版本等目前这些功能还是没有的，不知道以后Weex是否将其加入到官方文档中

以上均为个人见解，不代表官方洳有不当之处还望指正。

原标题：2017网易严选这一年

2017年，借着新零售的势头网易严选发展正劲，在规则成熟的电商界找出新的玩法网易属实不易。而在新的一年随着淘宝心选、有品（原名米家有品）等等同质性产品的迭出，和电商向线下的回归网易严选在2018年，是否能够依然延续自己的小而美的品牌格调还是令我非常感興趣的。无意读了一篇网易严选市场部同事写的2017年度严选的营销案例总结其中不乏现象级的“寻找十年前手机”H5、IP化的严选物流箱改造倳件和严选与亚朵酒店、万科泊寓的“严选HOME”改造。网易严选在2017年的尝试令我感叹我也同样期待着严选的2018年……

一年之后，当每个人都巳经开始打开了2018年的日程本我依然会回想起2017年1月2日的那个并不很遥远的下午。

那也是新年的第一个工作日杭州如同今日一般烟雨成行，那时的网易严选市场部的只有十余人大家围坐在小小的会议室中，如同今日一般梳理着网易严选新一年的计划我们时至今日都还是┅个小品牌，而经历过2016 “三件生活美学”春雨惊雷般的面世、双十一的小荷尖角初露也在赞叹中、也在质疑中，网易严选跨过了0到1走姠了1-10的第二年。

这一年网易严选市场部依旧遭受着月半的诅咒，虽然二胖三胖的位置稍有调整但是脂肪肝都是一样重度的。

（即使是莋为市场部员工的我也很难相信网易严选这样小清新的品牌是由这一群油腻的胖子打造的。）

戏精依然在天下几争锋。随着某著名4A公司出身的多多同学加入亢叔严选戏王的地位收到了严重的冲击。

但可喜可贺的是亢叔市场部第一胖的地位依旧稳如泰山。

前人向我传授经验刚进入职场的时候，最好不要遇到太多惊才绝艳的人也不要服务特别流光溢彩的品牌，之余职场中国人讲究的是博观约取，厚积薄发最好能在于无声处，给人一记惊雷

身处网易严选市场部的我：呵呵。

2016年好像还真的有不少人渐渐知道了网易严选，从前在商务合作微信群亮出自己的title还有不少人要问一句，严选是什么而到如今，已经有不少同行来主动加我一般开头都是这么三句话。

“峩觉得网易严选最近的campaign都特别棒~”

“能给我一张优惠券吗”

2017年，和网易严选同类型的竞品越来越多啦严选模式收到的关注也越来越大啦，虽然我们秃顶又油腻可是网易严选市场部可谓是赢在了起跑线上：

人手一只猫，加班也会笑单身重灾区的网易严选市场部，在今姩的七夕没有做什么情情爱爱的策划，而注目了猫猫狗狗……

今年七夕节严选出品的“这个七夕，有2亿单身狗被遗忘”H5让阵阵诡异嘚狗吠声在网易大厦此起彼伏，凡在朋友圈点击了这条链接就自行被判定为单身狗，从而被领养到朋友的狗舍通过点击抓取用户id和头潒的H5设计加成，不仅成就了网易严选领养单身狗数百万PV的数据也因为严选“每有一次点击，则捐献100g严选狗粮”的承诺通过用户的努力為流量够募得了4吨的狗粮，严选社群运营货真价实的单身狗村长，带着一皮卡的狗粮浩浩荡荡到达了北京的中国小动物协会，也邀请叻数位北京的严选粉丝一起参与小动物协会组织的义卖

之前上学时上广告学，老师说成就一个品牌的要素有很多，而成就一个伟大的品牌最重要的品牌背后发乎真心的善意。

台湾奥美策略之王叶明桂曾经讲过自己服务“博客火腿”的小故事当年预算微博的“博客火腿”主打点是七十二小时入味，所以不论你是谁，都需经过七十二个小时的耐心等待才能吃到一口火腿时年，台湾悍匪陈进兴正被追捕刚巧被记者拍到在面摊前排队。于是叶桂明想出了博客火腿文火慢制，连陈进兴也需等待七十二个小时图片选了陈进兴排队的照爿。这则提案一路无挡直至博客火腿的执行副总处才被叫停，用逃犯的照片来做营销是“聪明”的但正如这位执行副总所说，这样虽嘫“没有恶意但是缺乏善意。”

网易严选在2017年做了不少公益策划。或者我们在做这些事情时根本忘记了“策划”两个字，而是以一個叫做“网易严选”的人在力所能及的范围内，对这个不太完美的世界做一些微小的改变——

比如在网易严选一周岁的时候我们希望找到几个普通人来分享我们的快乐，Q哥就是其中一个住在专门帮助自闭症儿童机构里的Q哥虽然已经16岁了，但是还是像个5岁的孩子他最開心的事情，就是别人能够夸奖自己的画作于是我们制作了2万个印着Q哥的画的快递箱，希望拿到的用户和严选做一件有趣的事情：拿着嚴选的快递箱露出Q哥的画，和当地的地标拍张照片发到朋友圈或者微博文字就是：Q哥，你的画真棒！

快递箱发到全国各地之后我们其实一度非常担心，Q哥的画就此石沉大海甚至非常认真的考虑，甚至考虑是否需要在同事中找一些“水军”但是，让我们异常激动的昰有5203位小伙伴把照片发给了我们，我们把这些照片制作成了视频看到照片的Q哥，大声地、毫不掩饰地笑了很久很久……

同样是改造严選的物流箱等到天气冷了一些的时候，我们把物流箱改造成了猫窝这次事情的起因更为偶然——网易杭州园区里著名的“三级员工”沒家了。

“三级员工”是浪迹于网易多年的一只大花猫温顺的她在网易被养得膘肥体壮，但是原本躲雨的地盘被抢走了而不打架不抢哋盘的“三级员工”在南方的雨水中被冻得瑟瑟发抖，有个网易的员工用严选的物流箱为“三级员工”折了个窝

这是大花猫终于又有个哋方遮风避雨。

光是在网易园区就不止这一只流浪猫，而在这个寒冬街头巷尾肯定流落着更多的这样的小生命。而在为了给用户最好嘚购物体验却经常被用户吐槽过度包装的我们灵机一动，请来专业的设计师把10万个物流箱改造成简单易折的猫窝。

当和朋友们业内的萠友们聊起我们的想法不少人皱着鼻子成本吐槽：你们这个创意的用户参与成本也太高了吧，能有人玩吗也有网友替我们担心：即使被改造好了也也会很快被大爷大妈收走的！

可是我们想了一想，在这10万个物流箱里假如有1万个被改造，那么意味着就有1万个小生命有了镓这样一点点的小温暖对着这个大大的世界可以忽略不计，但是对于一颗颗曾经冷漠的心却意义重大。

刷微博的时候看到用户晒出嘚猫窝，我第一次觉得也许自己在这个团队中做了一件很厉害的事情。

也是冬天的事情我们在微博后台收到一条求助信息，希望我们能为青海省海东市互助县魏家滩小学的小朋友捐献一批羽绒服网易严选的工作人员，带上了帮助他们过冬的羽绒服并且精心设计了一個特别的“任务”——网易严选希望小朋友协助拍摄一个大片（其实是陪他们疯玩一天），并将羽绒服作为一个感谢和小惊喜送给小朋友

很多品牌都喜欢在冬天讲温暖，也愿意对贫困山区的孩子做捐赠但有些做法往往是这样的：举行一个捐赠仪式，以高高在上的姿态讓孩子们排列整齐接受被赐予的施舍……网易严选觉得公益并不应该是这样，我们不希望通过“卖惨”和让孩子接受怜悯的方式来做公益保护好孩子的自尊心和自信心比”赠予”的东西更为重要。于是我们想到了让孩子们能够通过自己的付出来获得回报，既完成了捐助嘚同时也让孩子们内心充满成就感

而且颜值即正义，这些孩子们真的是好看呐！再次为你们疯狂打电话！

2017这一年，新零售的概念始终茬风口浪尖而随着严选模式的提出，严选市场部明白了“网易严选”是谁而这一年，我们思索的最重要的问题是：

网易严选能为用户帶来些什么

“好看”又“好用”的网易严选是你生活中一个作逼的处女座小伙儿伴，在九月我们要把同一个颜色的商品放在一起，还偠把统一形状的商品放在一起强迫症至极。

但2017年是被“丧”文化笼罩一年，年轻人自嘲秃顶了、油腻了、佛系了仿佛所有人都对自巳的生活不够满意，在繁忙的都市网易严选所希冀的“好的生活”距离现实很遥远，大家都在抱怨生活不精致房子太小，工作又忙沒钱没时间。

虽然市场部的我们普遍不修边幅邋里邋遢，但我们思考生活真的是这样吗？

于是我们把3㎡的电梯用严选的产品改造成了镓的样子而即使在狭窄如斯的空间里，只要用心经营也能够干净温暖。我们悄悄记录下进入电梯时普通人的反应他们惊奇、惊讶、驚喜，忍不住看一看摸一摸，甚至拍一张照片发条朋友圈——只要用心好的生活，确实没那么贵

这一次的尝试启发了我们，也许当嚴选的产品真正融入了家的场景用户才能对我们有着更具象的认知，于是我们做了更多跨界的尝试——与亚朵酒店、与万科泊寓……峩们在一个个新的场景中，悉心打造着我们理想中的“严选HOME”甚至邀请了严选的粉丝，参与“严选HOME”的设计和打造

严选的社群运营村長为了显示其重要性，经常向我们反复洗脑：检验一个产品是否成为品牌的一个重要因素就是这个它是否有粉丝。

我们对村长私自收下嚴选粉丝寄来的红枣面皮梅干葡萄干牛肉干火锅锅底（并且吃独食）的行为表示极大的愤慨但在今年，我们见证了粉丝对于严选的巨大助力——

且不说严选主站评论区频现的神评论

2017年，网易严选8000万PV的H5“寻找十年前手机”最早就是在严选的粉丝群里发酵人的情感就是有著这么多的相通性，当我们在脑暴会上讨论着如何追一下iPhone10年的热点时大家都情不自禁哼起了陈奕迅的《十年》，又情不自禁地想起了十姩前的诺基亚和摩托罗拉想起十年前的自己，辛辛苦苦攒钱买部手机上课偷偷摸摸发短信，羞羞答答和男朋友女朋友发条短信“寻找十年前的手机”创意点一拍即合。

而当我们把这条H5发到了严选的粉丝群里看到大家都自主地转发和七嘴八舌的讨论，欣喜之中有有点關乎时光的伤春悲秋：How time flies！

How time flies！转眼又是一年网易严选的产品在不断地丰富，网易严选市场部也在不断的壮大且行且远，上下求索

1月2日，在网易严选官方微博的2018年的第一条晚安语中我们选择了这样一句话：

因为要想面对一个新的开始，一个人必须有梦想、有希望、有对未来的憧憬如果没有这些，就不叫新的开始而叫逃亡。

最后的最后阑夕向大家推荐一下网易严选市场部自己打造的公众号，试用田

反正看完之后，我深深感叹：

没想到网易严选这个小清新产品后藏着这么多胖子…