又一个坑~~

最近研究了下React Native 与 Weex , 整理了份对比~ 最终选择的阿里霸霸的Weex!

本文主要是记录和分享我在实际开发Weex项目中的所见所学（2018年初）, 仅是我个人的理解, 并是一定是完全正确的, 也希望有大神指点学习🤝

已经2019年啦，目前Weex已经更新到1.3.11, WeexSDK目前更新到0.20.1 ，Weex已不再属于阿里， 贡献给Apache去迭代维护了，最新Weex官网， 变化不小，依然在努力。Weex的开发可以说每个人有每个人的理解，项目的场景和开发的习惯也不一样，以至于很多个人或者团队在Weex基础上又开源了很多不同的分支，比如Weex Plus、Weex Box、WEIUI等等，这些可以帮助开发者省去很多时间去理解和填坑，不过有利也有弊嘛。总之Weex的原理依然没有变。

Weex项目界面展示:

涉及: 图表, 列表, 菜单选择

涉及: 图片上传, 表单提交

我对Weex的理解:

通过Weex,可以写一套Vue代码渲染在Native和Web两端, 可以热更新. 在Native端的效果近似原生. 可以这样理解, 在Weex项目中, 你写的Vue文件最终会编译成两种类型的文件夹,
1.通过启动项目的命令: npm run serve (或者通过打包命令 npm run build:native), 可以时时编译到项目目录下的dist文件夹内 , 目录结构跟src目录下的结构一致, 会把.Vue文件编译成.js文件这些.js文件是Native端Weex SDK加载所需要的文件, 每个Vue文件对应一个.js文件, 所以把这些js文件放在服务器上, Native端加载js地址就可以了, 达到热更新效果~
2.通过命令: npm run build:prod 可以打包生成release文件夹, 该文件夹内是web环境访问所需的.html文件, 每个Vue文件对应一个.html文件, 浏览器打开就是你写的对应页面了

Weex SDK是Native端所需要集成的, 用于将.js文件渲染到Native端的手机上, 官方Demo可以通过 weex add platform ios || weex add platform android 去下载, 看下代码不难发现, SDK其实就是将.js文件(路径)渲染成一个View, 然后放到当前视图控制器中, Demo中有提供这个Controller, 接收一个Url, 这个Url可以是网络的js路径,也可以是本地的js路径.所以关于页面适配, 其实只要Native端适配当前视图控制器的View就可以了

虽说支持Vue语法, 但在实际开发的过程中, 其实并不像开发Vue项目那样随意, 区别和限制要求还是挺多的. 说下最典型的页面调整路由吧, Vue属于单页应用, 通过Router来管理页面, 怎么跳转都是一个页面. 而Weex并不是单页应用, 可以理解成Weex每个页面都是一个新初始化的Vue页面. 所以目前我还不知道Weex如何配置全局变量~

Weex比较适合做一些列表信息展示, 如果经常封装组件的话, 开发起来会很快, 这是Weex的优势, 但涉及到比较复杂的功能(地图, 拍照摄像等)就需要费点心思了, 甚至需要Native端去支持, Weex提供了Module, Component 等桥梁, 可通过Weex向Native传值和回调, Native可以注册原生Component给Weex使用, 你也可以使用<Web>标签来加载html用来显示比较复杂的图表功能(如上面雷达图)

在开发人员上面, 虽说是Web开发, 但是我觉得最好有 iOS 或 Android 开发经验, 这样的话理解Weex运转起来会非常得心应手, 也可以让公司的移动端开发小伙伴一起参与Weex的学习~ , Weex不像React Native那样有非常多的组件, 很多参考资料, 活跃的社区. Weex实际开发中所遇到的问题基本需要自己去思考, 官网上Weex的组件大多数都是很久之前的代码了, 其实原理就是Native端写好提供的, 跟你注册Module给Native端他们实现是一样的, 所以在选择上面请多考虑. 这里推荐 Weex-Ui . 钉钉也有Weex-Ui官方群提供交流和学习!

