sun_weitao的博客

原创 Fastapi使用grpc最小化可运行实例

user.proto一切从接口定义开始。proto 文件是单一事实来源，双端代码都由它生成。= 命名空间 + 接口版本号，将来不兼容改动新开user.v2并行。字段号1/2/3发布即焊死，删除字段要写reserved。分开定义，保证单向演进。不要在 message 里写codemessage错误字段，错误一律走 gRPC 状态码。详细设计理由见。体积：同样的字段，二进制比 JSON 小得多（字段名不上网，只传字段号 + 值）。速度。

原创 Taro 框架 React Native 项目开发全流程记录

本文记录用一个 Taro 4.3 + React Native 版「计算器」项目走通 Taro RN 工程的完整流程。项目业务代码很简单，主要目标是熟悉 Taro 框架 Android 项目的从脚手架到出包的全过程。

原创 极简版 MCP 工具实现方案

用一个最小示例演示如何实现并注册一个 MCP 工具（greet），供 Claude Code 调用。

原创 Chrome 扩展插件开发指南

这是最简的目录结构。

原创 微前端框架之qiankun 怎么用？vue3+vite+qiankun 和 react + qiankun

http://localhost:3001/static/js/main.xxx.jpg 这个会拿不到。，核心思想是——把后端微服务的理念搬到前端：将一个庞大的"巨石单体应用"拆成多个。让qiankun框架可以进行跨域拉取app1这个应用的资源，不配置浏览器会拦截掉。这三个是qiankun的生命周期，后续需要和主应用通信什么的的可以用到。写这一段让主应用可以访问到子应用的资源文件比如图片，视频什么的。的小型前端应用（子应用/微应用），再由一个。好了 一个主应用+两个子应用 创建完成。

原创 javascript 数据字典的实现（简单版）

场景键（Key）示例值（Value）示例核心优势​​数据缓存​​商品ID12345商品信息对象{name: "手机", price: 2999}​​快速访问​​，避免重复计算​​频率统计​​单词"hello"出现次数5​​高效计数和聚合​​​​映射关系​​错误代码404错误信息​​清晰的键值映射​​​​字典/索引​​联系人姓名"Alice"电话号码​​快速查找（如电话簿）​​​​对象关联​​DOM元素状态对象​​无侵入式地管理元数据​​​​构建复杂结构​​图顶点A相邻顶点。

原创 css boder-image 属性使用

如果项目样式存在不规则边框，可以使用border-imge 这个属性。需要要先设置 border-width。上边距50，其他19。浏览器可能存在兼容性。

原创 企业微信内部应用js-sdk使用流程

返回jsapi_ticket 大概只有20分钟的有效期，然后后台需要把返回的access_token和ticket存下。使用接口https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket。ww.register 这个接口重要，不调用，无法使用js-sdk里面的api。这里不要使用localhost 测试，用配置好的可信域名测试。第三步、后台需要配置获取JSAPI_TICKET 的接口。如果不存，调用接口有频率限制。这里用的vue测试，先用vue新建一个项目。

原创 括号匹配Python版栈的应用

balaned 是一个重要的标识变量，说明这个字符串是否是对称的，只要是False即不是对称的。如果是空就表明，传入的是），但是栈中没有（ 与他匹配就说明是不对称的。有一个字符串 ()(())) 我如何知道这个（）是对称的。如果不是空，（就出栈， 表明我们已经匹配到了一组（）了。否则就说明传入的是） 然后判断，栈是否为空？()(())) 这个很明显是对称的。不过呢这个算法只能匹配（）这一类型的。首先对()(()))) 进行循环。()(()))) 这就是不对称的。非常容易判断，用栈是如何解决的。

原创 Echarts自定义横向柱状图中单条bar的样式

需要解决的样式难点，柱条渐变色，末端白色矩形，以及每条柱的百分比。options是图例的配置项。

原创 微信小程序IOS端video组件fullscreen的显示错位

总结就是：如果视频需要全屏，就要去除clip-path的样式，否则全屏就会出现错位，在IOS端。ios端video组件在操作全屏按钮的时候出现显示错位的问题，android正常。还有一种情况会引起全屏显示错位，在给video组件使用了样式clip-path。上面是微信社区的解决方案，去除postion:relative可以解决。一般是又样式导致或者是兼容性问题。

原创 css 背景使用不规则图形

【代码】css 背景使用不规则图形。

原创 JS 元素拖动，工具代码

【代码】 JS 元素拖动，工具代码。

