微信H5开发环境配置指南(全)

https://images.unsplash.com/photo-1594909122845-11baa439b7bf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

微信H5想要真机开发没有小程序那么方便,都需要授权安全域。为此把内网地址映射到公网上十分必要。经过我两天的尝试,试了一些穿透工具,只有自建+frp是最满意的结果,其他方式都基本不可用或者需要花钱才能达到可用。我总结如下。

花生壳

这个不多说免费没有80端口,也不固定域名。付费门槛又很高1000+年付。放弃。

ngrok

官网 https://ngrok.com/download 。ngrok MACOS 下使用手册是这样。

继续阅读微信H5开发环境配置指南(全)

Antd Upload 上传实战

https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

(嫌弃)Form 方式自己组装发送

// 因为涉及到文件上传是单独分开的接口,使用form表单实现
// todo 服务器要拉取当前信息对应的所有附件信息
// 上传 formData <https://blog.csdn.net/TetaiSon/article/details/112677857>
// 自己构建 form data 设定 request 方法 post form
// 关键是知道 upload 的 file 就是一个 Blob list
let formData = new FormData();

Object.keys(newRecord).forEach((key) => {
  if (key !== 'upload') {
    formData.append(key, newRecord[key]);
  } else {
    // file 单独处理
    newRecord.upload?.forEach((file) => {
      formData.append('uploadFiles', file.originFileObj as any);
    });
  }
});

file.originFileObj 是 ANTD 封装的关键,另外,通过append 构造 form 数组。此外你要实现上传的逻辑。相比来说还是下面这种方法简洁。

继续阅读Antd Upload 上传实战

Docker Compose 部署多个单页应用

Photo by Mak on Unsplash

场景

近阶段,我需要把我多个SPA部署到一台虚拟机上。多个应用通过二级域名进行访问。我知道通过 Nginx 设定多个虚拟主机可以做到这一点。但是如何和 Docker Compose 结合是个问题。目前的我是只有 SPA 应用,因此只在那个文件夹里作了一个 Nginx。假如要多个 SPA 如何编写 Docker Compose 文件呢。我想了下面两种方案。

方案

一是多个SPA放在一个容器。这意味着要共享一个 Dockerfile,感觉不利于维护。弃用;二是每个SPA放在不同容器。通过一个中转 Nginx 转发到不同容器各自的 Nginx。需要注意的是,需要在每个SPA 的 Dockerfile 中禁止默认的 Nginx Server 配置,关闭 80 端口,否则会报端口占用错误。

继续阅读Docker Compose 部署多个单页应用

解决移动端字体适配两个问题

https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

IOS PT 和 PX 的关系

淘宝美工交付我的设计稿是375(PT)宽度,然后我就去琢磨了一下这个单位。一开始,我通过百度呢,说 PT 是一个绝对单位,一个PT = 1/72英寸,IPHONE6上一个PX等于1/326英寸(可以通过屏幕英寸和像素的 PPI 比如说 326 值得到),然后一个 PT 等于 326/72 = 4个PX。然后我按照这个计算结果来写代码,发现尺寸是设计稿的4倍多(326/72),而实际上设计稿的PT和PX是1比1的关系。

带着这个疑惑,我查到了这个说法,在不同的屏幕上(普通屏幕 vs retina屏幕),CSS像素所呈现的大小(物理尺寸)是一致的,不同的是1个CSS像素所对应的物理像素个数是不一致的。(这篇文章里)。这和我的实验是一致的。

所以IOS的PT其实是他的逻辑像素,任何CSS像素值在IOS上都会被转换成逻辑像素。关键的是这个转换不是用户去做的,而是IOS自动做的转换。你只要写1PX,系统自己转换成逻辑上的1个PT(物理上是多个像素组成)。

继续阅读解决移动端字体适配两个问题

独立开发者也需要原型工具

我一开始认为独立开发者是不需要原型工具的。原因有两个,一是原型工具上手需要成本。而独立开发者前端技术比较熟悉,比较容易构建一个原型出来。在这一点上,手绘草图的意义也大于原型工具。二是独立开发不需要沟通,原型做出来也没有意义。