Weex-Ui官方钉钉群

Weex Apache 官方社区交流钉钉群

如何创建工程请仔细阅读Weex官网要好好看看哦

下面就来细说下工程里的一些内容了

搜索关键词:
工程运行
全局方法的配置
页面跳转
降级方案
网络请求stream
图片加载
关于获取标签对象
动态修改标签样式
自定义字体样式
跨域相关
打包部署
交互相关
JS缓存机制
CSS样式不支持记录
标签样式不支持记录
点击事件失效
<list>列表中的<input>显示错误
运行 weex add platform ios 出现错误

工程运行

weex create xxxx 后先看下最新的效果吧~

cd 项目目录下 npm start启动项目,浏览器中可以看到:

Hello

可以说preview.html其实就是用来看下在手机尺寸中展示的效果的, 在项目中web/preview.html中可以找到, 这里是Web环境并非Native环境呦,

<iframe id="preview" src="/" frameborder="0"></iframe>

还记得之前地址的后缀么?page=index.js这个index.js就是src下对应index.vue编译出的结果,所以这个加载的结果就是src目录下index.vue中的内容~ 如果需要查看其它页面样式直接改成src目录下的相对地址就可以了~

全局方法的配置

我目前的处理方式是把所有全局方法写在一个.js文件里，其他页面手动导入这个js文件中的方法

// src/mixins/index.js
export default {
  methods: {
     $push () {...}
  }
}

其他页面引入这个js文件中的方法:

import globalMethods from '../mixins/index.js'
export default {
  mixins: [globalMethods],
  created () {
  }
}

页面跳转

在Weex中使用Vue 这篇文章中有介绍如何使用和使用注意事项, 需要好好看一下!
其中关于使用 Vuex 和 vue-router ,感觉官方其实并不推荐使用vue-router了, 更推荐使用 navigator 来管理页面实例

按官方的例子使用navigation进行跳转

methods: {
      jump (e) {
        navigator.push({
          url: '/view_one/index_two',
          animated: 'true'
        })
      }
    }

发现在Web端url是可以写相对地址的,跳转没有问题.
但是在Native端,页面加载是失败的,应该是因为Native端加载的是js文件, 所以Native端url需要写完整的js路径

这里重点说下我在跳转方面的处理

曾经iOS , WeexSDK是可以看到源码的, 现在不行了哈, 我看了下navigator的写法,其实就是使用系统的跳转, 把传过来的Url给Controller去渲染,这样的话Native端当然需要完整的js路径咯, 所以我建议原生上面的跳转最好自定义, 这样的话导航栏的隐藏/显示/标题等等都可以自己控制, 很简单, 注册个Module, 定义一个方法就可以了

// iOS代码
@implementation WXNavigationModule

WX_EXPORT_METHOD_SYNC(@selector(push:))
WX_EXPORT_METHOD_SYNC(@selector(pop))

/**
 页面跳转
 
 @param params 参数
 */
- (void)push:(NSDictionary *)params {
    if ([params isKindOfClass:[NSDictionary class]]) {
        NSString *h5Url = params[@"h5Url"];
        NSString *fallbackUrl = params[@"fallbackUrl"];
        [BLRouterService.shared gotoWeexWithH5Url:h5Url fallbackUrl:fallbackUrl barHidden:[params[@"barHidden"] boolValue]];
    }
}

/**
 页面返回
 */
- (void)pop {
    dispatch_async(dispatch_get_main_queue(), ^{
        [BLRouterService.shared.navigationController popViewControllerAnimated:true];
    });
}

Web环境我依然使用Weex自带的navigator, 所以我根据平台做了区分:

