Cxiaomu的博客

在开发微信小程序过程中，会经常发布新的版本，与此同时，需要正在使用的用户进行更新才可以正常使用。于是，需要及时检测是否有新版本、应用更新版本。主要会使用到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父子组件传参、事件传递情景，在开发中做一些积累。