但是在上手原型工具墨刀之后,我发现工具本身也在改变我的认知方式。首先,墨刀上手并不需要多少成本,反倒可以专注产品功能本身,而写代码无论怎样都可能陷入细节。其次分享功能的便利性让我学着去分享自己的创意,然后可以与用户进行沟通,可以在项目前期确定好功能点。

另外通过设计和编码进行分离,在设计和编码阶段都能更好的投入。若混合在一起,往往会因为不知道自己要什么而带来更大的成本。

Gin 路由默认重定向问题

有个问题很诡异,IOS Chrome 版本登陆会显示 401 未授权问题。经过定位,发现表面上是前端路由和后端路由不匹配才会出现。比如前端写着请求地址是 /api/users,后端路由是 /api/users/。但是在 PC 上却没有复现这个问题。PC 上 Chrome 根据 Gin 的 301 重定向到新的地址。IOS 没有办法看到,但是从后端日志看出应该是重定向再次访问的时候,手机浏览器没有带上 token 导致的,好像只是请求体的重定向。具体原因尚不清楚。

Gorm 关联语法解惑

Photo by Lerone Pieters on Unsplash

Gorm 关联语法与我的常识有冲突,导致尝试他的关联语法花了一些时间。最终结果如下

type CrawlResult struct {
	Crawler     Crawler   `gorm:"foreignKey:CrawlerId;references:CrawlerId"`
	CrawlerId   string    `json:"crawlerId" gorm:"column:crawler_id"`
}
type Crawler struct {
	CrawlerId string `gorm:"primaryKey;column:crawler_id"`
}

可以看到,在外键存在的表需要自己设定一个外键,这里是 CrawlerId,同时需要将对应结构体 Crawler 作为属性聚合在其中。这里 foreignKey 是指 CrawlResult 本体结构的属性 CrawlerId,references 指的是 Crawler 的外键。然后你在关联的时候可以直接这样做

db.Preload("Crawler").Find(&results)

这里 Preload 指的是外部结构名称。

总结

内部实体的外键要自己建立,然后用foreignKey关联才行。

umi + antd-pro 精简化流程

深度使用 antd pro 和 umi 的组合之后,我想自己对这个框架进行控制,脚手架搭建出来的那些乱七八糟的就不要了。在精简过程中,有一些小技巧,故记录在此。

安装 umi

npx @umijs/create-umi-app

安装插件

想在菜单中用字符串指定 icon 需要安装 umi-plugin-antd-icon-config 这个插件进行转换。

修改配置

config/config.ts

import routes from './routes';

import { defineConfig } from 'umi';
export default defineConfig({
  // https://github.com/umijs/umi-plugin-antd-icon-config
  plugins: ['umi-plugin-antd-icon-config'],
  nodeModulesTransform: {
    type: 'none',
  },
  routes,

  fastRefresh: {},
  dva: {
    hmr: true,
    immer: true,
  },
});
继续阅读umi + antd-pro 精简化流程

浅谈技术八股对开发者的危害

Photo by Evgeny Ozerov on Unsplash

虽然不在 IT 行业,但是大大小小加了不少微信群,关注了不少技术公众号,目前普遍的趋势是,技术面越来越卷。面试 Java 的,面试官恨不得 JVM 是你写的,面试前端的,恨不得框架是你写的、标准是你定的。这种风气不断蔓延开来,小厂也纷纷效仿,更有趣的是不少开发者也竟将技术八股奉若圭臬,开源了不少面经之类仓库。暂且不说,对于管理者来讲这种做法能不能招到真的有能力的开发者。对于开发者来说,我认为,技术八股对不仅对思维提升没啥好处,还会带来不少危害——自我否定和限制发展。

自我否定

先来看看考察的内容吧。面试大多是解释器原理、框架原理等,但是有多少人真的做到这个层次的开发,大多数都是针对业务来做的应用层开发。熟读八股花了大把精力,能上岸还好,否则只是白白损失了精力,丧失自信力罢了。

继续阅读浅谈技术八股对开发者的危害