// js 代码
// push操作 barHidden代表是否隐藏导航栏 默认隐藏
    $push (path, barHidden) {
      if (this.$isNativePlateform() && weex.supports && weex.supports('@module/navigation.push')) {
        weex.requireModule('navigation').push({
          h5Url: this.$getPushPath(true, path),
          fallbackUrl: this.$getPushPath(false, path),
          barHidden: barHidden,
          animated: true
        })
      } else {
        weex.requireModule('navigator').push({
          url: this.$getPushPath(false, path),
          animated: 'true'
        })
      }
    },
  /**
     * 是否native
     */
    $isNativePlateform () {
      var platformType = this.$getPlatformType()
      return (platformType === 'android' || platformType === 'iOS')
    },
    // 获取平台类型
    $getPlatformType () {
      if (weex.config.env.platform === 'iOS') {
        return 'iOS'
      } else if (weex.config.env.platform === 'android') {
        return 'android'
      } else if (weex.config.env.platform === 'Web') {
        return 'web'
      } else {
        return 'undefine'
      }
    },

还有一点需要注意的就是这个跳转路径的拼接:

1. Native端加载的是.js文件, 这个文件在本地的dist目录下, 相对views的文件
2. Web端加载的是.html文件 本地测试的时候,通过控制台的接口请求可以看到加载的其实是页面相对views的路径.html

http://192.168.1.49:12581/views/etc/home.html

所以使用跳转的时候传的path最好是相对views文件的相对路径,比如这样

 this.$push('views/order/order-detail?applyId=' + this.dataItem.applyId)

这样的话拿到这个path后处理下路径和参数, 通过平台判断否拼上/dist, 末尾是.js 还是 .html 等, 就这可以完美在Web和Native端跳转了

降级方案

所谓的降级方案可以理解成如果发现Native端的SDK无法展示或者展示出现问题, 则使用Web去展示. 也就是说当Native端SDK在渲染页面时发生了错误回调, 我们就需要写一个WebView去展示该页面对应的H5地址了, WebView加载的可不是js了, 而是页面对应的.html (Weex写出的页面打包好后,最终会在release文件夹内生成对应的.html文件用于Web端展示,加载的地址可以由Web传给Native端记录下来, 也可以根据服务端部署的位置自己调整).
iOS的Native端错误回调如下:

    _instance.onFailed = ^(NSError *error) {
#if DEBUG
        if ([[error domain] isEqualToString:@"1"]) {
            dispatch_async(dispatch_get_main_queue(), ^{
                NSMutableString *errMsg=[NSMutableString new];
                [errMsg appendFormat:@"ErrorType:%@\n",[error domain]];
                [errMsg appendFormat:@"ErrorCode:%ld\n",(long)[error code]];
                [errMsg appendFormat:@"ErrorInfo:%@\n", [error userInfo]];
                
                UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"render failed" message:errMsg delegate:weakSelf cancelButtonTitle:nil otherButtonTitles:@"ok", nil];
                [alertView show];
            });
        }
#endif
    };

也就是说这里我们需要手动将创建一个WebView加载到当前控制器去展示了,Weex渲染的View就可以移除了.

请注意: 降级情况下虽然也在Native端, 但这时候注册Module 不会再起作用了,
这时候想要交互就属于纯html与WebView的交互了, Native端去给WebView注册JS吧

通过版本号手动降级控制:

官方推荐使用模块降级, 也就是说用第三方plugin去判断.
群里的大神推荐使用webpack-plugin-downgrade 这个插件,
按照它的意思我在weex/configs/webpack.common.conf.js 这里添加plugin 并使用, 请注意 new DowngradePlugin({}) 一定要放在第一位,不然会报错

