前端 - 弦圈

发帖子提问

全部

内容 11|

|

3 months ago

|

文章

前端跨平台开发框架对比：Flutter vs Tauri vs React Native

传统移动端开发往往需要同时兼顾Android和IOS的开发，而桌面端开发又需要同时兼顾Windows、MacOS、Linux系统。如果你想要全平台覆盖，不仅意味着要同时维护多套完全不同的代码（极大提高了维护成本），并且代码和逻辑还可能不能复用，这意味着高昂的开发成本（极低开发效率），每个平台都得从零开始写。现在国内还多出个鸿蒙系统，这意味着你要同时开发和维护更多套代码，哪怕补贴钱，这成本也不是小企业能够负担得起的。于是，跨平台框架应运而生，Facebook开源的React Native，曾经是最流行的框架，不过近几年被Flutter超越。它不仅能让你使用React语言同时开发Android和IOS APP，甚至还能进行Windows桌面端开发。而谷歌开源的Flutter，是目前最流行的跨平台框架，略微领先React Native。它能让你使用dart语言开发移动端与桌面端应用。而Tauri则允许你使用任何前端框架进行全平台开发，不过也需要你懂得一些Rust语言。我们先从开发体验出发来对比这三个跨平台框架。首先，React Native能够让你完全用JSX语言来进行跨平台开发，这对于本身 ...

0

赞

376

0 评论

|

3 months ago

|

文章

Node.js安装与更新教程 - Windows版

Node.js环境是前端开发的必备环境，无论哪一个前端框架都需要用到node.js，本文将会教你如何安装配置node.js环境。如果你已经安装过node.js，但是想更新，那你也只需要按照安装的步骤直接覆盖原目录即可。首先，打开node.js的官网https://nodejs.org/zh-cn，然后下载node.js的Windows安装包。注：无特别需求，直接安装LTS（long term support）版就可以了。如果觉得在官网下载速度太慢，可以选择镜像网站下载：https://mirrors.aliyun.com/nodejs-release/v22.14.0/?spm=a2c6h.25603864.0.0.4b507621PbOVxm。然后根据自己电脑的配置选择安装包，下载完后直接打开，选Next勾同意协议，然后选Next设置你的安装路径，然后选Next接下来，这里不用管直接选Next继续选Next，注：这里说的是某些npm库安装时需要从C/C++中编译出来，如果你想要能安装这些库，就勾选此项。现在直接选Install，开始安装等待安装完成（如果这时候弹出请求管理员权限，点是 ...

0

赞

161

0 评论

|

3 months ago

|

文章

Flutter、Tauri、React Native、Android原生的四次开发经历，为何最后我选择了React Native？

Flutter、Tauri、React Native都是目前移动端流行的跨平台开发框架，并且他们还能胜任全平台开发。React Native是最早开源的跨平台框架，而Flutter紧跟其后，并且Flutter最近几年超越React Native成为当前世界上最流行的跨平台框架。Tauri则是最近几年诞生的新跨平台框架，跟其他框架显著不同的一点是，它允许你使用任何前端框架，即你能够自由使用整个Web生态进行跨平台开发。Flutter、Tauri、React Native、Android原生我都尝试过，接下来我说一下我分别使用他们的开发经历。首先，我第一个使用的跨平台框架是Tauri，当时Tauri V2.0已经发布，我看它能够使用Nuxt.js或者Next.js进行开发，觉得蛮不错的。毕竟我有两个网站，一个是Nuxt写的，另一个是Next写的，这样我就只需要在原有代码基础上修改一下就行了。于是很快我就栽跟头了，首先是Nuxt的桌面端应用，我在dev模式下，没有发现任何问题，$fetch请求也能正常发送。结果build以后，发现所有的请求都废了，全是404，将url改为完整url，结果就是 ...

0

赞

165

0 评论

|

6 months ago

|

提问

center h1 in the middle of screen（示例提问）

How can I center horizontally and vertically a text? I don't want to use position absolute because I try with it and my other div getting worse. Is there another way to do that ?div { height: 400px; width: 800px; background: red; }<div> <h1>This is title</h1> </div>

208

1 回答

|

9 months ago

|

文章

网站和APP产品举步艰难，AI产品前途未卜

你抄你的内容，我写我的原创内容，我们都有光明的未来。在如今移动互联网时代后期、生成式ai时代初期，互联网上劣币驱逐良币的现象可以说是越来越严重。😂前有百度封杀，后有谷歌的不合理审查。只能说pc端互联网已经进入了一个存量竞争及其激烈的特殊时期。百度在国内早已是被很多人口诛笔伐，搜索出来的结果被不良广告霸占，找不到好的优质内容。这其实还好，早在09年时候百度就传出恶意封杀网站，后来谷歌退出🇨🇳市场以后，有了垄断地位更是可以为所欲为。而谷歌呢，“不作恶”的谷歌相比于百度还是好那么一些，至少对于新网站，不至于像百度那样一下子摁死，根本不给机会，谷歌还是会给些流量。但是谷歌对于中文互联网的搬运抄袭也是睁一只眼闭一只眼，或者说退出了🇨🇳市场，谷歌早也不想在中文互联网投入过多精力。虽然谷歌明面上是说，会打压搬运抄袭，但实际上有不少网站里面的内容全是一字不差的复制，结果非但不是限流，反而是让他们做起来了，不断给他们推流，甚至谷歌广告都给他挂上了，也不知道谷歌广告的审查为什么这么双标，全是原创内容的网站能说成是低质量内容。其实这也是目前很多搜索引擎面对的通病，对于这种内容农场没有很好的处理和解决，导致一 ...

