学习js bridge
概念首先需要知道Hybrid开发,即Native和Web混合开发的一种技术。
优缺点对比
特性
web
native
灵活性
无需发版,灵活
需要发版,不灵活
功能
不能使用 native 接口
可以使用所有 native 接口
兼容性
ios 和 android 使用一套代码
需要开发两套代码
混合开发的意义就是结合两者的优点,摒弃缺点。需要快速迭代的需求可以使用前端进行开发,已经稳定的功能可以使用客户端进行开发
js bridge是实现客户端和前端数据通信的技术
封装功能主要功能
前端同步调用客户端方法
前端异步调用客户端方法,需要传callback
客户端同步调用前端方法,对前端来说相当于事件
辅助功能
判断当前环境是浏览器还是App,浏览器环境无App方法。不能通过userAgent进行判断,浏览器自带的手机模拟器的userAgent值也是native。判断前端是否存在客户端注入的方法是可行的
是否开启 debug模式,会在控制台打印调用客户端方法的细节
判断客户端是否存在某个方法
实现EventEmitter用来管理事件
实现前端同步调用客户端 ...
Css Tricks
常用样式单行文本溢出12345div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
多行文本溢出123456div { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
文本截断123div { word-break: break-all;}
元素垂直水平居中文本居中
12345div { height: 20px; line-height: 20px; text-align: center;}
flex
12345div { display: flex; align-items: center; justify-content: center;}
定位 transform
123456div { position: ...
Js Tricks
记录开发中常用的js技巧,封装常用函数等等
功能类rgb 和 hex 颜色相互转换hex color由 6 位16进制字符组成#ffffff。rgb color由 3 组0 - 255的数值组成rgb(255,255,255)。两者的对应关系为两个 hex 字符对应一组 rgb 数值,即ff, ff, ff对应255, 255, 255。取出一组为例ff => 255
hexToRgb123456789101112131415161718192021222324252627282930function hexToRgb(hexColor: string = ""): number[] | string { const rgb: number[] = []; const hexReg = /^#[0-9a-fA-F]{6}?$/; const shortHexReg = /^#[0-9a-fA-F]{3}$/; const isShort: boolean = shortHexReg.test(hex ...
互联网知识
技术产品术语adjust 移动应用术语
POI
(Point Of Interest)兴趣点
LTV
(Life Time Value)用户生命周期价值
是产品从用户获取到流失所得到的全部收益的总和,用来衡量用户对产品产生的价值
CPI
(Cost Per Install)单次安装成本
CPI 是广告结算的一种,广泛应用于 app 推广下载广告,广告主要为用户完成下载安装应用的行为付费
获取的流量质量可能偏低,因为只强调安装,而不关心使用
CPA
(Cost Per Action)按用户行为计费
CPC
(Cost Per Click)按用户点击计费
CPD
(Cost Per Download)按下载收费
CPS
(Cost Per Sales)按销售付费
CPT
(Cost Per Time)按时长收费
CPM
(Cost Per Mille)按展示付费
ROI
(Return On Investment)投资回报率,投入产出比
ARPU
(Average Revenue Per User)每用户平均收入
这个指标计算在某段时间内平均每个活跃用户为应用创造的收 ...
开发vue3项目模板
前言在日常开发中,我们经常需要新建项目,然而项目的初始化是比较繁琐的。因此开发一个公共项目模板,在创建新项目时基于此模板进行修改可以减少很多工作量
功能该vue3模板应具有以下功能
国际化
typescript
前端路由
区分环境
构建、打包
代码检查 lint、husky
gitlab CI/CD
数据 mock
网络请求
状态管理 store
支持 ssr
实现本项目中默认全部使用**Composition API和setup语法糖语法,因此所安装的依赖包**都支持此写法
国际化
使用vue-i18n插件,官网
安装需要安装最新版本
1npm i vue-i18n@next --save
配置在src目录下创建i8n目录,在i18n目录中创建对应语言的文件夹,再在其中创建对应页面的翻译文件(以页面为单位进行翻译),最终的目录结构如下
123456789src - i18n - en-US - zh-CN - about.js - home.js - index.js - index.js main.ts
最终i18n/index.js文件导出的数据格式为 ...
虚拟列表
使用场景在日常开发中,当服务端返回一个列表时,如果列表长度比较短的话可以直接将列表渲染到页面当中,但是对于长列表来说,将其渲染到页面中将会花费很长时间,以下面这段代码为例。
1234567891011121314151617181920212223242526272829303132<template> <ul class="list"> <li class="list-item" v-for="item in data.list" :key="item">{{ item }}</li> </ul></template><script setup lang="ts"> import { reactive, onMounted } from "vue"; const data = reactive({ ...
leetcode刷题总结
二叉树深度优先搜索广度优先搜索完全二叉树的节点个数
给你一棵 完全二叉树 的根节点 root ,求出该树的节点个数。
难度:简单
思路:递归
如果当前节点存在则加1
然后对当前节点的左右节点执行当前函数
12345function countNodes(root) { if (!root) return 0; return 1 + countNodes(root.left) + countNodes(root.right);}
二叉树的最大深度
二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。
难度:简单
思路:递归
当前节点存在则加1
再加上左右节点中的最大值
12345function maxDepth(root) { if (!root) return 0; return 1 + Math.max(maxDepth(root.left), maxDepth(root.right));}
二叉搜索树的最近公共祖先题目链接
重点关注
难度:简单
思路:两侧遍历,参考题解
二叉搜索树的值是数值,并且当前节点的值大 ...
常用到的git操作
基础知识四个分区工作区:默认位置,最新修改所在位置暂存区:当在工作区执行 git add .后将代码添加到暂存区,这时工作区和暂存区的代码一致本地仓库:当执行 git commit 后将代码添加到本地仓库,这时工作区、暂存区和本地仓库一致远程仓库:当在本地仓库执行 git push 后将代码添加到远程仓库,这时工作区、暂存区、本地仓库和远程仓库一致
使用技巧
如果是要开发新分支的话,一定要从 master 分支切出来一个新的分支,因为 master 上的代码都是已经上线了的
往公共分支(master develop 等)合并代码时推荐使用merge,尤其是在多人开发时
在公共分支上开发时,先把本地的代码 stash,然后 pull,在stash pop有冲突的话合并冲突
一般在把代码合并到 master 之前,会把本地的 commit 进行整理,合并成一个 commit 或者多个,这样 master 就不会有过多的无用 commit
在往 master 合并代码遇到冲突的解决方案
可以先 checkout 到本地的 master 分支,pull 最新的代码,在 checkou ...
英语笔记
平时记录的句子I face many obstacles on my journey to helping as many as learners as possible在我帮助尽可能多学习者的过程中,也遇到了很多困难
My computer crashes我的电脑死机了
As someone who is learning english作为一个正在学习英语的人
You are going to have days when you don’t feel like learning english你会有不想学英语的时候
If you stay consistant with that如果你坚持下去的话
Have you ever been drank你喝醉过吗
It doesn’t make any sense这没道理啊
She is very persuasive她很有说服力
You are hust hung over你只是宿醉了
Why are you so hard on yourself你为什么对自己这么严苛
Your absence is causing a real b ...