创建UTXO
BTC创建UTXO并用Joy ID广播安装依赖1pnpm install bitcoinjs-lib tiny-secp256k1 axios @joyid/bitcoin 获取剩余UTXO123456789const getUtxos = async (address: string) => { try { const response = await axios.get(`https://blockstream.info/testnet/api/address/${address}/utxo`); return response.data; } catch (error) { console.error('Error fetching UTXO:', error); throw error; }}; 创建交易1234567891011121314151617181920212223242526272...
flex弹性盒子布局最后一行不满时左对齐实现思路
只需要在弹性盒子的容器加一个伪类元素，大小就是盒子内容的宽高就可以实现。 1234567<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul> 12345678910111213141516171819202122*{ padding: 0px; list-style: none;}ul{ width: 1000px; height: 800px; border: 1px solid #000; display: flex; flex-flow: row wrap; justify-content: space-between;}li{ width: 300px; height: 300px; border: 1px solid #456;}...
解决切换路由因高度不够出现滚动条导致页面抖动
现在大多数页面都是采用主题内容水平居中布局，但是，这种布局存在一个问题。现在的浏览器滚动条默认是overflow:auto类型的，也就是说如果内容高度不足一屏，没有滚动条；如果超出才会出现滚动条。滚动条也是占据屏幕尺寸的，从没有滚动条到有滚动条会使页面左右抖动一下。现有三种解决方法： 让垂直滚动条一直显示123body { overflow-y: scroll;} 即使内容高度不足一屏也会显示滚动条，比较影响用户体验 当内容高度超过一屏时，在浏览器左侧同时加上一个滚动条宽的的padding或margin123.wrap-outer { margin-left: calc(100vw - 100%);} margin换成padding一样可以生效 推荐使用兼容写法12345678html { overflow-x: hidden; overflow-y: auto;}body { width: 100vw; overflow: hidden;}
web3.js监听用户切换钱包状态
Web3js获取MetaMask钱包并监听切换官方API方法监听账号切换 123456789101112131415161718192021222324252627282930313233343536373839404142434445import { UserStore } from 'store/modules/user'export function useWeb3() { async function getAccount(): Promise<any> { return new Promise((async (resolve, reject) => { await isMetamask() .then((res: string) => { console.log(res) window.ethereum ...
Web3.js安装使用方法
web3.js 库是一系列模块的集合，服务于以太坊生态系统的各个功能，如：web3-eth 用来与以太坊区块链及合约的交互web3-shh Whisper 协议相关，进行p2p通信和广播web3-bzz swarm 协议（去中心化文件存储）相关web3-utils 包含一些对 DApp 开发者有用的方法 引入web3.js1pnpm add web3 项目构建web3文件在utils目录下新建useWeb3.ts 1234567891011121314151617181920212223242526272829303132333435import { UserStore } from 'store/modules/user'export function useWeb3() { // 获取钱包地址 async function getAccount(): Promise<any> { return new Promise((async (resolve, reject) =>...
router
vite现在创建的vue项目已经默认为vue3了，但是在引入vue-router时，可能会有vue-router报错问题，一直提示createRouter为undefined或者其他的关于vue-router报错的问题，主要原始是vue-router版本问题，直接升级到最新版本即可： 1pnpm add vue-router@next 项目配置创建router目录新建index.ts 123456789101112131415161718192021222324import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: () => import('../views/page1...
pinia
Pinia与Vuex的不同Pinia是Vue.js团队开发的一个全新的状态管理库，并且Pinia符合Vuex5的提案，已被纳入官方GitHub。Vuex： State、Gettes、Mutations(同步)、Actions(异步)Pinia： State、Gettes、Actions(同步异步都支持) Pinia的核心特性Pinia没有Mutations、Actions支持同步和异步、没有模块的嵌套结构（每个store互相独立）、更好的TypeScript支持、Vue2和Vue3都支持。 安装1pnpm add pinia Pinia初始化设置main.ts文件 12import { createPinia } from 'pinia'createApp(App).use(createPinia()).mount('#app') 在store目录下面新建一个user.ts 123456789101112131415161718import { defineStore } from 'p...
Vite+Vue3+TypeScript轻量级框架搭建(2)
unplugin-vue-components - 自动导入、按需导入组件安装 1pnpm install unplugin-vue-components -D 配置 12345678910111213141516171819202122232425// vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueSetupExtend from 'vite-plugin-vue-setup-extend'import legacy from '@vitejs/plugin-legacy'import compressPlugin from 'vite-plugin-compression'import viteImagemin from 'vite-plugin-imagemin'import Component...
Vite+Vue3+TypeScript轻量级框架搭建(1)
初始化项目q1234npm init vite@latest√ Project name: vite+vue3+ts // 项目名字√ Select a framework: » vue // 框架语言√ Select a variant: » vue-ts // 拓展语言 添加setup name增强插件安装 1pnpm install vite-plugin-vue-setup-extend -D 配置 1234567import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueSetupExtend from 'vite-plugin-vue-setup-extend'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(), vueSetupExtend()]}) 使用 12&...
小程序随手笔记
1、组件之间的传值、方法调用1、子组件调用方法在父组件的json文件中注册子组件的路径 12345{ "usingComponents": { "progress": "../componets/progress/progress" }} 直接在xml中使用就可以 1<progress></progress> 2、子组件调用父组件页面刷新方法需要子组件获取父组件的方法 123456methods: { switch: function(e) { const page = getCurrentPages().pop(); // 当前所在的父组件页面 page.onShow() // 父组件页面刷新 }}
