angular高版本报cannot resolve error问题

最近使用ionic5的版本做jwt加密时，一直报Can't resolve 'crypto'的错误。而以前ionic3的版本却没有这样的问题。

发现jwt中是使用了crypto，而crypto是nodejs自带的方法。

查了些资料有说angular高本版移除了这些方法，比如crypto,fs,https,net,path,stream,tls,zlib。

很奇怪，为啥这样处理。下面我们需要找到配置的方法，把这些方法加回来。

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

找到该路径的文件，其中会看到一个配置node: false

我们将该配置改成如下：
node: {crypto: true, stream: true}
根据我们的需要进行添加。

web前端

解决iOS archive到App Store Connect时提示AipBase.framework contains unsupported architectures [x86_64, i386]

用script命令去掉这3个framework里面不支持的x86_64, i386的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
APP_PATH="${TARGET_BUILD_DIR}/${WRAPPER_NAME}"

# This script loops through the frameworks embedded in the application and

# removes unused architectures.

find "$APP_PATH" -name '*.framework' -type d | while read -r FRAMEWORK

do

FRAMEWORK_EXECUTABLE_NAME=$(defaults read "$FRAMEWORK/Info.plist" CFBundleExecutable)

FRAMEWORK_EXECUTABLE_PATH="$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME"

echo "Executable is $FRAMEWORK_EXECUTABLE_PATH"

EXTRACTED_ARCHS=()

for ARCH in $ARCHS

do

echo "Extracting $ARCH from $FRAMEWORK_EXECUTABLE_NAME"

lipo -extract "$ARCH" "$FRAMEWORK_EXECUTABLE_PATH" -o "$FRAMEWORK_EXECUTABLE_PATH-$ARCH"

EXTRACTED_ARCHS+=("$FRAMEWORK_EXECUTABLE_PATH-$ARCH")

done

echo "Merging extracted architectures: ${ARCHS}"

lipo -o "$FRAMEWORK_EXECUTABLE_PATH-merged" -create "${EXTRACTED_ARCHS[@]}"

rm "${EXTRACTED_ARCHS[@]}"

echo "Replacing original executable with thinned version"

rm "$FRAMEWORK_EXECUTABLE_PATH"

mv "$FRAMEWORK_EXECUTABLE_PATH-merged" "$FRAMEWORK_EXECUTABLE_PATH"

done
iOS

react-native 背景 之 ImageBackground

开发者们常面对的一种需求就是类似web中的背景图（background-image）。要实现这一用例，只需简单使用<ImageBackground>组件，然后把需要背景图的子组件嵌入其中即可。

1
2
3
4
5
return (
  <ImageBackground source={...}>
    <Text>Inside</Text>
  </ImageBackground>
);

我们可以通过 resizeMode 来实现图片的内容模式，这个属性的参数值和 background-size 很相似。

  • cover: 图片居中显示，没有被拉伸，超出部分被截断；
  • contain: 容器完全容纳图片，图片等比例进拉伸；
  • stretch: 图片被拉伸适应容器大小，有可能会发生变形。

这里有个比较重要的属性imageStyle，区别于style，这个属性是针对于背景图片的样式，比如我们如何实现一个背景图的圆角。

首先要设置ImageBackground的圆角，然后还要设置图片的圆角通过imageStyle。

react-native

Could not find iphone6 simulator

Could not find iphone6 simulator

当我们使用的react-native低版本的时候，而我的mac系统环境升级了，我们再运行react-native run-ios，这时候就会报上面的异常。

那我们如何来处理这个异常呢？

  • 既然是react-native版本太低了，简单直接的方法就是升级react-native，当然如果是维护已开发的项目，升级react-native版本后，会有一系列的版本代码需要升级。

  • 第二种方法呢，就是处理一下react-native这个包里面的代码，如下：

    在node_modules中找到react-native，打开后找到 findMatchingSimulator.js
    具体路径如下：

    1
    ./node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js

    首先我们找到如下代码块：

    1
    if (!version.startsWith('iOS') && !version.startsWith('tvOS'))

    将startsWidth改成includes，即如下

    1
    if (!version.includes('iOS') && !version.includes('tvOS'))

    也在别的地方看到改成别的

    1
    if (!version.startsWith('com.apple.CoreSimulator.SimRuntime.iOS') && !version.startsWith('com.apple.CoreSimulator.SimRuntime.tvOS'))

    这里可以自己写一个console.log(version, devices)看看具体的输出。

    以上处理完后执行 react-native run-ios 看看是否还报该异常。

    如果还有异常，在修改该文件中的这个部分

    1
    if (simulator.availability !== '(available)')

    找到这个地方改成

    1
    if (simulator.isAvailable !== true)

    同样的我们再次启动，如何还有该异常，我们还需要改原生的一块代码，找到如下路径文件

    1
    ./node_modules/react-native/React/Base/RCTModuleMethod.mm
    1
    2
    3
    4
    5
    static BOOL RCTParseUnused(const char **input)
    {
      return RCTReadString(input, "__unused") ||
             RCTReadString(input, "__attribute__((unused))");
    }

    改成

    1
    2
    3
    4
    5
    6
    static BOOL RCTParseUnused(const char **input)
    {
      return RCTReadString(input, "__unused") ||
            RCTReadString(input, "__attribute__((__unused__))") ||
             RCTReadString(input, "__attribute__((unused))");
    }

    这时候再启动，恭喜你，应该可以启动成功了！