0

赞

354

0 评论

|

10 months ago

|

帖子

CSS解决border重叠加粗问题

在写border样式时，我们可能会遇到两个元素的border重叠导致加粗的问题。对于这个问题，有一个简单粗暴的办法，就是避免设置重复的border，通过准确设置不同元素的border-top、border-left、border-right、border-bottom来保证不会有border重叠。然而有些场景中，这样分别设置border-top等的方法未免太过于麻烦。比如说设置表格的边框，就很难通过这种方法来避免border重叠。那么还有什么办法解决呢？这就涉及到边框合并。什么是边框合并？在CSS中，边框合并是指将相邻元素的边框合并成一个单一的边框。这种效果可以使元素之间的边框看起来更加整齐和紧凑。border-collapse属性border-collapse属性用于指定元素的边框合并方式。它有两个可能的取值：separate：默认值，表示边框不合并，相邻元素的边框会显示为独立的边框。collapse：表示边框合并，相邻元素的边框会合并成一个单一的边框。使用示例下面是一个使用border-collapse属性的示例：div { border-collapse: collapse; ...

0

赞

273

0 评论

|

10 months ago

|

文章

PUT和POST的区别

我们都知道，PUT和POST是HTTP的两个方法(Method)，都可以用来向HTTP服务器提交数据。似乎用哪个都可以，但其实两者还是有本质的区别的。网上关于两者区别的文章比较多，但有相当一部分绝对是误导人。所以这次特意查看了RFC7231，来澄清二者的区别。首先直接摘出RFC7231中的的部分关键原文：The fundamental difference between the POST and PUT methods is highlighted by the different intent for the enclosed representation. The target resource in a POST request is intended to handle the enclosed representation according to the resource’s own semantics, whereas the enclosed representation in a PUT request is defined as replacing the sta ...

0

赞

304

0 评论

|

10 months ago

|

文章

CSS calc函数不生效

在写固钉样式的时候，设置宽度需要用到CSS的calc函数.fix { position: fixed; top: 20px; width: calc(100%-20px); }然而宽度设置不生效，经过查阅资料后发现，calc需要这么写才行.fix { position: fixed; top: 20px; width: calc(100% - 20px); }也就是说calc()函数中的运算符前后都需要保留一个空格。

0

赞

270

0 评论

|

10 months ago

|

文章

li :before content: "✔ ";在一些移动设备上颜色不同

提问我写CSS来让li标签看起来更好。在桌面端和我的手机（联想vibe 1）以及华硕zenfone 5一切都没有问题但是当我在Iphone 5和Galaxy Note3上测试时，我的颜色（rgb(240, 230, 140)）显示成红色和黑色。我不知道我的CSS有什么问题。我应该使用图片，而不是CSS？或者说CSS有解决办法吗？谢谢。这是我的CSS代码：ul.anamenu li::before { content: "✔ "; color: rgb(240, 230, 140); font-size: 4vmin; text-indent: -2em;}回答1试试在ul.anamenu li::before上添加font-family: 'Zapf Dingbats'。这可以用在iPhone上。编辑：2017年6月26日之所以会出现这个问题，是因为这个字符现在是苹果（和其他厂商）绘制的表情符号。在emojipedia这个网站里，你可以看到一些这个表情的变体。因此，你渲染的字符是你设备上的位图图像，并不是可以改变颜色的矢量字形。构造表情符号的厂商或平台可以自由的（用黑色、红色、粉色或其 ...

0

赞

335

0 评论

|

a year ago

|

文章

localStorage，sessionStorage和cookie的区别

我们可以将token和用户信息存进localStorage、sessionStorage或者cookies中，他们都是浏览器的数据存储方式。在使用浏览器的时候，打开开发者模式，点击应用程序，就能查看自己在该网站对应的LocalStorage、SessionStorage以及cookies中所存放的内容。LocalStorage、SessionStorage、Cookies的存储区别：LocalStorage没有生命周期，不会过期，需要“手动”删除。在浏览器发送请求时，LocalStorage中的数据不会被发送至后端服务器。LocalStorage所占用的空间较小。SessionStorage与LocalStorage类似，不同点在于SessionStorage有生命周期。关闭浏览器结束会话后，SessionStorage中的数据便会过期自动删除。SessionStorage所占用的空间较小。Cookies也是有生命周期的，它在过期后自动删除。同时，浏览器发送请求时，会同时将Cookies发送至后端服务器。Cookie所占用的空间较大。

0

赞

638

0 评论

|

a year ago

|

提问

垂直对齐CSS:before和:after的内容（示例提问）

我正努力将链接与图像居中，但似乎无法以任何方式垂直移动内容。<h4>More Information</h4> <a href="#" class="pdf">File Name</a>该图标是22 x 22px的。.pdf { font-size: 12px; } .pdf:before { padding:0 5px 0 0; content: url(../img/icon/pdf_small.png); } .pdf:after { content: " ( .pdf )"; font-size: 10px; } .pdf:hover:after { color: #000; }

957

2 回答