weex笔记

发表于 | 分类于 | 本文总阅读量 次

看weex的文档是真的痛苦！特别像我这种前端基础薄弱的！相对与React Native的文档来说，weex的官方文档和社区建设是真的有待提高。虽然距离上次搞weex已经过去两月了，但是现在想想当时的日子真是充满了“血腥味”🙃🙃🙃，所以现在有空来正视下“淋漓的鲜血”,整理下笔记。

开篇吐槽了很多weex的文档的缺点，但不可否认，框架本身还是很给力的。在原生的体验上和RN不相上下的，本篇会整理本人在weex开发时遇到的一些问题，部分问题的答案收集与网上，出处繁多，结尾不会注明，望了解。

  • ask：拍照如何在weex拿到回调(Android)?
    方法一，暂存回调函数，在选择完图片后，通过回调函数将图片本地路径传递给weex端；
    方法二，weex端在调用选择图片模块的方法时，定义个vm的回调字段（set方法），原生实现在选择完图片后，通过refreshInstance将本地图片路径通过回调字段传递给weex端。
    以上两个方法都有个前提是需要在自己的ImageAdapter实现里边支持本地路径图片的加载。
  • ask：页面跳转
    weex–>weex(weex页面之间跳转) navigator方式(若有两个weex应用会弹出选择框 可以通过修改源码的方式解决)
    weex–>native(weex跳转到原生页面) 自定义module
    native–>weex(原生页面跳转到weex) render
  • ask：页面数据传递
    weex–>native 自定义module传递参数
    native–>weex 利用JSCallBack传递参数(参考问题1)
  • ask：页面的数据预处理在哪个钩子函数中执行？
    优先在mounted中做预处理 也可在created中
  • ask：除了网络图片是否可以加载本地文件中的图片？
    可以，需要在imageAdapter中进行区分
  • ask：使用weex多页面模式开发时，weex页面间如何切换？
    a navigator实现weex之间的页面跳转的时候是替换掉上个weex页面 （使用navigator需要在mainfest中注册intent-fliter）
    b 同时如果应用中有同样使用weex开发的app的话 会弹框提示使用哪个打开（可以通过修改源码的方式）
  • ask：native —>weex通信时注意事项
    最好不要采用重载的方式去定义方法，因为js的弱类型在通信中无法认定参数类型因此找不到正确的方法去接收。
  • ask：webstorm箭头函数报错
    将<script>改写成<script type="text/ecmascript-6">
  • 使用weex create创建项目 而不是weex init（已废弃）(weex-toolkit尽量不要使用)
    自1.0.9版本后weex init命令已移除，如果要创建weex工程请通过weex create命令创建。
  • 架构
  1. 像老的.we架构一样，三端都做多页应用
    每个*.vue页面都编译成对应的*.web.js和*.native.js,分别加载对应的js bundle。 配置可参考官方仓库，加载：index.html web端编译配置：webpack配置 (new Vue写在webpack config里，这个大法好)
    优点：和传统web开发差不多，web端集成到现有项目成本低，SEO相对好做
    缺点：SPA优点全无、页面参数传递和获取都不好办
  2. vue+vue-router+vuex构建三端一致的SPA
    这套架构最著名的当然是官方例子 weex-hackernews
    优点：SPA所有忧点，特别是状态管理！状态管理！状态管理！（痛点说三遍）
    缺点：native端做SPA，听着都怪。运行weex-hackernews体验一番就知道啦，最难办的就是跳转。
  3. web端做SPA，native端做多页应用
    讲道理这套架构有点折腾，但现在有了weex-vue-router（此处应该有star），事情就好办多了。
    优点：web端使用体验佳，配合用法与vue-router一致的weex-vue-router，native端路由体验佳。
    缺点：无法使用vuex
    如果你的应用只有两三个页面，推荐使用架构二 如果你的应用很看重web端，并且不能舍弃现有的搜索引擎收录量，请用架构一（给现有页面加载对应js bundle即可）
    我当然会推荐你选架构三，其实即使你选架构一，在native端也可以愉快的使用weex-vue-router，接下来的文章都会以架构三来讲，如果你已经选定架构&&架构!=3，看到这里就好啦
  • 多页面开发的奇葩(Andoird)
    在选择搭建页面结构时，遇到了页面跳转的问题，
    因当前设计采用tabhost+fragment结构 而且tab在右侧 当前weex 组件不满足 不能自己去开发组件吧~.~时间啊
    • 如果整个模块均采用weex开发的话 在页面切换的时候会整个页面被替换掉 不能按照设计稿的部分切换来实现
      所以采用了原生activity+fragment的模式 业务模块均采用weex开发
    • 上述页面结构定型后 紧接着就遇到了weex页面切换的问题，因为是在fragment中加载weex
      • 整体切换的页面设计
        1 当前考虑使用navigator来进行切换（参考6）But！因为渲染是在fragment当中进行的，所以实际运行之后出现Navigator: android.os.FileUriExposedException: file://assets/detail.js exposed beyond app through Intent.getData()错误
        2 采用js—>自定义module—->调用activity中切换fragment的方法去重新render Js
        其实我在想当初是不是应该选择单页面来进行开发 而不是现在的多页面？
      • 部分切换后的页面结构为tabhost+fragment模式(tab在顶部) 反人类的设计！！！（左侧顶部均存在tab标签）
        这个变态的页面设计卡了我半天 最终顶部包含tab的页面采用slider轮播图 实现了！

请重点关注架构项即倒数第二项