const plugins = [
  new DowngradePlugin({
    condition: {
      // Any condition is matched will be downgraded.
      ios: {
        osVersion: '>1.0',
        appVersion: '>1.0.0',
        weexVersion: '>1',
        deviceModel: ['iPhone5,1']
      },
      android: {
        osVersion: '>1.0',
        // Check condition with multiple app.
        // The `MY_APP_A` and `MY_APP_B` is WXEnvironment's appName param.
        appVersion: {
          MY_APP_A: '>1.0.0',
          MY_APP_B: '>3.0.0'
        },
        weexVersion: '>1',
        deviceModel: ['G-2PW2100']
      }
    }
  }),
  /*
   * Plugin: BannerPlugin
   * Description: Adds a banner to the top of each generated chunk.
   * See: https://webpack.js.org/plugins/banner-plugin/
   */
  new webpack.BannerPlugin({
    banner: '// { "framework": "Vue"} \n',
    raw: true,
    exclude: 'Vue'
  })
]

OK, 只要满足condition中的判断条件, 当加载页面时就会对应回调_instance.onFailed失败方法~

iOS中设置appName 和 appVersion 很方便 官网说的很清楚~
Android比较"耐人寻味", 最终在群里询问大神找到了答案:

Android配置

网络请求stream

现在stream并不属于weex自带的网络请求库了, 属于一种plugin, 在entry.js中的注释部分有说明,所以需要 npm i weex-vue-stream --save , 然后在entry.js中导入和添加:

import stream from 'weex-vue-stream'
// install the plugins.
weex.install(stream)

图片加载

方法应该有很多,网上也有一些
《Weex 加载 .xcassets 中的图片资源》
《可能是史上最全的weex踩坑攻略》- 故事六: 图片加载
《weex android iOS 加载本地图片》

官方推荐的图片加载的方法WXImgLoaderDefaultImpl ,这里如果要替换SDWebImage版本或者方法请注意返回的对象要实现<WXImageOperationProtocol>方法, 不然会闪退, 具体可参考文章之前遇到的问题即解决.

因为要考虑到三端统一与热更新, 我就把所以图片放在服务上了 ,这就不存在加载iOS / Android 本地的图片了, 所以图片的路径也要是完整的路径 (所有图片路径我也得做处理) ,当然这样做也有不好的地方, 加载慢什么的, 因为Native端会做图片缓存, 所以就没怎么考虑了

关于获取标签对象

官方推荐使用ref

<div ref='container'></div>

const dom = weex.requireModule('dom')
  mounted () {
    this.$nextTick(() => {
      var _this = this
      setTimeout(function () {
        dom.getComponentRect(_this.$refs.container, containerOption => {
            // getComponentRect 官方使用时没有加延迟 但这个方法有时候我发现获取的size都是0，所以遇到这样的情况可以加个延迟，
        })
      }, 300)
    })
  },

动态修改标签样式

网上找的一种方法~

const animation = weex.requireModule('animation')
mounted () {
  this.$nextTick(() => {
    var _target = this.$refs.target
    animation.transition(_target, {
      styles: {
        backgroundColor: 'red'
      },
      duration: 0, // 变换用时，可设置为0
      timingFunction: 'ease', // 变换的动画，同理css3变换
      delay: 0 // 延时执行
    })
  })
}

如果需要重新渲染，我使用的方法是vue动态style

v-bind:style="{ height: viewHeight + 'px'}"

animation动态修改标签样式在手机上不支持修改坐标(fixed: top,left,right,bottom) ,需要使用:style, 而且dom.getComponentRect这个方法写在Created() 方法里在手机上获取不到dom, 需要价格setTimeout延迟获取

自定义字体样式

字体具体我没实现过，群里朋友分享的

跨域相关

weex默认是支持跨域的 —— 可参见这篇文章
但是在电脑浏览器上会出现跨域问题，在手机或者模拟器上不会~
如果想在电脑浏览器中实现跨域方法,可以用 weex工程自带的跨域插件去设置~
在config.js 中 添加如下配置, 重启服务即可降/api自动代理成http://testapi.demo.cn

