示例工程：sample project

一、前言

现在跨端的开发采取了前端的 DSL，也变成前端人员必备的开发技能之一了。

当前：

1. react-native，weex，快应用（严格讲是跨手机）这种使用前端语言，视图部分交由原生渲染，所以 css 都是酌情支持。交互部分交由另外启动的 js 引擎来执行。
2. 各类小程序这种使用前端语言，视图部分由 webview 渲染，所以大部分 css 都是支持。交互部分交由另外启动的 js 引擎来执行。
3. fluter，自己整的渲染器和逻辑解析器，开发语言也是自己一套。硬要说也是和小程序一类吧，只不过小程序用的终端落地方案是现成的，fluter 都自己弄新的。

有了跨端解决方案，就有了跨端写法统一解决方案。比如：uni-app taro mpvue，chamelon，就是采用 vue 或者 react 的技术栈，然后可以编译成 rn，小程序等的编译产物。主打一个殊归同途。

前两种其实都是大同小异，都是前端 DSL，只不过是可用的标签和样式不一，一通百通，看看文档就可以了。fluter 都是完全不同的语言，有接触到再说。

二、启动

react-native ios 开发的第一个难点就是搭环境。参考官网《environment-setup》。

里面提到可以用沙盒模式开发，也就是先跳掉一系列的系统环境安装。但是我想这只适合体验一下，如果真的要开发 react-native，还是得配好一系列环境。何况中文官网还说了：

译注：沙盒环境大量依赖于国外网络环境，也不能直接安装第三方原生组件。不建议国内用户使用

所以还是老老实实从 Xcode 安装起吧。其中可能需要科学上网才能安装完，比如这个 CocoaPods，这个 ios 依赖包管理工具，就要下载很久。

ruby 版本

mac 默认的 ruby 版本是 2.6.8，当前 react-native 中用到的 ruby 版本是 2.7.5，需要更新。可以参考网上大佬的文章《React-native初始化项目（Installing Ruby Gems）》。

ios 依赖

在准备好工具后，就会开始初始化项目。会很久，安装完前端的依赖后，会进行 ios 的依赖的安装。这一步可能会有各种失败，比如安装 hermes 引擎就很容易失败。
这时候不用重新创建项目，确保外层的前端 node_modules 安装完后，进入 ios 文件夹执行 pod install，或者在根目录执行 npx pod-install，重试一直到完成。

Read More

前言

其实官方文档《Integration with Existing Apps》讲得挺详细，但是有点面向 ios 开发，对于 ios 开发的同学应该很容易看懂吧。不熟悉的我摸索了很久，记录一下。

重要！！！

先参考官网《Setting up the development environment》把 react-native 的开发环境搭建起来，因为基本如出一辙。对于 ios 而言， react-native 像是它的一部分子应用，本质上还是原生应用。
因为就是要用到原生的东西，所以不要用 Expo 这种方式。这个是方便开发用的，最后应该要回到原生来。

能成功启动 react-native，想必也搞定了 CocoaPods 这个麻烦的工具，用来下载原生相关依赖的。

创建 ios app

Xcode Version 14.3 (14E222b)

1、创建一个 ios app

2、填写相关信息

Product Name：顾名思义，这个应用的名字，随便填，自己记住。
Team：没有就先跳过，苹果开发要求的，上线要用到。
Organization Identifier：组织标识，公司或者产品网址倒着写，随便填。
Interface：有 SwiftUI 和 Storyboard 可选，选择 Storyboard。
Language：选 Swift 或 Objective-C 都可以。

3、操作 xcode

上图为例

先点击中间的“分屏按钮”，编辑器就会变成两个编辑区，一个打开 ViewController.m 文件，一个打开 Main 文件。虽然显示是 Main 文件，但硬盘上可以看到是叫 Main.storyboard 文件。

然后点击右边的“组件库按钮”，打开组件库，拖拽一个 button 组件到 storyboard 编辑区，也就是生成一个按钮到应用上。

最后点击左边的“运行按钮”，看到弹出来的手机模拟器上有自己加的 button 就算成功了。

Read More

工程不经常改动，就不建仓库了，弄个压缩包完事。
代码压缩包：micro-qiankun.tar.gz

背景

文章不是为了讲怎么用 react & vite & qiankun 结合搭建。搭建也不复杂，直接看示例代码就可以了。主要是这其中遇到的一个问题：

qiankun.js:17 [import-html-entry]: error occurs while executing normal script <script type=”module”>

详情如图：

记录下这个问题的产生及解决。

介绍

