WEB札记 - SegmentFault 思否

参照Metamask，钱包端实现简易的Dapp浏览器

米花儿团儿

6 月 3 日

阅读 5 分钟

1.8k

以react-native@0.71.7环境为例，开发Android应用。MetaMask一键登录示例Demo {代码...} Demo演示流程分析：借助react-native-webview加载Dapp Web;绑定webviewRef实例，便于后续通信；在injectedJavaScriptBeforeContentLoaded内容加载之前注入JS脚本;Dapp实现会判断isMetaMask环境展示标识注入业务相关的符合eip-1102...

WalletConnect钱包落地

米花儿团儿

6 月 3 日

阅读 11 分钟

1.6k

DApp 可以让用户更加自由地管理他们的资产，同时也让开发者更加容易地构建去中心化应用。然而，DApp 在与区块链交互时，往往需要使用钱包进行支付、签名等操作，这就需要 DApp 和钱包之间进行通信。

React Native开发初体验

米花儿团儿

6 月 1 日

阅读 11 分钟

1.3k

环境安装参见官网：[链接][链接]Notes：针对依赖Node核心的包，RN没有进行处理，需要借助rn-nodeify处理，e.g. [链接]针对Java依赖的版本问题，可以借助jetifier自动解决大部分的版本差异针对Java依赖版本问题，可以通过patch-package打补丁打出的补丁会包含很多无用的部分，可以选择性删除打出的补丁可能二次修改，e.g....

Nextjs实战记录

米花儿团儿

4 月 18 日

阅读 7 分钟

703

动态表单初始化必须给{}赋值表单的name与值，否则会报不受控（即使是遍历出来的表单）动态样式方案一：CSS Module + classnames {代码...} Notes: CSS Modules不支持连字符、下划线衔接。 {代码...} 方案二：样式渗透:global {代码...} 组件定义Slot定义SwiperCommon组件的调用，需要用SwiperCommon内部遍历的列表项数据...

EIP1559与传统Gas定价模型转账逻辑

米花儿团儿

1 月 12 日

阅读 10 分钟

748

传统的gas定价模型（Txn Type===0） {代码...} 伦敦硬分叉EIP1559（Txn Type===2） {代码...} 外部签名 {代码...}

Google Development Api功能开发使用示例

米花儿团儿

2022-12-23

阅读 13 分钟

586

Sample1：授权概述主要分为五步：加载api工具库登陆scopes授权加载对应的工具文档工具文档决定了调用gapi.client.*对象下的哪一个服务根据工具文档中的resources字段调用方法加载gapi工具库gapi === google application interface {代码...} 该工具库会全局注册gapi对象。Notes: gapi的文档<<u>[链接]</u&gt...

Electron包管理技术探索

米花儿团儿

2022-10-25

阅读 9 分钟

787

在 electron 中的下载行为，都会触发 session 的 will-download 事件。在该事件里面可以获取到 downloadItem 对象，通过 downloadItem 对象实现一个简单的文件下载管理器

二次开发draw.io

米花儿团儿

2022-05-31

阅读 48 分钟

5.5k

准备工作克隆代码在github#draw.io切换需要的Tag进行下载，当前以v17.4.3为示例。本地运行安装browser-sync或其它本地服务器工具解压drawio-X.zip压缩包，使用IDE打开browser-sync start --server ./src/main/webapp --files .运行本地3000端口启动服务浏览器访问localhost:3000 即可开启调试模式由./src/main/webapp/in...

一行行解读.gitlab-ci.yml

米花儿团儿

2022-03-26

阅读 3 分钟

1.1k

【日常】.gitlab-ci.yml解读 {代码...} *template vs. <<: *template*template：复用的只是任务脚本的其中一个指令<<: *template：复用的是整个任务脚本【篇外】如何配置.gitlab-ci.yml如何定义Job？只要有script的就是Job？定义在顶层（无缩进），且有script关键字约束Job何时执行、如何执行Job可以创建Job...

Gitlab静态页面Pages

米花儿团儿

2022-03-26

阅读 2 分钟

1.5k