proxyTable: {
      '/api': {
        target: 'http://testapi.demo.cn',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

打包部署

打包Web页面:
npm run build:prod 是打包到生产环境的命令, 这里需要注意下,默认是会产生巨大的.map文件的, 一般部署是不需要的,所以我们需要配置下打包时不编译.map文件

config.js

webpack.prod.conf.js

其实也就是在配置文件中搜索下map关键字 对应的看下是否是相关控制,然后取消调就可以了

成功打包后会在目录下生成release文件:

release

可以看到对应的vue文件最终会生成一个html, 我们只要访问这个html就可以看到内容了, 所以部署的时候只要将release/web文件夹部署到服务器上即可~

打包Native页面:
npm run build:native后会在根目录下生成dist文件, 这个文件中会对应生成.js文件,一般将整个dist目录放在服务器中,Native端加载即可

打包图片:
哈哈,目前还不知道图片如何打包, 只是把图片手动拖到服务器中, 还在研究...

交互相关

Weex 到 Weex 之间:
如果是父子页面关系: refs
如果是跨页面: BroadcastChannel

Weex 到 Native:
Module

Native 到 Weex:
在页面加载时通过Native端render渲染时传入option参数, 或者globalEvent 还可以由Weex发起然后使用CallBack回调

下面主要记录下Weex中Web展示页面和Weex原生展示的页面之间的交互,怎么理解呢,场景如下:

因为要显示echart表,所以在native端我是这样处理的, 我单独用HTML写了一个展示echart页面, 这个页面就是web环境了, 我在其他页面用<web>去加载这个HTML, 现在遇到的问题就是传参和参数监听.而目前唯一的桥梁就是<web>展示的src的URL, 我通过使用锚点http://baidu.com#params进行参数传递并且不会刷新<web>, 这个方法在iOS是没有问题的,但是在Android上遇到了修改锚点<web>依然被刷新(因为src检测到URL变化了).
解决方案: Android去单独判断, 加载完URL后,这样改变url:

<web src="javascript:window.changeHighLightText('xxx')">

然后在对应的HTML页面用window注入这个方法,即可达到传值效果.bingo~

javascript: 的方法在很多浏览器中都被禁止, 因为涉及到安全性,但是在Android上目前依然是可行的, 没办法的办法了, 但这种方法并不能保证所有Android都使用, 也许有些系统会禁止这种方法~ (iOS使用这种是行不通的)

postMessage 向当前 Web 页面发送数据 不过该方法目前仅支持Android

这里有个方法可以参考 ,通过<web>加载的h5页面向weex页面发送消息

JS缓存机制

参阅该文章

CSS样式不支持记录：

1.padding margin 不支持缩写 ，类似这种,

padding: 0 20px 30px 0;

但是如果四个值一样可以，类似这种

margin: 10px;

2.不支持百分比

3.display布局仅支持relative | absolute | fixed | sticky 可参考这偏文章

4. border 样式差异官方说明

border 目前不支持类似这样 border: 1 solid #ff0000; 的组合写法。

5.不支持display:none, 可以使用 v-if 代替，或者用 opacity:0; 来模拟
值得注意的是,当opacity的只小于等于0.01时，native控件便会消失，但视图会被渲染,占位空间还在，但用户无法进行交互操作，点击时会发生点透效果。

6.阴影(box-shadow), 仅支持iOS 不支持Android (吐血...)

标签样式不支持记录

1. 支持 v-if , 不支持 v-show , 有些标签不支持 v-else v-else-if (比如text标签不支持,但div标签支持)

点击事件失效

官方明确了一些不支持@click='function()'方式的标签

自定义的组件需要

<customComponent @click.native='customClick()'></customComponent>

<list>列表中的<input>显示错误

在<list>列表里, 如果<cell>标签中存在<input>输入框, 当列表滚动时,如果<input>框滑出列表再滑回来会出现无法看到值的情况, 这是<list>列表复用时产生的Bug, 解决方法: 下面的评论中我也有给出我的建议

运行 weex add platform ios 出现错误

error: unknown option `--telemetry'

请参考这篇文章评论

继续更新....