ahao430 的博客

https://ahao430.github.io/dev/

**背景：**之前做小程序浮标时尝试做过拖拽效果，但是跟自带原生客服、调试等组件的体验相差甚远。发现sjs文档中有事件响应，尝试用sjs事件开发拖拽组件，真机效果完美（模拟器还是有穿透效果）。 js开发拖拽组件 之前用js开发拖拽组件，实际上是在组件的data中设置位置数据，监听onTouchStart、onTouchMove、onTouchEnd事件，实时修改data中的数据，触发axml中的相关渲染。 在js的touch事件中，我们可以获得事件对应的touches坐标，以及元素本身。在touchstart获得初始touch点坐标并记录，在touchmove中获得当前touch点的坐标，计算与初始位置的偏差，就得到了移动的距离。通过这个距离，我们可以更新组件的定位信息，或者给组件设置transform。 但是要注意，下一次拖拽的时候，组件的初始定位或者transform已经发生了变化。因此，需要记录上一次的改动，或者初始时重新获取。 js实现拖拽主要存在几个问题： - 滑动会穿透到页面，拖拽浮标的时候，页面也会跟着动。给容器加catchtoumove还是...

当前的小程序脚手架中，写了不同环境的配置文件，再通过环境变量读取指定的配置文件输出到dist。 12345678910// gulpfile.jsconst ENV = process.env.NODE_ENVgulp.task('env', done => { return gulp.src(`./config/config.${[ENV]}.js`) .pipe(rename(function (path) { path.extname = '.json' })) .pipe(gulp.dest(OUTPUT_PATH))}) 这样，创建多个不同环境的配置文件，就可以在编译时实现不同环境配置的注入了。 但是，这样用起来比较麻烦，实际上我们不同环境的配置文件，可能大部分是相同的，只有小部分不同。我们希望可以有一个公用的配置文件，再合并不同环境的配置。 12345678// config/index.js...

创建仓库 创建仓库 创建了四个仓库，分别命名活动总仓库，vue分仓库，react分仓库，gulp分仓库。 执行git submodule进行组织 拉取总仓库代码，在终端中执行git submodule命令，添加分仓库git submodule add xxx 。 这样就将分仓库关联进来了。主仓库提交代码不会影响分仓库。 第一次拉取总仓库时，带上递归参数可以同步拉取分仓库。 1git clone xxx --recurse-submodules 也可以先拉取总仓库，然后执行命令获取分仓库： 12git submodule init git submodule update 使用monorepo+yarn组织子项目，共享依赖monorepo的理念是将多个项目放在一个git仓库中进行管理。 这样复制代码，共享组件等操作都更加方便；并且代码都在一起更易维护。进一步地，通过共享node_modules，可以做到安装一次依赖，后续再创建子项目可以立刻使用，节约时间和磁盘空间。 我们通过lerna + yarn来管理。 lerna是一个Lerna 是一个管理工具，用于管理包含多个软件...

1. 安装直接运行brew install mysql报错。去mysql.com下载社区版安装 2. 环境变量12cd ~vi ~/.bash_profile 添加两行path： 12export PATH=$PATH:/usr/locol/mysql/bin export PATH=$PATH:/usr/local/mysql/support-files 保存。 再执行source ~/.bash_profile 3. 处理node报错在node中登录mysql报错，网上查询是因为mysql 8.0以后的版本采用了新的加密方式，而node还没有跟进。 解决方式是在终端中登录mysql： 1mysql -u root -p 再输入以下命令，其中密码改成自己的： 12ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '密码';flush privileges; 执行exit。重新登陆，发现新的密码生效了。 再去...

现有业务中，存在大量复杂的判断，如弹窗逻辑，内部有一系列复杂的if判断，不同弹窗之间存在优先级，当上级弹窗符合条件时代码判断终止，否则继续向下级判断。 12345678910111213function modal (option) { // 追偿 if (isRecovery === '0' || isRecovery === '2') { ... return } // 未授权 if (...) { ... return } ...} 这里的函数过大，且不同逻辑都在一起，一方面看着不是很清晰直观，一方面不利于将来的维护，比如调整弹窗优先级等等。可以引入责任链模式进行优化。 责任链模式责任链模式：使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。 先给Function原型绑定一个after函数，用于在两个函数之间生成责任链。并定义一个标识’nextS...

在小程序中尝试引入jest进行简单的单元测试。 安装1yarn add -D jest 配置在package.json添加test命令，执行jest； 在项目根目录新建test目录，用于存放test文件； 在根目录增加jest.config.js文件，设置jest配置。配置文档 配置问题新建一个测试文件。直接运行yarn test可以运行。但是使用es modules的import和export方法会报错。上网查阅解决办法，说是要用babel，但是尝试了几种方案都报错，要注意babel的版本。按照官网建议jest配置文件设置用babel-jest进行transform，babel配置如下解决： 1234// babel.config.jsmodule.exports = { presets: [['@babel/preset-env', { targets: { node: 'current' } }]],} 另外一个问题是引用模块的路径问题。我们项目的根路径是&#x...

从零开始介绍下gulp的使用，及小程序的工程化搭建。 gulp介绍gulp是一款基于流的思想，执行一系列预设任务的工具。将工作拆解为一个个的任务，并通过流的传递来链式调用执行。 gulp vs webpack我们现在常用的webpack是一款打包工具，二者在思想上不同，但是又能实现很多相同的功能。webpack更适合SPA那种单一入口的项目，而gulp更适合多页面的处理。 安装及使用gulp一般全局安装即可。当然具体项目还需要安装对应的gulp插件。 1npm install -g gulp 在项目根目录新建一个gulpfile.js文件，进行相关任务的编写。其中gulp.task(‘default’)是默认任务，可以直接用 “gulp“命令执行，其他任务需要用”gulp 任务名“来执行。 12345678// gulpfile.jsconst gulp = require('gulp')// 默认任务gulp.task('default', done => { console.log('gulp执行了...

当前小程序项目全局状态及逻辑判断太复杂，尝试引入状态管理优化逻辑，同时将重复的逻辑判断放到getters中。这里我们使用mobx4，因为mobx使用了小程序不兼容的proxy。 mobx4介绍主要是这几个api： observable get autorun action 我们引入observable创建一个store，创建一些观察对象 12345678910111213141516171819202122import {observable, autorun} from 'mobx'const store = observable({ // 响应状态 value: 1, list: [], // computed get count () { return this.list.count } // actions setValue (val) { this.value = val } addItem (item) { this.list.push...

近期做了一个h5页面拼装demo项目，里面包含了前台、后台、简易服务端三个子项目。其中后台用iframe嵌套了前台h5页面做预览用，前后台又依赖服务端，每次启动都要依次运行三个服务。那么能否一次开启这三个服务呢？ 需求分析 需要在根目录中执行子目录的npm命令开启服务 我们希望开启三个cmd窗口来监听，而非在一个窗口内，不然开发时调试信息就无法查看。 npm脚本是支持使用&&串联多个命令的。但是我们的目的是并行，而非依次执行。 开发时启动监听服务，服务不会结束，不会走到下一个服务。 前两点可以通过使用shell脚本来解决。 shell脚本npm脚本中可以直接运行shell脚本。在项目根目录新建三个shell脚本，分别对应三个子项目。内容如下： 123# startPC.shcd ./pcnpm run serve 123# startH5.shcd ./h5npm run serve 12345# startServer.shcd ./servernpm run startwait# 这里加个wait，防止窗口一闪就关闭了 再在package.json编辑...