Cxiaomu的博客

常规的项目基架，安装并引入TypeScript、Pinia、Element Plus、Ant Design Vue，配置好后进行实际编码。主要分为三个部分：全量表头数据（表头项数组）、已选表头数据（十进制数字）、页面渲染。流程：从Pinia中获取已经选中的数据，转化为二进制数字，每一位对应一个表头项的显示/隐藏，根据全量表头位进行匹配处理，获得实际勾选展示的表头项数组，进而根据UI框架的要求处理成对应的结构。

在Vue开发中，可以利用一些第三方插件来实现文件预览功能。例如使用vue-office插件来实现文件的预览。注意：据网上资料所说，此插件还存在部分缺陷，比如docx的艺术字体、excel的多种数据格式解析不准确的问题，对此有很高要求的小伙伴慎用。文件上传时触发handleChange事件，执行操作：1. 解析文件名匹配对应预览组件，利用previewFileCom函数，2. 设置预览文件的url，3. 展示预览弹窗预览组件渲染完成、渲染失败时分别调用**render

当前有个需求，是路由内部某个组件发生某些操作时，开启/关闭全局（整个页面）的loading效果。在收到这个需求时，考虑到关键点在于跨组件通信，于是想到以下这些方法并进行分析可行性，props、$emit、Event Bus 、Vuex、provide、inject、slots、Ref / Reactive、useAttrs、Pinia，通过以上分析，认为provide/inject的方式比较方便快捷（更熟悉），于是通过此方式实现。

某些情况，大屏页面需要实现一些比较美观的图表，常用的图表插件有，此篇的实现效果为饼图和的结合体。这两种图具体实例可查看同时实现轮播高亮，采用定时循环操作，先调用的取消所有的高亮，再调用高亮指定数据。每次窗口大小改变时，进行监听，chart更新，调用resize方法，避免出现错乱效果。其中，需要注意到keep-alive 缓存特殊的两个阶段，activated(组件激活时) 和deactivated(组件停用时)

Vue- i18n 国际化多语言配置

Vue-i18n国际化多语言使用

vue有自定义指令的功能，开发者可根据实际业务需求自定义各种功能的指令，其中常出现就的就有鉴权指令。登录时获取用户信息，包含权限列表，存储到store中。每次使用自定义权限指令时，代码都会跟store中的权限列表内权限做比对，有权限则显示该元素，否则删除其节点（其子节点也会被删除）。

在 uniapp 开发跨端适配微信小程序时，经常会遇到打包超过微信标准大小的情况，这个时候就无法上传成功、发布小程序，于是就需要实现分包。微信小程序包核心要求： 1. 主包和分包分别不能超过2MB。2. 总包不使用分包时，不能超过2MB；使用分包时，不超过30MB。3. 静态不能超过200KB。 4. tabBar的页面必须在主包内。与此对应的，可以考虑一些应对措施，大的静态资源从服务器请求而不是本地存储，小程序代码按照业务逻辑划分为多个独立的子包，在构建时打包成不同的分包，用户在使用时按需加载。

摘要：Uniapp+Wot UI跨端开发中的样式隔离解决方案 在Uniapp+Vue3+Wot UI开发中，微信小程序端的样式隔离会导致自定义组件样式失效。通过配置defineOptions中的styleIsolation: 'shared'并配合:deep()选择器，可解决H5和小程序端样式不一致的问题。文章详细介绍了该方案的技术实现，包括核心代码、应用效果和完整组件代码，同时扩展说明了defineOptions和styleIsolation的相关知识。该方案有效保证了跨端开发中UI组件样式的一致性。

在开发微信小程序过程中，会经常发布新的版本，与此同时，需要正在使用的用户进行更新才可以正常使用。于是，需要及时检测是否有新版本、应用更新版本。主要会使用到uni.canIUse(‘getUpdateManager’) 、uni.getUpdateManager() 、updateManager的onCheckForUpdate()、onUpdateReady() 、applyUpdate() 、onUpdateFailed()。

因实际需求，需要本小程序支持用户修改默认的头像、用户名，其中还需支持获取微信账号的头像、昵称。原本可直接获取昵称、头像的 wx.getUserInfo与 open-type=“getUserInfo” 获取用户个人信息（头像、昵称、性别与地区），权限已经被微信收回。具体可查看微信官方文档，但是微信单独提供了接口来支持替换此功能为了页面显示效果和功能实现，需要使用 button包裹住头像，button 配置 相关属性，chooseavatar 内接收、处理图片路径。

因实际需求，需要实现微信小程序自定义分享，根据当前数据动态生成（绘制）分享卡片的图片。为了实现绘制分享卡片，核心需要使用。先来看一下效果：注意：绘制图片必须需要专门使用获取图片的path后，再使用绘制，否则直接用图片路径绘制不成功，会成默认的分享图。

