最全的weex踩坑攻略-出自大批实践与沉淀

2019年8月25日 153次阅读 来源: 闪电矿工翻译组

在本身的营业环境中运用，并开放给第三方isv，企业开辟者运用，这是一篇有内在有故事的文章。

假如你对weex微运用感兴趣，也在开辟着微信小顺序，无妨来看看为了让你削减挂念而预备的手艺对照表格，是的，开辟钉钉的weex微运用是云云的简朴。

接见这个链接浏览： 钉钉Weex微运用与微信小顺序手艺对照表格 。

手艺概述

weex是阿里开源的一套构建高机能挪动界面的原生跨平台手艺框架，它的上层由Vue，Rax（异常相似React的开辟框架）完成数据驱动，底层由iOS，Android完成render engine来驱动界面的终究落地。类比React Native它的上风在于难过的一次编写，多端运转，是的，它也很好的支撑着挪动Web端。

构建-build

Native运用weex-loader，Web则须要运用vue-loader，在Web端上vue-loader现在仅支撑^11.3.3版本，以及weex-vue-render须要>= 0.11.50，而且vue-loader的设置做以下修正：

  • webpack 1.x

module: {
  loaders: [
    {
      test: /\.vue(\?[^?]+)?$/,
      loaders: ['vue-loader']
    }
  ]
},
vue: {
  /**
   * important! should use postTransformNode to add $processStyle for
   * inline style normalization.
   */
  compilerModules: [
    {
      postTransformNode: el => {
        el.staticStyle = `$processStyle(${el.staticStyle})`
        el.styleBinding = `$processStyle(${el.styleBinding})`
      }
    }
  ]
}

  • webpack 2.x

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerModules: [
            {
              postTransformNode: el => {
                el.staticStyle = `$processStyle(${el.staticStyle})`
                el.styleBinding = `$processStyle(${el.styleBinding})`
              }
            }
          ]
        }
      }
    ]
}

最好的实践是引荐你运用现在为止我们内部评价最高的一份脚手架工程（支撑三端一致，意味着处置惩罚了降级。）：dingtalk-templates/webpack，你能够直接下载它，自行修正package.json文件中的{{}} 设置，或许装置 open-dingtalk/weex-dingtalk-cli 这个命令行东西来玩转脚手架，这个命令行东西就像你运用vue-cli一样的简朴：

$ npm install -g weex-dingtalk-cli

款式-style

weex支撑的款式属于css子集

  • 必需写完全，如background:#000须要写成background-color:#000

  • 款式不允许提取文件，必需写在Vue的单组件中

  • 原则上不引荐运用预处置惩罚器，因为没法预期转译出来的款式相符weex的css子集

  • 规划只能运用Flexbox

  • 假如要显现文本必需运用text组件，而且你想转变字体大小必需写在text组件上

  • 只支撑class，不允许继续

  • 单元只支撑px

  • 不支撑背景图片

  • 基于750px举行缩放，会有浮点级别的偏差

  • 款式须要声明 scoped 属性

  • Android上处置惩罚圆角，必需在外层div中设置border-radius

  • 假如你想动态的替换class，只能运用数组表达式，<div :class=['name', a? 'b': 'c']></div>

假如你想运用预处置惩罚器（只是不引荐），能够以下设置：

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
          scss: 'vue-style-loader!css-loader!sass-loader'
        }
    }
}
<style lang="sass">
    @import './common.scss'
    // ...
</style>

假如你想运用更精准的适配（没法忍受浮点级别的偏差），能够猎取scale，deviceWidth自行举行适配，引荐在loader阶段去处置惩罚（自行开辟转换东西）。

JavaScript与内存治理-JavaScript and memory manage

因为JS运转在JavaScriptCore/V8中，此与Web有较大差别。

以下：

  • jquery，axios 之类的本来Web开辟范畴的库都不能够运用

  • 不支撑DOM操纵

  • 虽然供应了Native DOM能够操纵界面的衬着，原则上不引荐运用，要领与DOM操纵相似

  • 既然不支撑DOM操纵，变动界面的体式格局应当运用数据驱动

  • 仅支撑部份事宜

  • weex SDK >= 0.10.0 的才支撑事宜冒泡

  • 没有window，document，location，history等对象

  • runtime是一个“全局环境”，不允许往全局环境中挂载对象，因为没法开释且一切weex页面同享

  • 只要scroller和list组件能够转动

  • 不允许在Vue中操纵style，遍历是很耗机能的

  • Vue中的v-show等本来操纵Dom的指令或Api都不能够运用

  • vue-router 只允许运用 abstract 形式

  • vuex必需在初始化之前运用Vue.use注入

  • native端只能运用收集图片，处理的体式格局是在末了上线时一致替换成CDN

  • 热更新以及增量更新的体式格局都能够参考React Native现在成熟的计划

  • iOS因为运用了统一套URL System，UIWebView的cookie是会同享到weex中的，同理weex中的cookie也是会同享的，只要WKWebView不会。原则上，你不应当运用cookie来处置惩罚用户系统的题目

