随着鸿蒙技术的火热，学习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"

1.派大星：他真是可怕了，一看到他我就恶心！&nbsp;那双大牛眼睛、方身体、两颗大门牙，还有那个愚蠢的领带！真是太可怕了！&nbsp; 海绵宝宝：呃……&nbsp; 派大星：但是这些在你身上就很好看~ 2.谁都会犯错误，所以人们才会在铅笔的另一头装上橡皮 。 3.海绵宝宝，我只想告诉你一件事情，派大星也是需要人疼的。&nbsp; 4.我生下来就是为了与你相遇。 5.我要两个冰激凌一个给我吃，一个给我的好朋友海绵宝宝。 6.知识不能代替友谊，比起失去你，我宁愿做个白痴(68集，聪明珊瑚脑) 7.人生就是不公平的慢慢习惯吧你。 8.你可以是一本打开的书，海绵宝宝，但我比那复杂点儿。 9.派大星:如果你去上学，那我该做什么呢？ 海绵宝宝:我不知道，如果我不在家，你会干什么？ 派大星:我会等你回来的。 10.海绵宝宝:他们都去哪了？ 派大星:“他们都放弃你了，可是我没有，因为我不是那么聪明”。 11.海绵宝宝：不如我们来玩海盗好啦&nbsp;。 &nbsp;&nbsp;派大星：不，朋友我们好像已经渐行渐远了，过去我们在一起很快乐，可现在我们不能兼容了，我们应该分道扬镳了，这就是人生！人生！懂吗？我知道很难 面对现实吧，也许将来我们会再次相逢，请你勿忘我，海绵宝宝先生。 12.章鱼哥:派大星你在这干什么？ 派大星:我觉得这个机会可以改变我的生活！ 13.你不会，不会明白的，大家都说你不行，我现在行了！ 14.没想到我会失去最好的朋友，至少我和派大星做过朋友。 15.虽然我满腹经纶，却无人分享，一个朋友都没有。曾经和我欢笑的人是谁啊？海绵宝宝吗？ 16.我愿意付出一切，只要我的朋友回到身边来！

派大星经典语录

这是你人生中一个重要的时刻，是你会铭记一生的事情，不仅是你明天和朋友聊天的谈资。如果你以后想起，无论何时回想起来，这件事都会让你嘴角带笑的话，那就去做吧！但如果你并不这么认为或者不太确定，那就忘掉它吧！因为你还有大把的时间。

电影《完美陌生人》

在使用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