react-native

git的一些基础知识学习

git 有远程库和本地库，比如github.com和git.oschina.net上我们称为远程库，我们本地项目中会有个.git的文件夹，那个我们称为本地库。

1、 git init
git init命令可以在我们本地项目中初始化一个本地库，我们的代码一开始都是放在本地库的；

2、 git status
git status命令可以查看我们更改的代码的文件，这里的比对对象是本地库，如果和本地库比较，有过修改的文件显示为红色；

3、 git add
git add是将我们修改的代码存到缓存中，这时我们通过git status查看的话所有的红色文件都会变成绿色，git add 后面需要接参数：

space + . 就是所有的的修改文件加入到缓存
space + 文件路径 单独把需要的文件加入到缓存
space + -A 有些特殊情况，space + .不能把文件加入到缓存，我们用这条命令

【注】这里我们插入讲一下.gitignore, 在有些时候依赖包，.idea文件夹，我们是不提交到库上的，这是我们就要对一些文件进行add 操作的忽略，这种情况我们在项目里创建一个.gitignore的文件，在里面加入需要忽略的文件夹或文件路径。

4、 git commit -m “提交描述”
当我们执行git add操作后，我们可以通过git commit创建一个提交记录，把代码加入到本地的库中，这时候执行git status命令时，绿色的文件夹就没有了。

5、 git push
执行git push操作我们把本地库和远程库进行比较，如果本地库commit 版本高于远程库，就说明本地代码最新，这是后执行git push操作就会把优先的commit的代码更新到远程库上，如果远程库有commit 本地库没有，这时执行这步操作就会报错，会提示执行git pull操作；
【注】如果是刚创建的项目，我们本地执行完以上命令，远程库也创建了，这时我们需要将本地库与远程库连接起来，我们需要执行git remote add origin + 远程库路径，这样就关联起来了，然后执行git push -u origin master这里的master就是我们指定代码的提交的分支，关于分支的概念可以自己学习了解一下。

6、git pull
每次在我们执行git commit操作后都需要执行git status查看一下，如果commit成功了，我们都需要执行一下git pull将别人提交的代码拉取下来，这里我们就会遇到一个常见的问题，代码的冲突问题。冲突是怎么产生的呢？当一个程序员编写修改了a文件的第一行，并且提交了，另一个程序员这是也编写修改a文件的第一行，然后commit操作完之后，执行git pull操作会有冲突提示：

1
2
Auto-merging "冲突的文件路径"
CONFLICT (content): Merge conflict in ...

这个时候代码已经拉取下来了，我们打开a文件会发现这样一串：

1
2
3
4
5
<<<<<<< HEAD
aaaabbb
=======
aaaaccc
>>>>>>> 6853e5ff961e684d3a6c02d4d06183b5ff330dcc

HEAD和======之间的代码是自己修改的，======到一串字符串（commit的版本号）之间是另一个程序员修改的，这时我们要根据项目需求保留正确的代码，如果自己是对的，就删除别人的，那些标识也要删除掉，如果都是要保留的，那就需要进行修改，两者都保留，然后在执行以上一系列命令把解决冲突的代码提交上去。

git

vue 自定义全局组件和通信

用了几天vue，在写vue时，我们都会自定义组件，比如loading和alert，每个页面都要import这个组件注入到component中去，然后再调用，感觉挺麻烦的，所以就想定义个全局的组件。

比如我们的目录机构是这样的

1
2
3
4
5
6
-- components
	-- index.js
    -- loading.vue
-- pages
-- app.vue
-- main.js

index.js

1
2
3
4
5
6
7
import Loading from './loading';

export default {
    install(Vue) {
        Vue.component('Loading', Loading);
    }
};

main.js

1
2
3
4
import Vue from 'vue';
import Overall from './components';

Vue.use(Overall);

web前端

more >>