weex native 与 weex web 之间的差别较大，那末怎么办？

我们供应了一套抹平一些罕见差别的库，你也能够在weex环境中运用，https://github.com/open-dingtalk/weex-dingtalk-journey。

在说内存（memory）之前，人人先来看一副图，weex的内存散布：

《最全的weex踩坑攻略-出自大批实践与沉淀》

一般情况下，Native memory 营业开辟人员是没法处置惩罚的，而运转在js core 中的内存，我们晓得假如不断开援用，js是没法接纳开释内存的。

  • 不允许往 runtime 里去挂载对象

  • 营业代码中的一些援用在beforeDestroy 中缀开设置为null

  • 学会运用东西剖析内存走漏的题目，https://webkit.org/downloads/

  • 不要随便的运用函数递归，收缩对象要领的实行途径（传统JS范畴的内存治理最好实践也实用一部份）

  • 因为界面的衬着须要依靠createInstance(id, code, config, data)，sendTasks(id, tasks)，receiveTasks(id, tasks)发送指令的体式格局举行通讯，你应当削减通讯的次数，在更新界面时，兼并不必要的通讯指令的发送。

  • 假如你运用vue-router的体式格局，只管削减组件之间的同享。

转场体式格局-navigator

因为weex的特殊性，它的转场体式格局有几种组成。

  • weex to weex，假如你须要支撑钉钉js-api，那末你应当运用openLink。（假如是你本身完成，运用weex自带的navigator模块）

  • weex to h5 依旧运用openLink，（假如是你本身完成，那末能够经由过程module的体式格局来翻开一个WebViewController| UIWebView or WKWebView）

  • native to weex 直接alloc weex 容器的Controller传入Url即可

假如你运用vue-router，那末设置好你的路由path，运用push，go要领即可，唯一惋惜的是运用vue-router的体式格局较为僵硬。

页面级别的数据传输-Page level data transfer

页面级别的数据传输基础很少会发作，钉钉的开辟者引荐一致运用domainStorage计划。

  • weex to weex 经由过程URL传参数（照顾的数据量有限），经由过程weex storage module

  • weex to h5，h5 to weex 经由过程URL传参数

  • native to weex 经由过程alloc weex 容器中的option或许data传入，前者能够在weex.config中猎取，后者能够在vm高低文中猎取

  • weex to native 定义一个跳转native的module，运用native的属性或许init时传入

调试东西-Debug Kit used

weex的调试东西须要分外装置weex-toolkit，weex-devtool，以及在你的Native工程中集成对应的WXDevtool（iOS）。

假如你运转weex debug碰到以下的毛病：

Error: EACCES: permission denied, open '/Users/xxx/.xtoolkit/node_modules/weex-devtool/frontend/weex/weex-bundle.js'
    at Error (native)

（非Windows用户）运用sudo即可。

  • 不集成 WXDevtool SDK

起首，你须要装置Weex Playground，可自行在各大市场中下载装置。

不须要指明文件途径，在终端输入：

$ weex debug

先运用 Weex Playground 扫码（启动胜利后会弹出一个界面），然后将你的营业代码贴到 这里，注重：

  • 不允许涌现import等导入模块的语法

  • 装置了Weex Playground的装备和你的电脑必需在统一局域网内

末了用装置了Weex Playground的装备扫码（营业代码贴过去那边的右边会涌现的二维码）。

  • 集成 WXDevtool SDK

[WXDevTool setDebug:YES];
[WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.1.108:8088/debugProxy/native"];

ws:// xxx.xx..x 这个地点是在用weex debug 在终端里给你输出出来的，假如setDebug为YES会开启debugger形式，反之亦然。

注重setDebug设置为YES。

原生开辟-Native

请直接浏览 手艺 | Weex入坑之旅 ，这是用iOS视角写的一篇文章，大概在半年之前。

写在末了

愿望人人能够用一个开放的心态来对待weex，它的设想，完成有许多是值得进修的处所，比方多framework支撑，同享runtime，module，component，handler等等，异常的自在范畴，相当于它设想好了一个render engine，理论上你能够进修它的几个症结接口，晓得Native DOM指令后，也能开辟出替换Vue的上层框架，不信？你看看Rax即邃晓了。

weex也有一些不足的处所，开辟者数目少，社区活跃度不高，许多题目并不肯定能被google搜录到。文档确切有一点不完善，native的完成也有肯定的bug数目，你看react这么多年了，依旧有bug，只要在逐渐革新迭代修复，我以为它就是异常棒的，万事没有圆满无缺，美中不足的一点瑕疵，说不定才是圆满呢。

《最全的weex踩坑攻略-出自大批实践与沉淀》

    原文作者：闪电矿工翻译组
    原文地址: https://segmentfault.com/a/1190000010023500
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