qiankun.js 是一个微前端框架。对于微前端，之前也尝试过《用 webpack ModuleFederationPlugin 搭建微前端》。

两者差别的话：

1. 如果用 vite，那 webpack5 MF 肯定用不了（废话~）。
2. 对于 qiankun，是不论框架的，基座和各个子应用可以完全不同框架，因为用的沙箱机制，可以可以云云（详看官网介绍）。
3. 而 webpack MF 其实也不是为了微前端出来，而是共享一部分功能出来，恰好能用作微前端。最终形式是暴露出一份 js 文件给主应用引用。那就最好基座和子应用都是同框架。

个人理解：

• 如果是成熟的几个不同项目，要揉在一起，但是彼此关联又不是很大，可以用 qiankun。
• 如果是本身就是同一个大项目，要拆成不同模块分工维护。有很多共享的数据，可以用 webpack ModuleFederationPlugin。

Read More

一直觉得文章代码不够醒目，虽然也确实是高亮了。想着应该是这主题原因，就打算换个高亮主题，就我最喜欢的 sublime 的 monokai 主题。即使现在用 vscode 也还是用这个主题。

网上查了一下，hexo 本身就是用了 highlightjs 实现代码高亮的，但是它配置的颜色实在是不太行，要换的话，得完全自己手动。

一、关掉 hexo 本身的 highlightjs 使用

项目根目录下的 _config.yml 文件，highlight 字段 enable 改为 false。关掉原本的配置，不然会和自己手动配置冲突。

可能会遇到没生效，也就是关闭后还有高亮的效果。这时候看看 hexo 版本是不是 7 以上。我就是用了 7 版本不行，后面换了 npm i hexo@^6.3.0 就可以了。我看了下载量最多的还是 6.3.0。换了版本后可以执行下 npx hexo clean 清一下缓存。

二、下载 js 和 css

上 官网Download 挑选功能，然后下载。也可以现在 官网Demo 看看主题效果预览。

下载后的压缩包，把 highlight.min.js 文件放到 项目/themes/正在生效的主题/source/js 文件夹下。
把要用的主题 css 拿出来，当然也可以所有 css 文件放进去，我就放了 monokai 主题的 css 而已，其他的用不上。把 monokai-sublime.min.css 文件放到 项目/themes/正在生效的主题/source/css/highlight/styles 下。

三、引用并使用 js 和 css

在 项目/themes/正在生效的主题/layout/_partial/head.ejs 文件里，引入刚刚放好的 css 文件，插入代码：

<link rel="stylesheet" href="/css/highlight/styles/monokai-sublime.min.css">

在 项目/themes/正在生效的主题/layout/_partial/after-footer.ejs 文件里，引入刚刚放好的 js 文件，然后初始化，插入代码：

<script src="/js/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>
  $(function(){
    $('pre code').each((i, el) => {
    hljs.highlightElement(el);
  });
  $('code.hljs').each(function(i, el) {
     hljs.lineNumbersBlock(el);
  });
  }());
</script>

Read More

书接上回《react 基础工程（react-redux & react-router）》，由于最近项目上的新实践新体验，所以记录一下。

依然，代码仓库：github。

一、用 @reduxjs/toolkit 创建 reducer 和 api

其实工程里已经用到这个工具，但是当时还没完全发现它的优势，还以为不过是官方推荐的比较好用的三方库而已。才知道确实简化了处理以及还有别的封装功能。

1、简化写法

以前老式的 redux 写法：

import { cloneDeep } from 'lodash';
export const addStringAction = payload => ({
  type: 'ADD_STRING',
  payload: payload,
});
export const minusStringAction = payload => ({
  type: 'MINUS_STRING',
  payload: payload,
});
const defaultState = {
  b: 'abc',
};
export default function stringReducer(state = defaultState, action) {
  const { type, payload } = action;
  state = cloneDeep(state);
  switch (type) {
    case 'ADD_STRING':
      state.b += payload;
      return state;
    case 'MINUS_STRING':
      state.b = '';
      return state;
    default:
      return state;
  }
};

用 @reduxjs/toolkit 的写法：

import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• a. 不需要再额外声明 action 了，不需要定义那些 type 了。reducers 字段下的每个方法就是个 action。用的时候直接 dispatch(increment(123)) 即可。

• b. 而且好像可以直接改 state 上的字段，不需要返回一个完全新的 state 了？其实也是里面做了处理。看官方介绍，在注释里：

Redux Toolkit allows us to write “mutating” logic in reducers. It doesn’t actually mutate the state because it uses the Immer library, which detects changes to a “draft state” and produces a brand new immutable state based off those changes

Read More