随着鸿蒙技术的火热，学习harmonyOS势在必行，于是用harmonyOS4.0重构了之前的uni-app项目，发现挺香的。 <pre><code >git：https://github.com/mashihuan/harmony_buy</code></pre>

harmonyOS4.0项目实战

&nbsp; &nbsp; &nbsp; &nbsp;本产品基于公司多个项目的共同点提取而来。鉴于公司大部分项目的风格大同小异，为避免重复工作，本人利用空闲时间，将项目的共同点提取出来，从来得到了本产品。 &nbsp; &nbsp; &nbsp; &nbsp;本产品主要技术栈有：React、React-Router、Redux、TypeScript、Vite、Antd等。 &nbsp; &nbsp; &nbsp; React全家桶：<code>React18、React-Router6、React-Redux、@reduxjs/toolkit</code> &nbsp; &nbsp; &nbsp; &nbsp;TypeScript：<code>Typescript5</code> &nbsp; &nbsp; &nbsp; &nbsp;UI库：<code>A</code><code>ntd5</code> &nbsp; &nbsp; &nbsp; &nbsp;构建工具：<code>Vite5</code> &nbsp; &nbsp; &nbsp; 代码风格：<code>Eslint、Prettier</code> &nbsp; &nbsp; &nbsp; git规范：<code>Husky、commitizen、commitlint</code> &nbsp; &nbsp; &nbsp; 单元测试：<code>jest、@testing-library</code> &nbsp; &nbsp; &nbsp; 自动化部署：<code>jenkins</code> <blockquote> &nbsp; &nbsp; &nbsp; &nbsp;预览地址： <a href="https://react.mashihuan.com/" target="_blank">https://react.mashihuan.com/</a> &nbsp; （Vue版在这： <a href="https://vue.mashihuan.com/" target="_blank">https://vue.mashihuan.com/</a> ）</blockquote>

统一产品中心

vue3项目中使用vue-router4刷新页面，就会报[Vue Router warn]: No match found for location with path "/xxxx"，虽然只是个警告，但看着很不舒服。 网上也有很多人给出解决方案，但都不完美。于是自己调试，很快得到了一个完美方案。 注意：不能使用redirect属性，需在beforeEnter钩子里实现重定向 <pre class="ql-syntax" spellcheck="false">{
&nbsp; &nbsp; path: "/:pathMatch(.*)",
&nbsp; &nbsp; hidden: true,
&nbsp; &nbsp; component: () =&gt; import("@/views/exception/404/index.vue"),
&nbsp; &nbsp; beforeEnter: () =&gt; {
&nbsp; &nbsp; &nbsp; return "/exception/404";
&nbsp; &nbsp; },
&nbsp; },
</pre>

vue-router警告： [Vue Router warn]: No match found for location with path "/xxxx"

在使用React写项目时，样式我一般会选择我最喜欢的css-in-js插件styled-components。但在Next.js中使用styled-components时却会有几个问题，解决起来也不麻烦，下面一起看步骤。 问题一：刷新页面，样式消失且控制台报错 解决方法：首先安装styled-components和babel-plugin-styled-componentsnpm install styled-components babel-plugin-styled-components -s然后添加.babel配置<pre class="ql-syntax" spellcheck="false">{
&nbsp;&nbsp;"presets":&nbsp;["next/babel"],
&nbsp;&nbsp;"plugins":&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"styled-components",&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"ssr":&nbsp;true
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;]
&nbsp;&nbsp;]
}
</pre> 问题二：部署到服务器上后，页面加载完成后样式才出现，会有明显抖动感 解决方法：在_document.js里挂载样式<pre class="ql-syntax" spellcheck="false">import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

class AntDocument extends Document {
 static async getInitialProps(ctx) {
 const sheet = new ServerStyleSheet()
 // 1.这里采用react里High Order Component的方式，可以重新包装APP和所有渲染的组件
 const originalRenderPage = ctx.renderPage
 try{
 ctx.renderPage = () =&gt;
 originalRenderPage({
 enhanceApp: App =&gt; (props) =&gt; 
 // App挂载样式
 sheet.collectStyles(&lt;App {...props} /&gt;)
 })
 // 因为覆盖了Document，所以要重新返回页面的props
 const props = await Document.getInitialProps(ctx)
 return {
 ...props,
 styles: &lt;&gt;{props.styles}{sheet.getStyleElement()}&lt;/&gt;
 }
 }finally{
 sheet.seal()
 } 
 }

