直接上代码了，vue3 setup 模式下 需要额外写一个script <script> export default { options: { styleIsolation: 'shared' } } </script> styleIsolation 可选项 isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值） apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面 shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

Web Worker中需要加载js文件中包含import 的文件的话，需要一些设置 // main.js（主线程） const worker = new Worker('/worker.js', { type: 'module' // 指定 worker.js 的类型 这里设置开启 ESModule 模式 });

<Trans i18nKey={'app.btn.setIcon'} defaults={'设置图标'} /> i18nKey 是 对应翻译文件的key，defaults 是默认值，就是找不到翻译文件的时候显示的默认内容 // t 的用法 {t('common.button.cancel', { defaultValue: '取消 {{name}}', name: iconPath })} 第一个参数 common.button.cancel 为翻译文件的key，defaultValue 是找不到翻译时候显示的默认内容， name 的对应 defaultValue 里面的 {{name}} 动态值，他会知道替换里面的内容

最近开发页面装修功能，封装了很多层级的子组件，顶层用provide设置当前编辑的右侧数据，如下图 在最里面的子组件使用了watch来监听数据的变化 // 监听数据变化 watch( () => props.modelValue, (newVal) => { if (!newVal) return; rightStyle.value = newVal; }, { deep: true } ); watch( () => rightStyle.value, () => { // 数据更新后，通知父组件更新数据 emit('update:modelValue', rightStyle.value); }, { deep: true } ); 然后奇怪的事情发生了，如下图 watch 竟然监听不到变化，经过反复摸索，代码变更为 // 监听数据变化 watch( () => props.modelValue, (newVal) => { if (!newVal) return; rightStyle.value = newVal; }, {…

本篇详细介绍Painter在uniapp中的使用方法 前置资源： Painter的github库：https://github.com/Kujiale-Mobile/Painter Painter在线设置网站：https://lingxiaoyi.github.io/painter-custom-poster/ 完整demo：https://gitee.com/hackchen/uniapp-painter-demo 新建项目 使用HBuilderX新建一个空项目 新建一个叫painter-demo的页面 新建一个js文件paletteData.js（这个文件可自行决定是否需要，本demo因为数据量太大，所以独立建一个文件） 通过github，下载得到painter项目文件 将项目下的components/painter文件夹复制到uniapp项目的wxcomponents文件夹下 新建完文件后，大致的目录结构如下图 修改pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/…

// xxx.ets import web_webview from '@ohos.web.webview' @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); build() { Column() { // src 不能带协议 Web({ src: 'www.baidu.com', controller: this.controller }) } } } // 需要额外配置当前模块下的 module.json5 文件 requestPermissions 块 { "module": { "name": "entry", "type": "entry", "description": "$string:module_desc&quo…

运行下面命令 npm config ls -l 上面命令会显示 .npmrc 文件所在路径 打开 .npmrc 文件，并添加下面内容 ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

当前环境 vite 版本 4.2.1 node 版本 14.20.0 通过百度查到 Unexpected token '??=' 是由于node版本太低造成的，使用nvm 升级node 到 18 版本即可解决

if(fast.device.isWxMiniProgram()) { $("#js_wx_mini").attr('src',"/js/jweixin-1.3.2.js"); $(".icon-arrow-left").hide(); $(".fast-nav-title").css({ marginLeft:'0px' }); // 监听 popstate 事件 window.addEventListener('popstate',function(event) { wx.miniProgram.navigateBack(); }); }

找到nvm的安装目录，打开 settings.txt 文件，添加下面2行配置 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/

这是因为jdk版本太高了，可以调低版本 可以尝试 JDK 1.8

显示如下提示 只要打开下面设置即可 打钩红色框框选项

const downPic = async (url: string, fileName: string) => { // 判断文件是否存在 const isExist = () => { return new Promise((resolve, reject) => { plus.io.resolveLocalFileSystemURL( `_downloads/${fileName}`, function (entry) { // 文件存在 console.log(`File exists: ${entry.name}`); resolve(entry); }, function (e) { // 文件不存在 console.log(`File not found: ${e.message}`); resolve(false); } ); }); }; const file = await isExist(); if (file) { return new Promise((resolve, reject) => { resolve({ filename: …

在 .eslintrc 文件中设置 rules { 'rules': { 'linebreak-style': 0 }} 解决办法二： # windows 在拉仓库之前修改 git 配置文件（换行符使用 LF 而不会自动转化为 CRLF） git config –global core.autocrlf false

在vue2中我们已经使用过provide和inject来实现祖孙组件之间的数据传递，但是在vue3中由于我们使用setup，此时我们应该如何去使用provide和inject函数呢？ 在vue中帮我们提供了provide和inject的函数，我们可以直接在setup函数中使用即可。 一、provide和inject的基本使用 如上图所示，此时我们将一个普通对象进行传递，然后在Home组件中通过inject函数来接收。 我们也可以通过ref和reactive进行传递。 上面代码我们可以看出在Home.vue文件中可以更改App.vue通过provide传递过去的数据，但是在一些情况下，我们是不允许的，此时我们可以采用readonly来进行设置。