动机项目不直观，无法明确感知是哪个项目。yaml配置 {代码...} Pages流程介绍在push源代码到仓库的时候，Gitlab可以根据项目中的 .gitlab-ci.yml 文件来自动构建项目，然后部署到服务器中。核心点打包静态资源配置指定任务pages，将静态资源迁移到public目录下Notes：**stage: deploy**默认是需要审批的，可以通过：stag...

Vitepress编写组件文档

米花儿团儿

2022-03-24

阅读 5 分钟

2.3k

快速开始安装依赖 {代码...} pkg#scripts {代码...} 目录结构 {代码...} 文档首页 {代码...} 运行npm run docs:dev，效果如下：更多配置见：[链接]文档配置新建文件docs/.vitepress/config.js文档头 {代码...} 侧边栏sidebar配置 {代码...} 目录结构 {代码...} 在非根路径（非首页）下的index.md中的内容随意写一些md语...

Vite打包组件库

米花儿团儿

2022-03-23

阅读 2 分钟

4.1k

动机去年使用vue3 + TSX封装组件，结果卡在了打包上，直到最近发现，vite提供了tsx的打包插件。组件准备手把手创建Vue3组件库在packages/index.ts中引入相关的组件、工具库、样式。Vite配置 {代码...} pkg#scripts {代码...} 声明组件模块防止typescript中引入module报错 {代码...}

手把手创建Vue3组件库

米花儿团儿

2022-03-23

阅读 21 分钟

3.3k

动机当市面上主流的组件库不能满足我们业务需求的时候，那么我们就有必要开发一套属于自己团队的组件库。环境开发环境：vue 3.0vue/cli 4.5.13nodeJs 12.16.3npm 6.14.4步骤创建项目使用 vue-cli 创建一个 vue3 项目，假设项目名为 custom-npm-ui {代码...} 手动选择设置。规划目录 {代码...} 将 src 目录改为 examples ...

自定义组件库—Storybook文档支持

米花儿团儿

2021-12-14

阅读 20 分钟

6.6k

简介Storybook是一个UI组件的开发环境。使用初始化StoryBook环境 {代码...} storybook自动检测开发环境，安装依赖。执行以上命令行会进行以下操作：1. 自动生成以下目录结构： {代码...} 2. 更新pkg#run-scripts： {代码...} 核心文件main.js {代码...} 该文件定义StoryBook与编译相关的配置。preview.js {代码...} 该文...

Bit 共享代码

米花儿团儿

2021-11-19

阅读 16 分钟

2.4k

Think in ComponentBit是组件驱动架构，基于组件的现代应用开发。在Bit的世界里，一切皆组件。组件可以组合成其他组件，最终组成一个应用APP，即APP也是组件的一种。这为我们开发提供一个新的思路：我们构建可以整合成不同应用的组件，而不是构建包含组件的应用。Bit帮我们构建模块化、稳固的、可测试、可复用的代码。Bi...

自定义Vue-cli项目模板

米花儿团儿

2021-10-26

阅读 4 分钟

3.6k

模板结构主要包括四个部分：preset.jsonprompts.jsgenerator/index.jstemplate/preset.jsonpreset.json 中是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们，简称预设；prompts.js交互式的告知vue create所需，是根据用户使用需求自定义设置的信息。定义格式参考Inquirer 问题格...

自定义NPM命令行

米花儿团儿

2021-10-15

阅读 6 分钟

2.7k

自定义依赖模块：模块是在 package.json 里通过 main 字段定义这个包对外暴露的入口；模块起源于node，语法默认支持commonjs规范

Lighthouse使用说明

米花儿团儿

2021-07-25

阅读 22 分钟

5.8k

本来想实时做一个示例讲述Lighthouse的用法，然后，本地安装了lighthousev8.1.0，悲剧了，使用的v7.5.0的配置不兼容。

Chrome Devtools: Sources篇

米花儿团儿

2021-06-30

阅读 9 分钟

3.5k

相关篇章Chrome Devtools: Elements篇概述Sources面板用于资源检索、代码逻辑调试。演示前置示例ElementUI官网其他篇章有的是以掘金为示例演示的，而掘金是服务端渲染（SSR），资源压缩，不易演示。环境Chrome浏览器版本 90.0.4430.93操作释义聚焦控制台鼠标在控制台范围内点击一下，使后续操作上下文绑定在控制台中。打...

Git提交信息要满足的格式

