web前端 谢浩

😊
好的！

@Arivn 又学到一招了，哈哈哈

目测你有两个字体过大，17M，这个字体没有必要的话，可以去掉了，不然手机上一下子要加载17M的内容的话，确实不快，如果非要用字体的话，可以考虑用 字蛛 这一类工具把字体体积缩小

5774e24e-7388-437d-8000-d6c5d07489ae-image.png

补充一段示例代码

以copy-to-clipboard示例：

import copy from 'copy-to-clipboard'; copy('Text'); // Copy with options copy('Text', { debug: true, // \r 回车 \n 换行 message: '数据1 \r\n\n 数据2', });

@zwy 用gitee的话不需要频繁输入账号密码，然后可以 gitee 和 github同步使用！
开发的时候在gitee上开发，github 当作稳定版本推送

可以试试 hackershare.dev，不仅可以管理自己的书签，还可以看看最近其他朋友的书签。另外这完全是一个纯技术人员的项目，也开源方便同行加功能😊

@liazei33 在 github和npm上怎么上传自己的组件？ 中说：

下次需要更新版本的时候，修改项目以后，只需要重新调整一下版本号，再次执行发布命令就可以了！

厉害，谢谢大佬！

初始化的这一段，加入这两个参数可以解决

const app = new spritejs.Scene({ displayRatio: 2, // 显示比率 contextType: '2d', // 渲染形式 ... })

@ivorzk 厉害了

这个是给女生提供的职位的哈！女主播

如果url后面都有后缀的话，可以获取到url的后缀，然后根据后缀来判断显示不通的图标

核心代码

let url = 'xxx.jpg' // 获取后缀 let suffix = this.src.substr(this.src.lastIndexOf('.') + 1) // suffix => .jpg

简要demo（以vue组件为例）

<template> <div class="media"> <img v-if="type=='picture'" :src="src" alt=""> <img v-if="type=='file'" src="@/assets/file.png" alt=""> <video v-if="type=='video'" :src="src" alt=""></video> <audio v-if="type=='audio'" :src="src" alt=""></audio> </div> </template> <script> export default { props: { src: String }, computed: { type() { let type = 'file' if (!this.src) return type let suffix = this.src.substr(this.src.lastIndexOf('.') + 1) switch (suffix.toLowerCase()) { // 图片 case 'jpg': case 'jpeg': case 'gif': case 'png': case 'webp': type = 'picture' break // 视频 case 'mp4': case 'mpeg4': case 'flv': case 'avi': type = 'video' break // 音频 case 'mp3': type = 'audio' break // 其它文件 default: type = 'file' } return suffix } } } </script> <style lang="scss" scoped> .media { display: flex; align-items: center; justify-content: center; width: 15vw; height: 8vw; img { width: 100%; height: 100%; object-fit: cover; } } </style>

这种情况，一般是你的编辑器，或者命令行占用了文件夹，导致的，把它们都关掉以后试试

在全局的app中按照如下设置，然后再去创建窗体就可以了

import { app } from 'electron' // 设置这句后解决了 app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors')

从这几个方面下手

内存过高，一般是网页资源多、变量多容易消耗资源所以可以这样，

压缩网站资源

这里着重强调的是网站的图片资源，和其它媒体资源，这一类资源体积大浏览器加载的时候会消耗大量内存，所以首先得确保网站资源已经达到最佳的优化状态，图片该压缩的压缩，样式、js该合并的合并

网页优化参照此教程

https://xnit.funtask.club/topic/75/

其次就是程序的化

单页应用逻辑复杂，所以要做好变量的回收，路由切换、页面销毁的时候应销毁不使用的变量，
移除不必要的事件监听, 清理不使用的定时器， 减少循环的使用 等等

优化的原理，核心逻辑就是让页面的运算逻辑变简单、加载资源变少 做到这两点，就能降内存，降cpu的使用

经过测试，这个错是 vue-cli 校验webpack配置文件的时候报的错误，根据官方的说明，新版的vue-cli中是无法直接修改webpack的output选项的，需要通过vue.config.js 中的 outputDir属性进行配置

71d03880-ae29-4593-82d1-12ea8c1a4404-image.png

这是官方的警告

正确的修改方法

在 vue.config.js 中设置如下属性

// vue.config.js module.exports = { outputDir: 'dev_test' }

是因为win10 部分版本上，没有启用无线显示器的功能，可按照下方步骤进行操作

找到系统设置 - 投影到此电脑

点击蓝色小字（因为我的已经添加过，所以这里显示是启用链接，如果没有启动无线投影的电脑这里显示的是启用无线显示器）

ccc1930e-0e71-437e-8d18-1a9cc8e881a7-image.png

点击添加功能

搜索无线显示器，点击安装

68ac1d9d-618c-4ebc-9c13-dd0dfb20ca93-image.png

安装好以后，按照如下配置

1f60a95e-15a5-4241-9409-2fa8967c4fc4-image.png

尝试重新链接无线显示器

基于master创建分支

确保当前分支在master上，执行如下命令

// 新建一个dev分支 git checkout -b dev // 将dev分支推送到远端 git push --set-upstream origin dev

删除分支

// 删除本地分支,注意不能在当前分支下，删除自己，需要切换到别的分支上才可以删除目标分支 git branch -d dev // 删除远端分支 git push origin -d dev

新建一个页面，将页面的导航条去掉

以页面名称为 page 举例

在小程序page.json 中加上下方的描述

{ "navigationBarTitleText": "全屏播放页面", "navigationStyle": "custom", // 使用自定义导航条 }

page.wxml

<video src="https://xxx.com/xxx.mp4"></video>

在page.css中将video的宽高设置成为100%即可

video { width: 100vw; height: 100vh; }

可以使用 debounce 解决该问题，debounce 是专门处理高频事件的一种方案，原理不在此讲解
直接上示例代码，lodash 和 underscore这两个js库都有debounce 函数，可以根据自己的喜欢任选一个库来使用，下面选用lodash 以模块开发的引入方式举例：

import _ from 'lodash' export default class { constructor() { // 监听resize事件 window.addEventListener('resize', this.resize.bind(this)) } // 将高频事件降到低频 resize: _.debounce(function() { // TODO: 在这里处理事件触发后的逻辑代码 }, 100) // 100为频率间隔事件，这里的100代表100毫秒内如果resize没有触发，则认为resize已经执行完毕 }

从文档的友好性和使用人数上面来讲的话，lodash用户较多，这两个库功能相差不大
但实战中发现，lodash 在网页内表现良好，但是到了小程序中，会有一些兼容问题，这方面underscore做得更好一些，没有出现兼容问题