原创 Vue3在使用渲染函数h时候使用v-loading

resolveDirective, withDirectives 这两个指令需要搭配使用。当然也可以在render()中改写成上面directives的形式的写法。v-loading 指令在h函数中无法像这样直接使用。也可以使用defineComponent比如这样。

原创 Android项目中使用ComposeUI

注意kotlinCompilerExtensionVersion 不同的kotlin 版本 kotlinCompilerExtensionVersion 对应的版本号不一致，如果是1.8以上的kotlin 版本 对应的版本号 应该是1.4.3 具体网上查询下。注意，这里本机环境是低版本的kotlinCompilerExtensionVersion 和 sdk 是低版本 用低版本的库，androidx.compose.ui:ui:1.0.0 如果使用1.4以上 依赖不合 会导致编译不过。

原创 flutter-webrtc安装示例

1、pubspec.yaml 添加以下flutter_webrtc库。flutter pub get 安装库。

原创 ReactNative打包发布Apk流程

2、打开android的build.gradle文件，位置在android/app/build.gradle。位置应该是在android\app\build\outputs\apk\release下面。react-native项目打出来的apk可能都会比较大。这里my-key-alias 是签名的别名的等下有用。命令执行完后就会生成一个release.apk。然后只要按照命令给的提示一步一步往下就好了。1、需要生成签名，下面是一个生成签名的示例。3、然后使用gadlew 命令生成apk。

原创 Django自带admin管理系统使用

4、后台管理系统注册模型，做一些基础数据的增删改查。打开你的应用里面 admin.py 这个文件，然后注册模型。1、admin路径地址 localhost:8000/admin。之后按照提示一步一步往下走就好了。2、使用命令行创建超级管理员。admin是超级管理员的账号。把你需要的模型注册上去。

原创 Django创建数据表、模型、ORM操作

4、配置链接MySql数据库，打开settings.py文件，建立数据库地址，找到DATABASES配置，这里默认是使用sqlite3配置的现在改成mysql。2、创建项目应用，进入PersonInfosProject文件夹，新建index应用，使用命令。使用命令行将模型转化为数据库表，需要事先在mysql数据库中先建立persons数据库。3、新建数据模型，打开index文件夹下的models.py。将index应用加到项目中。出现下面提示说明表建立完成。新建完成之后的目录结构。

原创 Flutter使用BorderRadiusTween实现由矩形变成圆形的动画

在Tween的begin和end中，参数需要指定BorderRadius.circular 用于指定矩形圆角的过渡。在下方build方法中的BoxDecoration类是用于修饰Container类，用于指定边框，圆角，阴影等等。与其他构造动画时候的套路是一致的，首先需要AnimateController和Animation这两个类。BorderRadiusTween 是插值动画中，用于组件边框半径的类，专门作用于组件边框和半径动化过度。这个类继承自Tween，用法相似。

原创 Flutter路由动画Hero函数的使用

写Hero切换效果存在一定的套路，比如说开始页面HeroPage指定为StatefulWeight, 页面中存在state的变动，然而目标路由没有关系StatelessWidget也可以。tag：标识两个路由切换的共享参数，因为是HeroPage到Hero2Page切换，这里指定tag是tag1。chlid: 指定路由切换时，需要产生动画效果的子控件，这里用的时Image，动态变化的属性是宽高。以下示例：展示的是HeroPage切换到Hero2Page过程中 图片平滑放大的过程。

原创 Flutter使用GestureDetector工具实现手势缩放效果

GestureDetector是Flutter内部处理用户手势操作的一个小工具。3、pointerCount当前触控点数量（小于一个点说明没有用手势缩放）onScaleStart：当用户触碰屏幕并开始缩放的时候。onScaleUpdate：当用户正在执行缩放时候。2、focalPoint缩放手势中心点坐标。如果想要实现缩放效果需要利用到其中两个方法。1、scale表示上一帧的缩放比例。这里主要用到scale这个参数。

原创 如何使用rxjs实现元素拖动效果

【代码】如何使用rxjs实现元素拖动效果。

原创 Dart课后习题

Dart语言的核心是其强大的类型系统和现代化的语法，旨在支持构建高性能的跨平台应用程序。Dart是一种面向对象的编程语言，强调类和对象的使用，同时也支持函数式编程的特性。是一个非常强大和灵活的集合类型，用于存储一系列有序的数据。虽然它并不被称为"数组"，但在许多情况下，它的功能和用法与数组非常相似。const:编译时常量，值在编译时就已经确定，并且在内存中只有一个实例。final:运行时常量，值可以在运行时确定，只能被赋值一次。，您可以方便地进行数据的存储、访问和操作。const final 常量。

