抖音云提供的 nodejs 模板是 typescript 的。刚开始没深入写，就调试一下接口，没觉得 ts 和 js 有啥太大区别，没想到定义个变量都成了老大难的事情。

还是老老实实改成 js。但是又遇到 webpack 打包 node 项目的问题，一时半会没太多时间处理。想想看后端打包个啥？就这几个包。

动一下手术：

1、删除 tsconfig.json。抖音云 node 模板自带的 Dockerfile，会判断是否有 tsconfig.json，有的话就会执行 npm run build。

2、修改 package.json

• 删除 ts 相关的包
• 删除 scripts 下的 “build”: “tsc”
• 启动命令 “node dist/server.js” 改成 “node src/server.js”

3、如果要使用 es 规范，可以在 package.json 里添加 “type”: “module”，或者 .js 文件后缀改成 .mjs

4、导入模块时可能要用完整的 js 文件路径，例如：import { test } from ‘./test.js’

5、另外需要注意，抖音云调用的域名有自己专属的域名，而且目前只支持 http 协议，可以看云调用官方文档，例如​ ​developer.toutiao.com ​对应的云调用域名是 ​developer-toutiao-com.openapi.dyc.ivolces.com，我在这上面坑了好长时间，后面补看文档才发现。如果没按这个来，请求外部接口时会报错：

FetchError: request to failed, reason: unable to verify the first certificate at ClientRequest

这两天在折腾抖音小程序的交易系统组件，用的是 Taro，一不小心就掉坑里，只能用原生模块的方式来处理。

如果用原生模块能解决也就好了，但是仍然解决不了，就连抖音官方提供的 taro-demo 也运行不起来。

还是老老实实用原生来写靠谱。

实践证明，Taro 对微信小程序支持很好，但是对抖音小程序支持一般。

项目通常都是部署在根目录，但是如果要部署在非根目录，例如 https://www.aaa.com/xxx/

要改三个地方，把目录名带上。

vite.config.js

export default defineConfig({
base: ‘/xxx/’,
…
})

router 文件

const router = createRouter({
history: createWebHistory(‘/xxx/’),
…
})

nginx 加一段配置（解决页面刷新报错的问题）

注意：root 路径改成自己服务器的真实路径

location ^~ /xxx/ {
root /opt/app/nginx;
index index.html index.htm;
try_files $uri Suri/ /xxx/index.html;
break;
}

由于历史原因，接口有点混乱，有的是开发环境和生产环境共用，有的有区分，被逼出了这么个解决方案，看上去不会出错了。

// 环境判断
const isProdEnv = xxxxxxx

// 域名列表
const server = ‘https://server.xxx.chat/’
const test = ‘https://test.xxx.chat/’
const www = ‘https://www.xxx.chat/’
const wx = ‘https://wx.xxx.chat/’
const api = ‘https://api.xxx.chat/’

export const baseUrls = {
basic: isProdEnv ? server : test,
login: isProdEnv ? www : www,
scene: isProdEnv ? www : wx,
message: isProdEnv ? server : server,
redirect: isProdEnv ? www : test,
pay: isProdEnv ? api : api,
socket: isProdEnv ? www : www,
}

简单整理了一份《前端编码约定》，这是其中一条：

组件思想
参考：https://cn.vuejs.org/guide/essentials/component-basics.html

页面入口文件是一个集合组件的文件，不要直接在入口文件写业务代码。

即：进入一个页面，首先看到的是一棵树，然后才能看清它的树枝 (component) 和树叶 (children)，而不是一开始就掉进树里，看不清方向。

今天折腾这玩意，从复杂到简单，最后发现只要这几行就能解决，效果还十分优雅。

css

.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
}

html

const progressStyle = `background: conic-gradient(#fff ${progress}%, rgba(0, 0, 0, 0.3) 0%)`

<View className=”progress-circle” style={progressStyle} />

${progress} 是变量，0 到 100。

发现这样换行组织语句，可读性还蛮好的，排错也容易。

有老司机带的感觉，真好。

这两天 get 新知识。

以前的后端技能半桶水不到，现在有半桶水了。

借助 mysql2，小程序云函数轻松连接 mysql.

前两天弃坑了，打算还是自己搞 UI，于是就想看看人家的写法，借鉴一下。

看了之后果然收获不小。把 api、utils 都集中放在 index 去 export，开发、维护、调用都好方便。