Archives for : 前端

第2017天:taro 的 h5 页面间转场效果

发现用 taro 做的 h5,从 A 页面 navigateTo B 页面时,会有一个从右往左滑的效果,很像小程序的体验。

有所差别的是,此时 A 页面会变成空白,而从 B 页面返回 A 页面时,A 页面也是从空白变成显示。

虽然如此,体验还是比传统的跳转体验好很多。

昨天深入调研了下,发现它的所有页面是伪页面,都是用 div 构造的,所以实现了抽屉效果。转场时,可能是考虑性能问题,所以把上一页隐藏。如果页面少,可以不用隐藏,体验更舒服。实现也很简单:

.taro_page {
  display: block !important;
}

第2006天:静态网站托管的伪多页面

理论上 taro 的路由是没问题的,但是到了云开发的静态网站托管上,就有了问题。当访问内部路由页面时,会因为缺少物理页面而报 404。之前研究了一段时间没解决,提工单也没用。

今天意外想到一个方案,用参数来区分页面,通过不同参数来判断加载不同页面的内容,实际上物理页面始终只有一个。

这个方案适合页面少的小项目。

第1992天:taro 4 的 .eslintrc.js 问题

这个问题,困扰了我三天,必须给 taro 团队提个 bug report

问题描述
Taro 版本:4.2.0
模板:mobx
问题:生成 eslintrc.js 而非 .eslintrc.js

临时解决方案:手动把 eslintrc.js 更名为 .eslintrc.js 即可。

p.s.

npm 的时候还发现另一个问题,总是要加 sudo,问了 AI,说是“我的 Node.js 环境权限和配置已经完全乱掉了”,需要修复,以下是修复办法:

# 备份并删除被污染的 npm 配置
cp ~/.npmrc ~/.npmrc.backup 2>/dev/null
rm -f ~/.npmrc

# 创建一个干净的配置(只保留淘宝镜像)
echo “registry=https://registry.npmmirror.com” > ~/.npmrc

# 删除有权限问题的 cnpm 缓存
sudo rm -rf ~/.npminstall_tarball
sudo rm -rf ~/.cnpmrc

# 将全局 npm 目录的所有权还给自己
# 1. 修改目录本身的所有者
sudo chown -R $(whoami) $(npm config get prefix)

# 2. 修改目录下关键子文件夹及其内容的所有者
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

# 现在不需要 sudo 了
npm install -g @tarojs/cli@latest

# 验证安装成功
taro –version

第1990天:taro4 编译性能真强

h5 用 taro4 写。之前的老项目小程序一直是 taro2,相比之下,肉眼都能感受到 taro4 强劲的编译速度。

今天跑通了 http 方式调用云函数。

第1750天:wx.chooseMedia 和 wx.previewImage 会触发 onShow

微信小程序的 wx.chooseMedia 和 wx.previewImage,不仅会触发 page 的 onShow,还会触发 app 的 onShow。前者还可以理解,后者挺让人意外。

如果有接口调用或其他逻辑放在 app 和 page 的 onShow,要注意处理,避免不必要的调用和执行。

第1699天:云开发的 or 查询,要每个字段建一个索引

const whereParams = _.or([{
  shopId: 'xxx',
  touserMchShopId: 'xxx',
}, {
  mchShopId: 'xxx',
  touserShopId: 'xxx',
}])
db.collection(‘msg’)
  .where(whereParams)
  .orderBy(‘createTime’, ‘desc’)
  .get()

对于这样的查询条件,要每个字段建一个索引才能命中,包括 createTime 也要单独建一个索引。

但是 createTime 创建不了索引,问了技术支持的同学,说是系统自带了 createTime 的索引。

第1632天:bindgetphonenumber 和 bindtap 事件冲突

小程序的 button,如果同时存在 bindgetphonenumber 和 bindtap,大部分机型两个事件都会执行,极少部分机型只会执行 bindtap,不会执行 bindgetphonenumber,导致用户点击按钮时没有拉起手机号授权。

按这个逻辑,button 上的其他 bind 事件也不能和 bindtap 一起使用,例如 bindgetuserinfo、bindcontact 等,应该也会有部分机型不兼容。

第1597天:Cursor真的无敌

公司给前端同学买了 Cursor,初体验很惊艳。今天更是发生一件让我惊叹的事。

我在商品编辑页,想创建一个函数,名字叫 backToGoodsList。我真的只是这么想的,敲了个回车,这个名字就出来了。那一刻,我觉得自己仿佛是在用意念写代码。

当前文件中并没有 goodsList 这串字符,但是项目中有 goodsList 这个文件。

它应该是把整个项目都当成了上下文。

第1518天:useState 和 useReactive 状态管理区别

今天遇到一个 bug,本来用的是 useState,状态变了之后没有重新渲染组件。后面改成 useReactive 就好了。查一下有意外收获。

20250226-1

20250226-2

抖音云提供的 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