本文主要对Three.js做了一个简单的入门，搞清Three.js中各名词的概念含义、以及如何一步步实现一个效果出来。 什么是WebGL? WebGL是一项可以在浏览器中流畅显示3D模型和场景的一种技术。它使用javascript作为编程语言，调用浏览器支持的3D绘制函数，来实现3D模型和场景的展现。 什么是Three.js? Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。 <h4>WebGL之Three.js</h4> Three.js是一个封装好的webgl库，它使WebGL的学习更为简单。 好了，介绍完概念之后，下面开始Three.js的内容 Three.js程序结构大体可分为场景、相机、渲染器三大块 场景：场景就是舞台，你可以把任何要显示的东西，放在场景中的任何位置 <pre class="ql-syntax" spellcheck="false">const&nbsp;scene&nbsp;=&nbsp;new&nbsp;THREE.Scene() // 创建场景对象
</pre> 相机：可以理解为生活当中的相机，我们调整相机的坐标、距离的远近，拍出来的效果是不一样的。常见的相机又分为两类：正投影相机和透视投影相机，正投影相机投影尺寸不受物体与相机的距离影响，而投影相机投影尺寸会随着距离的变化而变化 <pre class="ql-syntax" spellcheck="false">const&nbsp;camera&nbsp;=&nbsp;new&nbsp;THREE.OrthographicCamera(left, right, top, bottom, near, far) // 创建正交投影相机
const&nbsp;camera&nbsp;=&nbsp;new&nbsp;THREE.PerspectiveCamera(fov, aspect, near, far) // 创建透视投影相机
camera.position.set(200, 300, 200) // 设置相机位置
camera.lookAt(scene.position) // 设置相机看向的方向
</pre>其中left：表示渲染空间的左边界，right：表示有边界，top：表示上边界，bottom：表示下边界，near：表示从距离相机多远的位置开始渲染，far：表示的是距离相机多远的位置截止渲染，for：表示视场，所谓视场就是能够看到的角度范围，aspect：表示渲染窗口的长宽比 渲染器：渲染器决定了怎么将眼前的场景画到屏幕上 <pre class="ql-syntax" spellcheck="false">const&nbsp;renderer&nbsp;=&nbsp;new&nbsp;THREE.WebGLRenderer() // 创建渲染器对象
renderer.setSize(width, height) // 设置渲染区域尺寸
document.body.appendChild(renderer.domElement) // 将渲染的canvas插入body中
renderer.render(scene, camera) // 执行渲染操作，指定场景、相机为参数
</pre> 好，现在我们场景有了，相机有了，渲染器也有了，是不是可以看到效果了呢？别急，虽然我们场景有了，但是我们没有往场景里添加任何东西，所以是什么都看不到的，下面我们创建一个网格模型，并把它放到场景里 <pre class="ql-syntax" spellcheck="false">const&nbsp;geometry&nbsp;=&nbsp;new&nbsp;THREE.BoxGeometry(100,&nbsp;100,&nbsp;100) // 创建一个长宽高均为100的立方体
const&nbsp;material&nbsp;=&nbsp;new&nbsp;THREE.MeshLambertMaterial({ // 为立方体创建一个红色的材质对象
&nbsp;&nbsp;&nbsp;color:&nbsp;0xff0000
&nbsp;})
const&nbsp;mesh&nbsp;=&nbsp;new&nbsp;THREE.Mesh(geometry,&nbsp;material) // 创建网格模型对象
scene.add(mesh) // 网格模型添加到场景中
</pre> 现在，我们的场景中已经有个一个长宽高均为100的红色立方体，此时我们可以看到浏览器中已经有东西，但是你会发现明明我们的添加的是一个红色的立方体，为什么我们看到的却是一个黑色的且没有立体感的东西？那是因为我们还没有给场景添加光照，就像我们平时拍照的时候如果没有任何光照的话，拍出来的东西当然就是黑色的了。下面让我们来添加光照。<pre class="ql-syntax" spellcheck="false">const&nbsp;point&nbsp;=&nbsp;new&nbsp;THREE.PointLight(0xffffff) // 创建一个点光源，参数为光源颜色
point.position.set(400,&nbsp;200,&nbsp;300)&nbsp;// 设置点光源位置
scene.add(point) // 点光源添加到场景中
const&nbsp;ambient&nbsp;=&nbsp;new&nbsp;THREE.AmbientLight(0x444444) // 创建一个环境光
scene.add(ambient) // 环境光添加到场景中
</pre> 现在我们可以看到浏览器中已经有一个红色的立方体了，如此一来我们便用Three.js创建了一个简单的3D效果。当然Three.js还为我们提供了更多好玩的东西，后面我会慢慢写出来 复制如下代码，用浏览器打开即可看到效果&lt;!DOCTYPE&nbsp;html&gt;&lt;html&nbsp;lang="zh-cn"&gt;&lt;head&gt;&nbsp;&nbsp;&lt;meta&nbsp;charset="UTF-8"&gt;&nbsp;&nbsp;&lt;meta&nbsp;name="viewport"&nbsp;content="width=device-width,&nbsp;initial-scale=1.0"&gt;&nbsp;&nbsp;&lt;title&gt;Three.js入门&lt;/title&gt;&nbsp;&nbsp;&lt;style&gt;&nbsp;&nbsp;&nbsp;&nbsp;body&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.js"&gt;&lt;/script&gt;&nbsp;&nbsp;&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;scene&nbsp;=&nbsp;new&nbsp;THREE.Scene() &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;geometry&nbsp;=&nbsp;new&nbsp;THREE.BoxGeometry(100,&nbsp;100,&nbsp;100)&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;material&nbsp;=&nbsp;new&nbsp;THREE.MeshLambertMaterial({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;0xff0000&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;mesh&nbsp;=&nbsp;new&nbsp;THREE.Mesh(geometry,&nbsp;material)&nbsp;&nbsp;&nbsp;&nbsp;scene.add(mesh)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;point&nbsp;=&nbsp;new&nbsp;THREE.PointLight(0xffffff)&nbsp;&nbsp;&nbsp;&nbsp;point.position.set(400,&nbsp;200,&nbsp;300)&nbsp;&nbsp;&nbsp;&nbsp;scene.add(point)&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;ambient&nbsp;=&nbsp;new&nbsp;THREE.AmbientLight(0x444444)&nbsp;&nbsp;&nbsp;&nbsp;scene.add(ambient) &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;width&nbsp;=&nbsp;window.innerWidth&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;height&nbsp;=&nbsp;window.innerHeight&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;k&nbsp;=&nbsp;width&nbsp;/&nbsp;height&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;s&nbsp;=&nbsp;200&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;camera&nbsp;=&nbsp;new&nbsp;THREE.OrthographicCamera(-s&nbsp;*&nbsp;k,&nbsp;s&nbsp;*&nbsp;k,&nbsp;s,&nbsp;-s,&nbsp;1,&nbsp;1000)&nbsp;&nbsp;&nbsp;&nbsp;camera.position.set(200,&nbsp;300,&nbsp;200)&nbsp;&nbsp;&nbsp;&nbsp;camera.lookAt(scene.position) &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;renderer&nbsp;=&nbsp;new&nbsp;THREE.WebGLRenderer()&nbsp;&nbsp;&nbsp;&nbsp;renderer.setSize(window.innerWidth,&nbsp;window.innerHeight)&nbsp;&nbsp;&nbsp;&nbsp;renderer.setClearColor(0xb9d3ff,&nbsp;1)&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(renderer.domElement) &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;render&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestAnimationFrame(render)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;renderer.render(scene,&nbsp;camera)&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;&nbsp;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;