 render() {
 return (
 &lt;Html&gt;
 &lt;Head&gt;
 &lt;/Head&gt;
 &lt;body&gt;
 &lt;Main /&gt;
 &lt;NextScript /&gt;
 &lt;/body&gt;
 &lt;/Html&gt;
 )
 }
}

export default AntDocument
</pre> 好了，以上就是我在Next.js中使用styled-components遇到的问题

Next.js中集成styled-components

最近把博客部署到服务器上时，突然发现emoji-mart插件不好使了，原本的表情全部显示成“?”，而本地是正常显示的。于是在网上搜索了原因，	原来是mysql在搞鬼，因为数据库中使用的字符编码为UTF-8，这种编码有可能是两个、三个、四个字节。Emoji表情是4个字节，而mysql的utf8编码最多3个字节，所以数据插不进去，而utfmb64是支持四个字节的。所以解决方案就是：将mysql编码从utf8转换成utf8mb4。 设置数据库默认支持字符集utf8mb4, 找到mysql安装目录下的my.cnf或者mysql.ini,修改my.cnf或mysql.ini[client]&nbsp;default-character-set = utf8mb4[mysql]default-character-set = utf8mb4[mysqld]&nbsp;character-set-client-handshake = FALSE&nbsp;character-set-server = utf8mb4&nbsp;collation-server = utf8mb4_unicode_ci&nbsp;init_connect='SET NAMES utf8mb4' 存在的数据库的字符集是utf8的，如果要支持utf8mb64则需要将已经存在的数据库、表、表字段类型修改成支持utf8mb64. 修改数据库字符集：ALTER DATABASE database_name CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;修改表的字符集：ALTER TABLE table_name CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;修改字段的字符集：ALTER TABLE table_name CHANGE column_name column_name VARCHAR(191) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; 然后重启mysql，顺利解决

emoji-mart部署到服务器上失效的问题

offsetWidth/offsetHeight&nbsp;&nbsp;&nbsp;&nbsp;对象的可见宽度(包括边框) clientWidth/clientHeight&nbsp;&nbsp;&nbsp;内容的可见宽度（不包括边框） scrollWidth/scrollHeight&nbsp;&nbsp;&nbsp;元素完整的高度和宽度，overflow:hidden的部分也计算在内。 offsetLeft/offsetTop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;距离第一个有定位的父级盒子的距离（没定位以body为准） clientTop/clientLeft&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这个属性测试下来的结果就是border scrollLeft/scrollTop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;设置或返回已经滚动到元素的左边界或上边界的像素数 clientX/clientY&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼠标点距离浏览器窗口的距离（不包括滚动距离） pageX/pageY&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼠标点距离浏览器窗口的距离（包括滚动距离） offsetX/offsetY&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼠标所在元素距离窗口的距离

offsetWidth、clientWidth、scrollTop

<h3>检查网络状态</h3> <pre class="ql-syntax" spellcheck="false">window.addEventListener('online', function(){})
window.addEventListener('offline', function(){})
</pre><h3>全屏显示(兼容性问题需加前缀)</h3> Node.requestFullScreen() 开启全屏显示 Node.cancelFullScreen() 开启全屏显示 全屏伪类选择器(也要加前缀) :full-screen&nbsp;&nbsp;:-webkit-full-screen&nbsp; <h3>文件读取</h3> HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过input上传文件后得到的是一个Files对象（伪数组形式） <pre class="ql-syntax" spellcheck="false">const reader = new FileReader()
 reader.readAsDataURL(files[0])
 reader.onload = function(result){
}
</pre> <h3>禁止选中</h3> <pre class="ql-syntax" spellcheck="false">onselectstart=“return false”&nbsp; &nbsp;oncontextmenu=“return false”

document.body.onselectstart = document.body.ondrag = function(){ return false;}

body {user-select: none}

</pre><h3>全局属性</h3><pre class="ql-syntax" spellcheck="false">contenteditable

hidden

spellcheck

tabindex

</pre><h3>新增元素</h3><pre class="ql-syntax" spellcheck="false">section artical aside header footer nav&nbsp;

video audio canvas

input&nbsp; &nbsp;type&nbsp; &nbsp; &nbsp;email url range number

</pre><h3>废除元素</h3><pre class="ql-syntax" spellcheck="false">big&nbsp; &nbsp;font&nbsp; &nbsp; s&nbsp; &nbsp;u&nbsp; &nbsp; center&nbsp; frame
</pre>