无星的小窝

为什么要引入

一开始我想的是，可能多人多项目开发，把组件展示出来，避免重复造轮子

但后来想想，好像除了展示，没什么其他用处

两个项目如果要用同一个样式的组件，如果没有单独抽出组件库，还是得复制粘贴，用处不大

只能说做组件库的同学用这个比较好用。

还有一个自动化测试的好处（不过我从来没写过测试，暂时还无法体会这个好处）

还有其他用处的话，麻烦老哥们留言区告诉我

如何引入

1
2

cd 项目目录下
npx -p @storybook/cli sb init

会拉一些依赖，并新建两个文件夹

其实标题起的有点大，主要是使用shell中的&和wait这两个命令。

运维大佬不要嘲笑。

无星的前端之旅（四）——小程序持续集成前面介绍了背景，我们有一套代码要发40多个客户的小程序主体。

在Jenkins中加shell去完成上传开发版这个操作。但是需要进行多参数化配置，换句话说就是40多家客户我们要打40多个包，分别上传。

shell的执行方式是，前面执行完了，我们才能执行下一个命令。

因此如果我们打一个包并上传的时间是1分钟，那40家就是40分钟。这谁顶得住啊。

所以需要考虑如何压缩这个打包上传时间，能不能同时打包，同时上传。

原本的shell如下，变量我就写中文代替了

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

function npminstall(){
  echo "拉依赖"
  cd 代码文件夹下
  npm install
}
function buildwx(){
  echo "执行构建"
  # echo '环境:'$1
  # echo '文件名:'$2
  # echo '客户名:'$3
  npx cross-env 环境=$1 文件名=$2 客户名=$3 node build/build.js wx
}
function upload(){
  echo "执行上传"
  # echo '文件名:'$1
  # echo 'appid:'$2
  # echo 'version:'$3
  npx miniprogram-ci upload --pp  ./dist/${1}/wx --pkp ./privatekey/private.${2}.key --appid ${2} --uv ${3} -r 1 --enable-es6 true
}
#------------------待构建配置------------------
configs=(
"xxx客户;xxx环境;xxx文件名;xxxxappid"
"xxx客户;xxx环境;xxx文件名;xxxxappid"
)
##读取version变量
version=‘xxx文件读取’
#------------------执行批量构建------------------
npminstall
for xxx in ${configs[@]};do 
客户名=`echo ${xxx} | awk -F ";" '{print $1}'`
环境=`echo ${xxx} | awk -F ";" '{print $2}'`
文件名=`echo ${xxx} | awk -F ";" '{print $3}'`
appid=`echo ${xxx} | awk -F ";" '{print $4}'`
buildwx ${环境} ${文件名} ${客户名}
upload ${文件名} ${appid} ${version}
echo "$客户名 上传完毕"
done

就是一个简单的for循环，根据配置信息批量打包。40多家就是40分钟。

背景

刚刚跑路到一家新公司。新公司的前端小改改负责开发小程序，为四十多家客户服务，而且是他们的账号主体。

换句话说，一套代码，要切换多个 appid 去打包上传多个小程序账号发布。

所以每次发布，同事都切来切去，麻烦的一批，疲于奔命。

因此需要做一套自动部署，将开发从这个上面解放出来，让运营/实施去完成这个发布操作，开发只需要专注于代码开发即可。

技术选型

这里分为两个技术选型。

一.小程序的支持方式选型

小程序的官网可以看到，他们支持三种方式

命令行 V2

作为前端开发工程师，希望搭建一些基础设置，cli是必不可少的一项。

至于cli如何制作，文章一大堆，相信网上大家都能搜到。

但是cli工具如何debug，我查了2天，都没查到。

我用的开发工具是vscode。虽然我知道答案一定在
VSCode调试与NodeJS调试入门中，但我天资愚钝，不知道如何融合起来。

不过天不亡我，最终还是找到了解决方式。

不多bb，直接上代码和截图。

方式一

1.新增vscode的launch选项卡

抄就完事了，注意端口号，是根据后续产生的端口号去填写，可以先填一个。

有一说一，在国内上传app到App Store，用transport上传，我打赌你肯定见过这个页面，这个正在验证能卡几个钟头。

“正在验证App-正在通过App Store进行认证…”

终于在stackoverflow这里找到了答案（不是最高票那个）。

真的🐂🍺。

所以你要做的操作就是

1.删除该缓存文件夹（删之前你可以看看是多大，我这是2.5M）

1

/Users/your_user_name/Library/Caches/com.apple.amp.itmstransporter/

背景：

最近在写vue，使用的是nuxt框架做ssr。css属实有点难搞，ui又想让我做动画，说要好看，要酷，要炫。属实有点要命。

没办法，我只能搪塞到：“你看看lottie，这个比较简单，比较方便，我也不用写很多代码，你也能看到你想要的效果”。当时UI就答应了，表示回去研究研究。

其实我也没用过，当时想的是，等你研究完估计就得明年了。谁知道不到两个星期，ae就导出json就给我了，怎么效率这么高。。。

一.引入lottie

看了半天，怎么都说用vue-lottie，这玩意也不是官方的拓展啊，莫名觉得心里不靠谱，不太想用（写rn的时候也是，想用echarts,发现没有，只好自己桥接了一个）。再看看，官方不是有lottie-web么，用就完事了。

1

yarn add lottie-web

引入完毕

二.纯json使用

属实简单，但是这里有些不一样的地方。先上代码,style我直接省略了。

背景：

正常情况下，vue是由父到子的单向数据流。但总会碰到一些操蛋的需求，想直接在子组件去修改对应数据。这时候就会发现，报警告️了。只能写子组件通知父组件修改对应数据，代码就又大又不优雅。

这时候就会想，v-model怎么实现的，自己封装的组件能不能用？还有没有别的方式。

于是乎有了这篇憨批文章。

其实相关文章也有很多了，但总觉得还是要自己总结一下比较好。

先上官网链接

自定义组件使用model

使用 JavaScript 代替模板功能

这里我想举好几个例子，但是又不知道怎么分点，因此我就随意分了

一.默认value和input的例子

cocoapods 1.8以上，采用了CDN，目的是为了不再将索引放在本地，下载又慢，还占据本地内存。

事是个好事，但是国内有墙，cdn又是外国的地址，对国内开发者来说就很烦。

所以我们还得用以前的方式，本地下载索引。

只需要执行

1

pod repo add master https://github.com/CocoaPods/Specs.git

上面那个是官方源，你也可以用国内的清华源

1

pod repo add master https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git

二者任选其一即可。

如何查看成功没

1

pod repo

三方库管理文件：

1
2

导出
pip freeze >requirements.txt

1
2

安装
pip install -r requirements.txt

Flutter的中文文档写的啥啊。。。让人有点摸不着头脑。。。

1.打开命令行工具

1
2
3

//使用bash的改.bash_profile ，使用zsh的用.zshrc
vim .bash_profile 

然后添加

1
2

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

这一步是添加国内镜像

保存以后source一下

1

source .bash_profile 

2.找个地方新建一个文件夹
（我喜欢把所有环境相关的东西放在一个文件夹下，放不放当然随你们）
例如我在自己的用户下面新建一个叫环境的文件夹（中文命名不太专业emmm）

接着我们打开终端，cd到该目录下并cloneFlutter的项目

1

git clone -b beta https://github.com/flutter/flutter.git