牛骑害我留级
获得徽章 0
- wx小程序：bindtap和catchtap的区别
![[惊讶]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_68.1e326db.png)
个人认为，最主要的还是冒泡机制的区别：
bindtap绑定的事件会按照冒泡机制进行传递，从触发事件元素向上层元素冒泡传递，而catchtap绑定的事件不会进行冒泡传递，只在当前触发事件元素上有效。
说人话就是：你设想一个场景，点击卡片会跳转到商品详情页，同时卡片上还有一个按钮，点击会加入购物车。此时，如果我们的按钮用bindtap来写的话，点击加入购物车的同时也会触发卡片的跳转事件，所以如果你只想加入购物车，不想跳转详情页可以选择用catchtap代替bindtap
同理，uniapp中的@tap和@catchtap也是类似的。![[吐舌]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_95.6b0752f.png)
展开赞过 13 - 什么是Js强制缓存和协商缓存？
![[我想静静]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_74.d954f2d.png)
当在浏览器中访问网站时，经常会使用到缓存策略来提高性能。下面是一些实际例子，展示了如何使用强制缓存和协商缓存。
强制缓存的例子：
假设你在网页中引用了一个静态的 Logo 图片，且该图片不会频繁更改。你可以通过在服务器端的响应头中设置强制缓存来优化该请求：
// 强制缓存一个月
Cache-Control: public, max-age=2592000
这意味着在用户第一次访问该图片后，浏览器会将其缓存起来，并且在未过期前不再向服务器发送请求。这样可以减少对网络资源的依赖，提高页面加载速度。
协商缓存的例子：
假设你在网页中引用了一个 JavaScript 文件，你希望在文件发生变化时通知浏览器重新获取最新版本。你可以通过在服务器端的响应头中设置协商缓存来实现：
// 设置 Last-Modified 和 ETag
Last-Modified: Mon, 10 Jul 2023 12:00:00 GMT
ETag: "abcd1234"
当浏览器再次发送请求时，会携带上一次请求中的 Last-Modified 和 ETag，服务器会通过对比这些值来判断资源是否发生了变化。如果资源未发生变化，服务器返回 304 Not Modified，浏览器则使用缓存的版本；如果资源发生了变化，服务器会返回新的资源以及更新的响应头。
这两个例子展示了如何使用强制缓存和协商缓存来优化网页加载性能。通过合理配置缓存策略，可以有效减少网络请求，提高用户体验。展开等人赞过 76 - 平时写完项目打包，我们会使用npm run build
实际上，我们可以自己模拟一下这个过程，以便深入了解打包的全过程。
咱们的案例是，第一步读取数据./public/index.html和./src/index.js第二步将读入的数据处理后分别存入./disc/index.js和./disc/index.html这里注意，我需要将js引入到html中
```
fs.readFile("./src/index.js", { encoding: "utf-8" }, (err, js) => {
fs.writeFile("./disc/index.js", js, (err) => {
if (err) {
console.error(err);
} else {
console.log("JS写入成功！");
fs.readFile("./public/index.html", { encoding: "utf-8" }, (err, html) => {
let newHtml = html.replace(
"</body>",
"</body><script src='./index.js'></script>"
);
fs.writeFile("./disc/index.html", newHtml, (err) => {
if (err) {
console.error(err);
} else {
console.log("html写入成功！");
}
});
});
}
});
});
```展开赞过 21 ![[不失礼貌的微笑]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
vue3怎么唤起微信程序？？？？？
查了之后发现 <a href="weixin://">跳转微信</a>就行了
不知道还有没其他方法，那么QQ呢？
另外！刚才尝试用canvas绘图，用了id选择器给canvas宽高，发现实际绘图的效果很奇怪。
查了之后发现，使用选择器设置Canvas标签的宽度和高度只会影响其显示的大小，不会改变实际的绘图区域。若需要更改绘图区域的尺寸，需要使用canvas元素的width和height属性进行设置。
比如在vue3里面就可以这样写：can1.value.width = 1200；can1.value.height = 900。展开3点赞- 当需要在多个 Promise 中进行竞争或获取首个解析的结果时，可以使用 Promise.race 和 Promise.any 这两个方法。
Promise.race:
-接受一个包含 Promise 实例的数组作为参数。
-返回一个新的 Promise，该 Promise 将解析为传递给它的 Promise 数组中首先解析或拒绝的 Promise 值。
-没有任何一个 Promise 被解析或拒绝时，返回的 Promise 将一直处于挂起状态。
-适用于需要获取最快完成的 Promise 结果的场景。
Promise.any:
-接受一个包含 Promise 实例的数组作为参数。
-返回一个新的 Promise，该 Promise 将解析为传递给它的 Promise 数组中第一个已解析的 Promise 值。
-如果所有的 Promise 都被拒绝，则返回一个 AggregateError，其中包含所有的拒绝原因。
-适用于只需要获取首个解析的 Promise 结果的场景。展开2点赞 - - 单页面应用的优点：
更好的用户体验：应用在加载时不需要每次重新加载整个页面，而只需要渲染变化的部分，加快了页面速度，提高了用户满意度和使用体验。
更快的响应速度：由于大部分页面刷新都是异步加载的，所以整个应用响应速度更快。
更简单的维护：由于整个应用只有一个HTML文件，所有js、css文件都在单个页面中，因此更容易维护，也易于部署和测试。
- 单页面应用的缺点：
首次加载时间可能较长：初次加载时，需要加载所有所需资源，会花费一定时间。
对SEO的影响：由于内容都是通过JavaScript和AJAX动态生成的，因此对搜索引擎优化(SEO)的支持性比较弱。
涉及较多的JavaScript：由于页面与用户交互和数据的展示都需要使用JavaScript，因此对前端开发人员的编程能力要求比较高，同时也需要更大的脚本、数据传输和渲染时间。
【注】单页面应用（Single Page Application，SPA）是指在web页面中，一次加载页面时仅加载一次 HTML、CSS、JavaScript等静态资源，之后的页面更新通过Ajax等前端技术动态加载数据并且更新页面的部分内容，而不需要整页刷新。展开评论点赞
![[我想静静]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_74.d954f2d.png)
![[吐舌]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_95.6b0752f.png)
![[惊讶]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_68.1e326db.png)
![[不失礼貌的微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
vue3怎么唤起微信程序？？？？？