IOS 跨端：ReactNative 和 Weex

2021-11-19  本文已影响0人  时光啊混蛋_97boy

原创：有趣知识点摸索型文章
创作不易，请珍惜，之后会持续更新，不断完善
个人比较喜欢做笔记和写总结，毕竟好记性不如烂笔头哈哈，这些文章记录了我的IOS成长历程，希望能与大家一起进步
温馨提示：由于简书不支持目录跳转，大家可通过command + F 输入目录标题后迅速寻找到你所需要的内容

目录

一、ReactNative

1、相关命令

从零入门ReactNative的建议
搭建环境

依赖Node环境

brew install node
node -v 查看node版本
sudo npm cache clean -f 清除缓存
sudo n stable 升级到稳定版本
sudo npm install -g n 按照node

安装watchman。是 facebook 的一个开源项目，它开源用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作，例如执行一些命令等等。

brew install watchman

创建项目

npx react-native init xxx_name_xxx

启动。或者直接使用xcode启动工程编译调试。

yarn ios
创建的工程目录
react-native init MyAppName --version 0.64.0
react-native --version 查看版本
npx react-native info 命令查看当前的版本

{ "name": "HelloFirstRNDemo",
"displayName": "HelloFirstRNDemo"}

2、开发基本流程

ReactNative 代码

1、在App.js中，导入RN相关的组件，其中包括系统组件与自定义组件的导入

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  Text,
  useColorScheme,
  View,
} from 'react-native';

2、在App.js中，自定义组件，即搭建页面。

class HelloWorld extends React.Component {
  render() {
    return (
      <SafeAreaView>
        <Text style={styles.title}> hello my world! </Text>
        <ScrollView>
          <Section> section 1</Section>
      </SafeAreaView>
    )
  }
}

3、在App.js中，定义样式，推荐统一定义样式，RN使用布局方式为Flex布局。

const styles = StyleSheet.create({
    title: {
        fontSize: 42,
    },
});

4、在index.js中，组件的注册。

import {AppRegistry} from 'react-native';
import {HelloWorld} from './App';
import {name as appName} from './app.json';

// 第一个参数：应用名称，第二个参数：组件名。
AppRegistry.registerComponent(appName, () => HelloWorld);
原生端（iOS为例）
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

// 其中self为实现RCTBridgeDelegate的实例，必须实现方法如下：
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
      NSURL *url = nil;
    #if DEBUG
      url = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
    #else
      url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
    #endif
      return url;
}

初始化ReactNative代码的加载容器类RCTRootView。

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"FirstRNDemo"
                                            initialProperties:nil];

二、Weex

1、概述

阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。

近一年来，ReactNative 和 Weex 这些跨平台技术对Native开发者来说，冲击是巨大的。Native在开发App的时候存在一些弊端，比如客户端需要频繁更新，iOS更新时间还要受到审核的牵制；iOS、Android和前端同时开发同一个需求，在人员成本上消耗大；Hybrid的性能和Native相比又差了一点。ReactNative 和 Weex的出现，就是为了解决这些痛点的。

Weex从出生那天起，仿佛就是和ReactNative是一对。ReactNative宣称“Learn once, write anywhere”，而Weex宣称“Write Once, Run Everywhere”。Weex从出生那天起，就被给予了一统三端的厚望。ReactNative可以支持iOS、Android，而Weex可以支持iOS、Android、HTML5。一统三端就解决了前言里面说的第二个痛点，同时开发浪费人员成本的问题。

Native移动开发者只需要在本地导入Weex的SDK，就可以通过HTML/CSS/JavaScript网页的这套编程语言来开发Native级别的Weex界面。这意味着可以直接用现有Web开发的编辑器和IDE的代码补全、提示、检查等功能。从而也给前端人员开发Native端，较低的开发成本和学习成本。

Weex是一种轻量级、可扩展、高性能框架。集成也很方便，可以直接在HTML5页面嵌入，也可嵌在原生UI中。由于和ReactNative一样，都会调用Native端的原生控件，所以在性能上比Hybrid高出一个层次。这就解决了前言里面所说的第三个痛点，性能问题。

Weex非常轻量，体积小巧，语法简单，方便接入和上手。ReactNative官方只允许将ReactNative基础js库和业务JS一起打成一个JS bundle，没有提供分包的功能，所以如果想节约流量就必须制作分包打包工具。而Weex默认打的JS bundle只包含业务JS代码，体积小很多，基础JS库包含在Weex SDK中，这一点Weex与Facebook的React Native和微软的Cordova相比，Weex更加轻量，体积小巧。把Weex生成的JS bundle轻松部署到服务器端，然后Push到客户端，或者客户端请求新的资源即可完成发布。如此快速的迭代就解决了前言里面说的第一个痛点，发布无法控制时间。

Weex中Native组件和API都可以横向扩展，业务方可去中心化横向灵活化定制组件和功能模块。并且还可以直接复用Web前端的工程化管理和监控性能等工具。

2、工作原理

上图是官方给的一张原理图，Weex是如何把JS打包成JS Bundle的原理本篇文章暂时不涉及。本篇文章会详细分析Weex是如何在Native端工作的。笔者把Native端的原理再次细分，如下图：

Weex可以通过自己设计的DSL，书写.we文件或者.vue文件来开发界面，整个页面书写分成了3段，template、style、script，借鉴了成熟的MVVM的思想。

Weex在性能方面，为了尽可能的提升客户端的性能，DSL的Transformer全部都放在了服务器端实现，Weex会在服务器端将XML + CSS + JavaScript 代码全部都转换成JS Bundle。服务器将JS Bundle部署到Server上和CDN上。

Weex和React Native不同的是，Weex把JS Framework内置在SDK里面，用来解析从服务器上下载的JS Bundle，这样也减少了每个JS Bundle的体积，不再有React Native需要分包的问题。客户端请求完JS Bundle以后，传给JS Framework，JS Framework解析完成以后会输出Json格式的Virtual DOM，客户端Native只需要专心负责 Virtual DOM 的解析和布局、UI 渲染。然而这一套解析，布局，渲染的逻辑SDK基本实现了。

最后Weex支持三端一致，服务器上的一份JS Bundle，通过解析，实现iOS/Android/HTML5 三端的一致性。

上一篇 下一篇

猜你喜欢

热点阅读