使用ICE构建weex小程序

安装Mac开发运行环境

1. 安装homebrew
2. 安装git
3. 配置gitlab
4. 安装nvm
5. 配置nvm
6. 安装nodejs
7. 安装npm相关工具
   1. 安装cli的XXX工具。后续的XXX都是指文章中的cli工具
8. 安装VSCode
9. 安装VSCode插件
   1. 中文语言包
   2. Prettier
   3. ESLint
   4. Bracket Pair Colorizer
   5. Path Intellisense
   6. markdownlint
10. 配置prettier
11. 配置code command in PATH

项目初始化

使用CLI命令进行项目工程初始化

> XXX init weex
？Please choose target app for the project
> 百度APP √
> 抖音APP
> 手淘APP

然后一步步选下去就行了，填写项目类型和项目名称等信息

最后gitlab和XXX发布平台都会有项目了

npm install
npm start

运行hello world项目

添加自定义标签支持

端侧要做的事情

在端上新建一个继承自ViewNode或是WXComponent的节点。

并实现如下方法就能进行端上调用前端方法，前端调用端上方法

- (UIView *)loadView {
    // 组件指向的端上view
    return [RAMTestView new];
}

- (void)updateAttributes:(NSDictionary *)attributes {
    // 获取便签的属性
    NSLog([attributes valueForKey:@"src"]); // from
}
// 供前端使用ref进行调用的方法
// testRef.current.test({ param: 'value' });
- (void)test:(NSDictionary *)params {
    NSLog(@"param: %@", params);
    // 调用前端写在标签中的方法，前端使用onTest1
    [self fireEvent:@"test1" params:@{}];
}

// 需要暴露给前端的方法，export出来
+ (NSDictionary *)exports {
    return @{
        @"test": NSStringFromSelector(@selector(test))
    };
}

注册标签

[WXSDKEngine registerComponent:@"laoqiutest" withClass:[RAMTestComponent class]];

前端要做的事情

在初始化项目中添加

// 使用 react hooks
import { useState, useRef, useEffect } from 'react';
// 调用端上注册的module方法
export nativeApi = weex.requireModule('nativeApi') || {}

export default function Home() {
  // 用来调用前端方法的react useRef hook
  const testRef = useRef();
  // 状态监听机制
  const [count, setCount] = useState(1);

  useEffect(() => {
    const handler = () => {
      setParams({ testTipShowed: 'true' });
    };
    const handlerClick = () => {
      console.log('rambo test')
    };
    // 监听sdk调用的appear方法，主要就是监听端上调用fire event的事件
    window.addEventListener('appear', handler);
    // 端上调用前端方法onTest1就能收到事件监听
    window.addEventListener('test1', handlerClick);
    return () => {
      window.removeEventListener('appear', handler)
      window.removeEventListener('test1', handlerClick)
    };
  }, []);

  const onRamboClick = () => {
    // 调用端上module暴露的接口negligible
    nativeApi.toast({ message: 'rambo 前端调用端上方法' });
    // 前端调用端上export出来的方法
    testRef.current.test({ param: 'value' });// native通过export暴露给前端调用的方法
  };

  return (
    <div className={styles.app} 
			// div的点击事件
			onClick={ () => { onRamboClick(); }
			}>
      <laoqiutest 
        src='from'
        ref={testRef} // 前端调用端上export出来的方法
        onTest1={() => {
          // 端上通过fire event可以调用到的方法
          nativeApi.toast({ message: 'rambo 端上使用fireevent调用前端方法' });
        }}
      >自定义标签测试</laoqiutest>
    </div>
  );
}