米花儿团儿

2021-06-21

阅读 2 分钟

1.9k

如下提交信息出现在Performance Improvements大标题，core次标题下，BREAKING CHANGE下一行跟随着中断性变更的理由： {代码...}

自定义NPM包

米花儿团儿

2021-06-05

阅读 6 分钟

4.3k

自定义依赖模块：模块是在 package.json 里通过 main 字段定义这个包对外暴露的入口；模块起源于node，语法默认支持commonjs规范

Chrome Devtools: Elements篇

米花儿团儿

2021-05-08

阅读 4 分钟

2.9k

概述Elements面板用于调试页面布局，即DOM、CSS的准确性。最佳实践：所见即所得。演示前置环境Chrome浏览器版本 90.0.4430.93操作释义聚焦控制台鼠标在控制台范围内点击一下，使后续操作上下文绑定在控制台中。打开控制台以掘金为示例讲述：通过链接打开页面，通过F12或鼠标右键【检查】打开开发者工具控制台。默认布局...

NPM工程化 & inquirer源码解析

米花儿团儿

2021-04-19

阅读 10 分钟

2.5k

在NPM友好型环境(npm init -y)下，可以将node index.js定义在npm_package_scripts_*中作为别名直接执行。

Vue-cli & lerna多项目管理

米花儿团儿

2021-03-30

阅读 8 分钟

6.6k

在Vue-cli 3.X环境下，基于同一类型的活动，可以多个页面复用，大部分组件可以公用的背景Multiple处理方式每一个活动创建一个分支，在不同的分支上各自维护如果需要维护复用代码时，任选某一分支进行修改，通过git cherry-pick <commit id>进行平行迁移。Monorepo处理方式仅在同一分支下进行多项目的维护，各个功...

创建可编辑区域

米花儿团儿

2021-03-22

阅读 11 分钟

2.4k

键盘输入分类直接输入输入的键直接落入可输入DOM元素，为直接输入。E.g.英文输入。间接输入输入的键值不会直接落入可输入DOM元素，有一个中间态，为间接输入。E.g.中文输入。区分中英文输入因为任何输入都会触发input，而输入中文的时候才触发compositionstart和compositionend，可以以此来区分中英文输入。e.keyCode在...

手机hybrid应用H5开发

米花儿团儿

2021-02-21

阅读 3 分钟

1.6k

在*.html的<head>标签中引入<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

使用Flexible & swiper进行移动Web开发

米花儿团儿

2021-02-20

阅读 6 分钟

1.5k

移动端适配方案flexible.js出发点事故的开始总是有原因的，那思考一下，为什么使用Flexible?[ ] 为了rem布局？ >> 为什么要rem布局 ——> 高度还原[ ] 移动端适配? >> 为什么移动端适配要用Flexible ——> 同等占比[ ] 什么是移动端适配？最初点是设计图的高度还原！！！以750*1334设计稿(iPhone6)为准，...

基于Vue-cli初始化项目的多项目管理

米花儿团儿

2021-02-13

阅读 5 分钟

2.5k

在Vue-cli 3.X环境下，基于同一类型的活动，可以多个页面复用，大部分组件可以公用的背景Multiple处理方式每一个活动创建一个分支，在不同的分支上各自维护如果需要维护复用代码时，任选某一分支进行修改，通过git cherry-pick <commit id>进行平行迁移。Monorepo处理方式仅在同一分支下进行多项目的维护，各个功...

基于快应用开发问题的自动化命令行

米花儿团儿

2021-02-08

阅读 7 分钟

1.5k

Git校验你记得这次打包是不是当前调试的代码么？ {代码...} 每次打包没有日志，强制开发者必须上传或缓存后才能打包，利用Git为打包做日志服务。 {代码...} 使用场景 {代码...} 自动版本号【简约版】 {代码...} JSON.stringify的使用JSON.stringify()接受三个参数data：JSON数据function：序列化函数——执行序列化时，被...

lerna + workspaces使用手册

米花儿团儿

2021-01-26

阅读 2 分钟

4.3k

默认的模式版本号使用lerna.json文件中的version属性。执行lerna publish时，如果代码有更新，会自动更新此版本号的值。即：所有的包公用一个版本号使用方式：lerna init

1

1