理论 | 可能是史上最全的weex踩坑攻略

Posted 2021-04-29 腾讯IMWeb前端团队

这是一篇有故事的文章 --- 来自一个weex在生产环境中相爱相杀的小码农

故事一: Build

虽然weex的口号是一次撰写，多端运行, 但其实build环节是有差异的, native端构建需要使用weex-loader, 而web端则是使用vue-loader,除此以外还有不少差异点, 所以webpack需要两套配置。

最佳实践

使用webpack生成两套bundle,一套是基于vue-router的web spa, 另一套是native端的多入口的bundlejs

首先假设我们在src/views下开发了一堆页面：

build web配置

web端的入口文件有 render.js

main.js

App.vue

webpack.prod.conf.js入口

build native配置

native端的打包流程其实就是将src/views下的每个.vue文件导出为一个个单独的vue实例, 写一个node脚本即可以实现。

webpack.build.conf.js中生成并打包多入口：

最终效果：

故事二: 使用预处理器

在vue单文件中, 我们可以通过在vue-loader中配置预处理器, 代码如下：

而weex在native环境下其实将css处理成json加载到模块中, 所以...

• 使用vue-loader配置的预处理器在web环境下正常显示, 在native中是无效的。

• native环境下不存在全局样式, 在js文件中import 'index.css'也是无效的。

解决问题一

研究weex-loader源码后发现在.vue中是无需显示配置loader的, 只需要指定<style lang="stylus">并且安装stylus stylus-loader即可,weex-loader会根据lang去寻找对应的loader. 但因为scss使用sass-loader, 会报出scss-loader not found, 但因为sass默认会解析scss语法, 所以直接设置lang="sass"是可以写scss语法的, 但是ide就没有语法高亮了. 可以使用如下的写法：

语法高亮, 完美!

解决问题二

虽然没有全局样式的概念, 但是支持单独import样式文件。

故事三: 样式差异

这方面官方文档已经有比较详细的描述, 但还是有几点值得注意的。

简写

weex中的样式不支持简写, 所有类似margin: 0 0 10px 10px的都是不支持的。

背景色

android下的view是有白色的默认颜色的, 而ios如果不设置是没有默认颜色的, 这点需要注意。

浮点数误差

weex默认使用750px * 1334px作为适配尺寸, 实际渲染时由于浮点数的误差可能会存在几px的误差, 出现细线等样式问题, 可以通过加减几个px来调试。

嵌套写法

即使使用了预处理器, css嵌套的写法也是会导致样式失效的。

故事四: 页面跳转

weex下的页面跳转有三种形式：

• native -> weex: weex页面需要一个控制器作为容器, 此时就是native间的跳转。

• weex -> native: 需要通过module形式通过发送事件到native来实现跳转。

• weex -> weex: 使用navigator模块, 假设两个weex页面分别为a.js, b.js, 可以定义mixin方法。

• 这样就组件里使用this.push(url), this.pop()来跳转。

跳转配置

• iOS下页面跳转无需配置, 而android是需要的, 使用weexpack platform add android生成的项目是已配置的, 但官方的文档里并没有对于已存在的应用如何接入进行说明。

• 其实android中是通过intent-filter来拦截跳转的。

• 然后我们新建一个WXPageActivity来代理所有weex页面的渲染, 核心的代码如下：

故事五: 页面间数据传递

• native -> weex: 可以在native端调用render时传入的option中自定义字段, 例如NSDictary *option = @{@"params": @{}}， 在weex中使用weex.config.params取出数据。

• weex -> weex: 使用storage。

• weex -> native: 使用自定义module。

故事六: 图片加载

官网有提到如何加载网络图片 但是加载本地图片的行为对于三端肯定是不一致的, 也就意味着我们得给native重新改一遍引用图片的路径再打包...

但是当然是有解决办法的啦。

• Step 1 webpack设置将图片资源单独打包, 这个很easy, 此时bundleJs访问的图片路径就变成了/images/..

• Step 2 那么现在我们将同级目录下的js文件夹与images文件夹放入native中, iOS中一般放入mainBundle, Android一般放入src/main/assets, 接下来只要在imgloader接口中扩展替换本地资源路径的代码就ok了。

iOS代码如下:

Android代码如下:

故事七: 生产环境的实践

增量更新

方案一

可以使用google-diff-match-patch来实现, google-diff-match-patch拥有许多语言版本的实现, 思路如下:

• 服务器端构建一套管理前端bundlejs的系统, 提供查询bundlejs版本与下载的api。

• 客户端第一次访问weex页面时去服务端下载bundlejs文件。

• 每次客户端初始化时静默访问服务器判断是否需要更新, 若需更新, 服务器端diff两个版本的差异, 并返回diff, native端使用patch api生成新版本的bundlejs

方案二

还可以参考很多ReactNative的成熟方案, 本质上都是js的热更新。

降级处理

一般情况下, 我们会同时部署一套web端界面, 若线上环境的weex页面出现bug, 则使用webview加载web版, 推荐依赖服务端api来控制降级的切换。

总结

weex的优势: 依托于vue, 上手简单. 可以满足以vue为技术主导的公司给native双端提供简单/少底层交互/热更新需求的页面的需求。

weex的劣势: 在native端调整样式是我心中永远的痛.. 以及众所周知的生态问题, 维护组没有花太多精力解答社区问题, 官方文档错误太多, 导致我在看的时候就顺手提了几个PR。

扫码下方二维码，

随时关注更多前端干货文章！

▼

微信：IMWebTech