原创 Flutter项目初始化android版

3、启动flutter应用 选择 Run->Run widthout Debugging（前提需在android studio中提前开启 模拟器）然后 ctrl+shift+p 输入flutter 选择Flutter: New Project。2、VSCODE 配置flutter。安装flutter插件。接下去一步步新建即可。

原创 初始化webpack应用示例

4、安装webpack-dev-server依赖。7、配置webpack.config.js。6、配置package.json启动脚本。5、添加index.html。2、安装webpack依赖。3、添加文件夹，入口文件。

原创 若依框架整合UEditor

下载包解压，将解压文件置于public文件中 起一个名字比如UEditor。找到UE.ajax = function() 函数修改以下行的代码。然后修改代码添加vue-ueditor-wrap全局文件。接下来若依前端安装vue-ueditor-wrap库。修改ueditor.all.min.js。1、vue2版本若依框架 前后端分离版本。前端UEditor 上传添加token。安装完成后修改main.js。为简单上传请求添加token。找到以下代码添加token。前端项目添加UEditor。

原创 中序表达式转后序表达式

后序表达式，也被称为后缀表达式或逆波兰表示法（Reverse Polish notation，RPN），是一种算术表达式的书写方式，其中操作符位于其操作数之后。中序表达式就是我们日常使用的算术表达式，也称为中缀表达式。它的主要特点是操作符位于两个操作数之间，并且通常需要括号来改变运算的优先级。将 中序表达式 (1+4)×3+10/5 转后序表达式 1 4 + 3 * 10 5 / +先定义好一个栈后续需要用到这个数据结构。

原创 括号匹配算法

实现这个算法需要使用栈这种数据结构，当然其实数组也是可以的。不过一般来说，这是最能体现栈这种数据结构特点的应用场景。括号匹配算法用于检查一个字符串中的括号是否正确匹配，确保每个开括号都有相应的闭括号，并且它们的顺序是正确的。是栈这种数据结构的应用场景之一。上面这些都是正确的括号匹配。

原创 error @achrinza/node-ipc@9.2.2: The engine “node“ is incompatible with this module. E

【代码】error @achrinza/node-ipc@9.2.2: The engine “node“ is incompatible with this module. E。

原创 钉钉扫码登录（DTFrameLogin） 用户注销后重新登录出现回调叠加的问题

在源码中注册了 window.addEventListener("message",fn)事件但是没有 在适当的时候注销掉该事件可能会出现回调函数多次执行的问题。一般的话可以使用具名函数，或者在页面卸载的时候取消监听器。下面是钉钉扫码多次回调的解决方案。dd-login.js源码。

原创 华为手机浏览器display:flex不生效

flex: 1;width: 0%;

原创 flask with database

1、安装flask_sqlalchemy。

原创 flask项目初始化

新建文件app.py和.flaskenv。4、打开项目myproject。

原创 extends in javascript

【代码】extends in javascript。

原创 react项目中使用html5-qrcode

注意：调试时候浏览器必须是在localhost或者是https协议下。如果使用默认扫码引入Html5QrcodeScanner。2、引入html5-qrcode库。1、安装html5-qrcode。

原创 webpack+lite-server 构建项目示例

bs-config.json 设置访问文件夹。dist/index.html 加入以下内容。webpack.config.js 配置。package.json 填入下列内容。

原创 如何将本地的hexo博客部署到云服务器

将复制的内容拷贝到 authorized_keys ，然后修改文件权限。一路enter下去，然后找到 .ssh/id_rsa.pub文件。/home/blog/HexoBlog 静态网站存放的路径。如果提示出现permission denid 权限的问题。打开_config.yml. 找到deploy这一行。看看能不能连上，没问题执行继续执行下一步。拷贝下里面的内容，回到云服务器控制台。建个Hexo博客静态网页存放的路径。注意node版本需要16以上。然后建一个git裸仓库。配置的ssh访问用户。

原创 初始化React Native项目

openssl 3.0版本与node 版本不一致冲突。gradle版本使用6.1.1-all.zip。react-native 初始化项目版本为。gradle JDK版本为 jdk 11。react-native使用0.63.4。高于16版本会出现错误。

原创 vue3中使用keepAlive缓存路由组件不生效的问题解决