因实际需求，需要实现微信小程序自定义分享（自定义分享卡片标题、图片、小程序路径、参数等）。为了实现自定义分享，需要关于内入参、出参，可查看官方文档。。下面分享配置分两种情况：普通情况（纯手写分享配置）、使用了uview-plus mixin mpShare情况。因本小程序使用了uview-plus组件，其内部封装了 share对象，外部 onShareAppMessage 内返回的配置对象不会生效，需要设置uview-plus内的share对象。

实际业务中有时候会需要在本微信小程序内打开web页面，这时候可以封装一个路由页面专门用于此场景。在路由跳转的时候携带路由参数，拼接上web url，接收页面进行参数接收即可。

因实际需求，需要实现从本小程序跳转至第三方小程序，根据业务场景会有全屏、半屏的跳转，此处记录如何实现。因为uniapp此类方法都是基于原生微信方法实现的，可直接根据微信官方文档查阅使用即可。

Vue.js的最新版本，它带来了许多改进和新的特性，旨在提供更好的性能、更强的类型支持以及更灵活的组件开发方式。新特性有重写响应式数据（proxy）、VDOM重写、模板编译优化、diff算法、path flag静态节点、Fragment、Tree-shaking支持、Composition API、TS支持、异步组件写法、Teleport、Suspense、多事件等，体积更小 性能更好 更好的TS支持 更好的代码组织 更好的逻辑抽离 更多新功能。

后台管理系统中，会常用到打印功能，打印一些表格数据、信息之类的。此处做个简单的打印示例。此功能模块，主要分为三个部分打印组件作为处理，将需求跟模板文件映射起来。1. 打印模板文件，提前编写好的数据展示模板；2. 打印组件，将模板文件名跟模板文件映射起来；3. 应用demo，实际应用。

开发后台管理系统的过程中，会出现一些管理员配置功能的部分，比如一些开放接口权限的开通。分析一下，“开放接口权限的开通”，会有很多的权限可以开通，那就是多选。另外，开放接口肯定会进行分类，类别唯一。按类进行多选，再加上个全选的功能。支持多选的同时还需要分类，会有点复杂，就需要设计好数据结构，内部有具体类别的标识与选中的数据存储。至此，需求就分析完毕了。

部分项目在开发过程中，会有全屏功能的需求，实现指定元素全屏显示，比如数据大屏等。于是，本篇来通过调用浏览器原生API实现此功能组件。流程为进入页面，元素本为非全屏模式，监听页面全屏状态。点击全屏icon，判断浏览器是否支持全屏且目标元素存在且浏览器全屏事件存在，条件成立，调用浏览器接口。点击退出全屏icon，判断浏览器是否支持全屏且全屏元素存在且浏览器退出全屏事件存在，条件成立，调用浏览器接口。维护 isFull 字段，控制全屏icon的显示。

当涉及到国际化的内容时，系统往往需要配有多套语言翻译文件，并支持当前语言环境的获取和切换当前语言功能，随之整个系统将切换成对应的多语言。直接在需要应用的地方引入并使用就可以，不需要传任何参数，组件自身会根据当前语言环境自动获取当前语言。

VUE3+Ant Design Vue+TS实现手机号输入组件（带区号）。因实际业务需求，频繁需要使用手机号输入，包含区号的选择。此组件为区号、手机号输入组件，开放出常用配置项与onChange事件。可单独使用，也可以结合表单使用。

Vue3+TypeScript+Vite+SCSS+（Element Plus、Ant Design Vue、Naive UI）因调研需要，需在同一个项目中集成好几种UI组件库的多语言实现，查看各种组件库的表现情况，以便选定组件库。注意：这只在调研过程中会如此，实际开发项目中极少存在一个项目中集成多个UI组件库的情况。本demo实际试验阿拉伯语、法语、葡萄牙语、英语、中文五种语言。

全局配置了scss样式，部分组件内部使用全局样式不生效遇到这个问题时，发现在views组件中使用的样式能生效，但是子组件内使用的就不能生效，通过控制台查看，class绑定上了，但是对应的css样式没找到。

Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. Component that was made reactive:

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

因最近需要考虑使用VUE3开发新项目，但是从公司层面担心有风险造成比较大的损失，于是需要先进行技术调研VUE2升级到VUE3的一些变动。这里根据VUE官网进行了一个整体的梳理。已有VUE2项目升级到VUE3项目可参考

在src目录下创建lang文件夹，内部创建index.ts【多语言入口文件】 、zh.ts【中文语言配置】、en.ts【英文语言配置】。由于上一步使用了app.config.globalProperties挂载到全局，所有vue页面都可用$t来使用。但是，在ts中，直接使用是不行的，需要另外引入，setup 有两种写法。

最近由于刚接触使用VUE3开发需求，涉及到VUE3父子组件传参、事件传递情景，在开发中做一些积累。