iOS程序犭袁前端weex

地球上最全的weex踩坑攻略-出自大量实践与沉淀

2017-07-01  本文已影响6263人  icepy

在自己的业务环境中使用，并开放给第三方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的配置做如下修改：

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})`
      }
    }
  ]
}

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子集

如果你想使用预处理器（只是不推荐），可以如下配置：

{
    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有较大差异。

如下：

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

我们提供了一套抹平一些常见差异的库，你也可以在weex环境中使用，https://github.com/open-dingtalk/weex-dingtalk-journey。

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

DingTalk20170701160256.png

正常情况下，Native memory 业务开发人员是无法处理的，而运行在js core 中的内存，我们知道如果不断开引用，js是无法回收释放内存的。

转场方式-navigator

由于weex的特殊性，它的转场方式有几种构成。

如果你使用vue-router，那么配置好你的路由path，使用push，go方法即可，唯一可惜的是使用vue-router的方式较为生硬。

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

页面级别的数据传输基本很少会发生，钉钉的开发者推荐统一使用domainStorage方案。

调试工具-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即可。

首先，你需要安装Weex Playground，可自行在各大市场中下载安装。

不需要指明文件路径，在终端输入：

$ weex debug

先使用 Weex Playground 扫码（启动成功后会弹出一个界面），然后将你的业务代码贴到 这里，注意：

最后用安装了Weex Playground的设备扫码（业务代码贴过去那里的右侧会出现的二维码）。

[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，只要在逐步改进迭代修复，我觉得它就是非常棒的，万事没有十全十美，美中不足的一点瑕疵，说不定才是完美呢。

qrcode_for_gh_a08ff7d69ad8_258.jpg
上一篇 下一篇

猜你喜欢

热点阅读