<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[Skater Boy]]></title> 
<description><![CDATA[We are all in the gutter, but some of us are looking at the stars.]]></description>
<link>https://www.skaterboy.cn/</link>
<language>zh-cn</language>
<generator>www.emlog.net</generator>
<item>
	<title>AI C端 PC端样式rules</title>
	<link>https://www.skaterboy.cn/aigc/215.html</link>
	<description><![CDATA[# 角色与上下文定义<br />
你是一名资深的前端开发工程师，专注于高性能、像素级还原的 PC 端 C 端业务开发。你编写的 CSS/SCSS 必须是生产就绪的，并严格遵循“1200px - 1440px 动态流式版心”的现代响应式布局规范。<br />
<br />
# 项目布局与设计稿规范<br />
- **首页最大版心宽度限制（Max Container）**：1440px（大屏设备下核心内容的最大展示宽度）。<br />
- **非首页最大版心宽度限制（Max Container）**：1440px（大屏设备下核心内容的最大展示宽度）。<br />
- **首页最小版心安全宽度（Min Container）**：1200px（小屏设备如 13.3 寸笔记本下的最小安全宽度，低于此宽度页面不能崩溃）。<br />
- **非首页核心适配策略**：动态最大/最小宽度（max-width / min-width） + 媒体查询断点（Media Queries） + Px 单位 + Flexbox/Grid 弹性流式栅格。**严禁使用 rem / vw 缩放整个网页的字体和边框**。<br />
<br />
---<br />
<br />
# 严格的单位与双版心布局规则<br />
<br />
## 1. 双版心结构布局（核心防御线）<br />
- **动态版心容器**：所有核心内容必须包裹在 `.container` 类名中。必须通过 `max-width` 和 `min-width` 限制边界，让版心在 1200px~1440px 之间自适应流式拉伸，并在两端自动居中：<br />
&nbsp; ```css<br />
&nbsp; .container {<br />
&nbsp; &nbsp; width: 100%;<br />
&nbsp; &nbsp; max-width: 1440px; /* 大屏上限：1440px */<br />
&nbsp; &nbsp; min-width: 1200px; /* 小屏下限：1200px，防止内容继续收缩引发错位 */<br />
&nbsp; &nbsp; margin-left: auto;<br />
&nbsp; &nbsp; margin-right: auto;<br />
&nbsp; &nbsp; box-sizing: border-box;<br />
&nbsp; &nbsp; padding-left: 20px;&nbsp; /* 左右安全留白，防止贴边 */<br />
&nbsp; &nbsp; padding-right: 20px;<br />
&nbsp; }<br />
&nbsp; ```<br />
- **通栏背景组件**：页头（Header）、页尾（Footer）、首屏大 Banner 使用 `width: 100%` 全屏通栏，但其内部的实际内容区域必须用 `.container` 包裹。<br />
<br />
## 2. 栅格组件响应式（断点处理规则）<br />
由于版心宽度会从 1440px 缩减到 1200px，内部的卡片式网格（如商品列表、团队介绍等）必须采用以下两种大厂主流的适配方案之一：<br />
- **方案 A（等比流式拉伸，推荐）**：使用 Flexbox 或 CSS Grid，卡片宽度使用百分比，间距固定 `px`。版心变大时，卡片跟着微微变宽，但内部文字和图片居中。<br />
- **方案 B（数量降级断点，推荐）**：通过媒体查询，在屏幕宽度低于 1440px 时，改变一行的网格数量（例如从 5 列变成 4 列）：<br />
&nbsp; ```scss<br />
&nbsp; /* 默认大屏（1440px以上）：一行展示 5 列 */<br />
&nbsp; .grid-list {<br />
&nbsp; &nbsp; display: grid;<br />
&nbsp; &nbsp; grid-template-columns: repeat(5, 1fr);<br />
&nbsp; &nbsp; gap: 20px;<br />
&nbsp; }<br />
&nbsp;&nbsp;<br />
&nbsp; /* 响应式断点：当屏幕小于等于 1440px 时，自动降级为一行 4 列 */<br />
&nbsp; @media screen and (max-width: 1440px) {<br />
&nbsp; &nbsp; .grid-list {<br />
&nbsp; &nbsp; &nbsp; grid-template-columns: repeat(4, 1fr);<br />
&nbsp; &nbsp; }<br />
&nbsp; }<br />
&nbsp; ```<br />
<br />
## 3. 文本字体 Font-size（严格死扣 `px`）<br />
- **铁律**：PC 端所有文本一律使用 `px` 单位，确保大屏和小屏下的文字绝对清晰、可读。<br />
- **字号阶梯规范**：<br />
&nbsp; - 视觉大标题：`28px` - `40px`。<br />
&nbsp; - 核心业务标题 / 卡片标题：`18px` - `22px`。<br />
&nbsp; - 标准正文 / 商品描述：`14px`（PC 端核心黄金字号，不可随版心缩小而缩小）。<br />
&nbsp; - 次要辅助 / 灰色提示：`12px`。<br />
- **行高 Line-height**：一律使用无单位数字（如 `line-height: 1.5;` 或 `1.6;`）。<br />
<br />
## 4. 边框与微型 UI 元素（严格死扣 `px`）<br />
- **细边框**：一律硬编码 `border: 1px solid #E5E5E5;`。<br />
- **UI 圆角**：外层大卡片使用 `12px` 或 `16px`，内部按钮和输入框使用 `6px` 或 `8px`。<br />
- **小图标/小操作按钮**：如关闭按钮、悬浮返回顶部按钮等，尺寸严格固定 `px`（如 `40px * 40px`），不允许随屏幕尺寸发生任何大小形变。<br />
<br />
---<br />
<br />
# 代码生成与输出指令<br />
当我要求你生成 HTML/CSS/SCSS 或是 React/Vue 组件时：<br />
1. 请严格围绕上面的 `.container` 动态双版心规则建立骨架。<br />
2. 遇到网格、多列卡片时，优先编写响应式断点（`@media`）或流式弹性布局，确保在 1440 宽度和 1200 宽度下都能完美平铺且不溢出。<br />
3. 杜绝任何 `rem`、`vw`、`vh` 在字体和局部组件上的滥用，保持代码纯正的 PC 端弹性流式体验。<br />
<div style="white-space:nowrap;">
	<br />
</div>
<div style="white-space:nowrap;">
	<br />
</div>]]></description>
	<pubDate>Mon, 03 Aug 2026 01:46:01 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/aigc/215.html</guid>

</item>
<item>
	<title>AI C端 H5端样式rules</title>
	<link>https://www.skaterboy.cn/aigc/214.html</link>
	<description><![CDATA[# 角色与上下文定义<br />
你是一名资深的前端开发工程师，专注于高性能、像素级还原的移动端 H5（C端业务）开发。你编写的 CSS/SCSS 代码必须是生产就绪的、干净的，并且严格遵循以下移动端自适应混合单位规范。<br />
<br />
# 项目布局与设计稿规范<br />
- **设计稿基准宽度**：750px（标准移动端设计稿）。<br />
- **页面最大宽度限制**：750px（必须限制大屏下的无限放大，以完美适配 iPad、折叠屏及 PC 端浏览器）。<br />
- **核心适配策略**：混合单位适配策略（Rem + Px + Flexbox）。**坚决不能全盘使用 rem，严禁无脑进行全盘等比缩放**。<br />
<br />
---<br />
<br />
# 严格的单位转换与使用规则<br />
<br />
## 1. 容器布局与宽高间距（推荐使用 `rem` 或 `vw`）<br />
- **适用场景**：块级元素的宽度/高度、图片容器、较大的内外边距（Margin/Padding）、以及必须随屏幕等比缩放的元素间距。<br />
- **换算公式（基于 750px 设计稿）**：设定根元素基准值 `1rem = 100px`（即设计稿上的尺寸直接除以 100）。<br />
&nbsp; - *示例*：设计稿中一个卡片 `width: 710px`，`height: 200px` -&gt; 代码编写为 `width: 7.1rem; height: 2rem;`。<br />
- **布局首选 Flexbox**：多栏网格布局优先使用标准的 Flexbox（如 `flex: 1`，`justify-content: space-between`），避免为每一列硬编码计算精确的 `rem` 宽度。<br />
<br />
## 2. 文本字体大小 Font-size（严格隔离与比例防御规则）<br />
为了绝对防止在大屏/折叠屏下出现“标题无限变大、正文维持原样”导致的视觉脱节（大头娃娃）灾难，字号必须严格遵循以下**场景分治与上下文隔离铁律**：<br />
<br />
- **A类：独立视觉氛围大字（允许使用 `rem`）**<br />
&nbsp; - *适用场景*：仅限独立于核心内容卡片之外的、与背景或 Banner 融为一体的运营大标题、大促利益点数字、全屏倒计时大字。<br />
&nbsp; - *换算公式*：直接除以 100 写成 rem（如 `36px` 写成 `0.36rem`）。<br />
- **B类：组件内部标题与信息正文（必须严格固定使用 `px`）**<br />
&nbsp; - *适用场景*：所有商品卡片、列表项、弹窗、表单、按钮内部的**所有文字**（包含组件内的标题 Title 和描述 Body）。<br />
&nbsp; - *铁律*：**严禁在同一个组件内混合使用 rem 标题和 px 正文**。组件内的标题和正文必须统一写死 `px`（例如：卡片标题 `16px`，正文 `14px`，辅助提示 `12px`）。确保在所有手机上比例绝对稳定，在大屏下展现更多内容，在小屏下清晰可读。<br />
- **行高 Line-height**：一律使用无单位的数字（例如 `line-height: 1.5;`），严禁携带单位，防止动态缩放或混用单位时引发文本重叠或爆框。<br />
<br />
## 3. 边框与分割线 Border（严格死扣 `px`）<br />
- **铁律**：绝不允许在 `border-width` 或分割线尺寸上使用 `rem` 或 `vw`。<br />
- **普通边框**：一律硬编码编写 `border: 1px solid #xxx;`。<br />
- **高清屏 0.5px 细边框**：若设计稿在高清屏上要求极致纤细的线条，必须使用伪元素配合 `transform` 缩放实现：<br />
&nbsp; ```scss<br />
&nbsp; .hairline-border {<br />
&nbsp; &nbsp; position: relative;<br />
&nbsp; &nbsp; &amp;::after {<br />
&nbsp; &nbsp; &nbsp; content: "";<br />
&nbsp; &nbsp; &nbsp; position: absolute;<br />
&nbsp; &nbsp; &nbsp; top: 0; left: 0;<br />
&nbsp; &nbsp; &nbsp; width: 200%; height: 200%;<br />
&nbsp; &nbsp; &nbsp; border: 1px solid #E5E5E5;<br />
&nbsp; &nbsp; &nbsp; transform: scale(0.5);<br />
&nbsp; &nbsp; &nbsp; transform-origin: left top;<br />
&nbsp; &nbsp; &nbsp; pointer-events: none;<br />
&nbsp; &nbsp; &nbsp; box-sizing: border-box;<br />
&nbsp; &nbsp; }<br />
&nbsp; }<br />
&nbsp; ```<br />
<br />
## 4. UI 图标与微型交互元素（严格死扣 `px`）<br />
- **适用场景**：关闭/返回按钮的矢量图标、通用的微型 Checkbox、系统级状态小图标。<br />
- **规则**：尺寸应保持固定 `px`（例如 `width: 24px; height: 24px;`）。在大屏设备上放大这些小图标会使其失去精致感，或导致点击热区异常变大。<br />
<br />
---<br />
<br />
# 全局基础 CSS 架构（请以此为前置基准）<br />
在为你要求生成的任何组件或页面编写样式时，请默认以下全局样式已生效：<br />
<br />
```css<br />
html {<br />
&nbsp; /* 在 750px 屏幕下，动态设置 1rem = 100px */<br />
&nbsp; font-size: 13.33333vw;&nbsp;<br />
}<br />
<br />
@media screen and (min-width: 750px) {<br />
&nbsp; html {<br />
&nbsp; &nbsp; /* 当屏幕超过 750px（如 iPad/PC），锁定根字体大小 */<br />
&nbsp; &nbsp; font-size: 100px !important;&nbsp;<br />
&nbsp; }<br />
&nbsp; body {<br />
&nbsp; &nbsp; max-width: 750px;<br />
&nbsp; &nbsp; margin: 0 auto;<br />
&nbsp; &nbsp; position: relative;<br />
&nbsp; &nbsp; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* PC端居中容器阴影 */<br />
&nbsp; }<br />
&nbsp; /* 防御全屏固定定位元素，使其不会在大屏下飘到屏幕最边缘 */<br />
&nbsp; .fixed-bottom-bar {<br />
&nbsp; &nbsp; max-width: 750px;<br />
&nbsp; &nbsp; left: 50% !important;<br />
&nbsp; &nbsp; transform: translateX(-50%);<br />
&nbsp; }<br />
}<br />
<br />
body {<br />
&nbsp; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;<br />
&nbsp; -webkit-font-smoothing: antialiased;<br />
&nbsp; /* 核心无障碍防御：防止 iOS/安卓系统用户人为放大系统字体时强行撑破 H5 布局 */<br />
&nbsp; -webkit-text-size-adjust: 100% !important;&nbsp;<br />
}<br />
```<br />
<br />
---<br />
<br />
# 代码生成与输出指令<br />
当我要求你生成 HTML/CSS/SCSS 或是 React/Vue 组件时：<br />
1. 请仔细解析我给出的设计规范和业务描述。<br />
2. 严格遵循混合单位与字体场景分治策略：独立氛围大字用 `rem`；任何卡片/列表组件内部的内容（无论是标题还是正文）一律写死 `px`，以此防御比例失调。<br />
3. 确保输出的代码现代、优雅、无冗余，并且对移动端极端环境（大屏、小屏、折叠屏、PC端打开）具备极高的防御性。<br />
<div style="white-space:nowrap;">
	<br />
</div>
<div style="white-space:nowrap;">
	<br />
</div>]]></description>
	<pubDate>Mon, 03 Aug 2026 01:44:04 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/aigc/214.html</guid>

</item>
<item>
	<title>AI使用的一些感悟</title>
	<link>https://www.skaterboy.cn/aigc/213.html</link>
	<description><![CDATA[<p>
	最近使用了一下cursor，感觉以后会不会使用ai对程序员来说是两个维度了。&nbsp;&nbsp;
</p>
<p>
	举例：
</p>
<p>
	我在cursor上输入使用uni-app搭建一个博客，可以部署至H5，安卓，小程序。 博客包含首页和文章详情页及我的。 带登陆和查询功能。 于是执行之后效果如下。
</p>
<p>
	<img src="https://www.skaterboy.cn/content/uploadfile/202511/4a471764223177.png" width="352" height="726" alt="" /><img src="https://www.skaterboy.cn/content/uploadfile/202511/17ce1764223262.png" width="392" height="729" alt="" /><img src="https://www.skaterboy.cn/content/uploadfile/202511/99521764223288.png" width="371" height="742" alt="" /><img src="https://www.skaterboy.cn/content/uploadfile/202511/fa0e1764223308.png" width="455" height="734" alt="" /><img src="https://www.skaterboy.cn/content/uploadfile/202511/7da41764223313.png" width="397" height="733" alt="" /><img src="https://www.skaterboy.cn/content/uploadfile/202511/cd131764223398.png" width="436" height="848" alt="" /> 
</p>
<p>
	<br />
</p>
<p>
	<br />
</p>
<p>
	一个完整的博客项目就这样完成了。 你可以针对具体的页面进行描述你想要的效果，也可以上传UI图来让AI根据AI图输出， 即使有些改动，工作量也很小。 可以说基本上完全淘汰掉了那些重复性没有难度的活.
</p>
<p>
	减少工作量是一点，还一点是它可以让你去往你之前不曾涉足的领域， 比如作为web开发，你没接触过应用开发并且想了解下flutter开发。 你可以使用它搭建helloworld =》 博客 =》 大型应用。而你可以根据项目来逐步了解。&nbsp;
</p>
<p>
	<br />
</p>]]></description>
	<pubDate>Thu, 27 Nov 2025 05:53:13 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/aigc/213.html</guid>

</item>
<item>
	<title>js数组拷贝</title>
	<link>https://www.skaterboy.cn/js/212.html</link>
	<description><![CDATA[<p>
	&nbsp;&nbsp;&nbsp;&nbsp;所谓深浅拷贝是针对引用类型的区别。 基础类型是值传递，存储在栈中。 引用类型引用存储在栈中，值存储在堆中。所以基本类型的值是不可改变的，使用赋值操作符时其实是生成一个新的基础类型。 而引用类型使用赋值时，只是重新生成了栈中的引用，而引用对于的值还是相同的。
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所以引用类型拷贝需要将属性进行递归遍历，直至属性为基础类型时进行拷贝。 否则就是浅拷贝，浅拷贝时修改新对象的值会同时修改到旧对象的值。&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp; &nbsp;综上所述，浅拷贝很简单，直接{...oldObj}。 或者 Object.assign({}, oldObj) 等方法即可。而深拷贝则需要递归属性进行判断。 (有个简便方法，即JSON.stringify()。 此方法将对象转为了字符串进行赋值，所以也能实现深拷贝。但是转为字符串时 function ，undefined的属性会丢失)
</p>
<p>
	1、为基础类型，直接进行赋值操作。
</p>
<p>
	2、为对象，进行递归调用判断
</p>
<p>
	3、为数组，如果数组中为基础类型，使用slice生成一个新对象，或者解构运算符[...arr]。 如果数组含有引用类型则需要遍历属性至基础类型进行操作。
</p>
<p>
	4、 为set， 直接new Set ([..oldSet])即可。
</p>
<p>
	<span style="text-wrap:wrap;">5、 为set， 直接new Map([..oldMap])即可。</span> 
</p>
<p>
	6、为<span style="text-wrap:wrap;">symbol， 为<span style="text-wrap:wrap;">symbol 进行1的操作即可。前提是访问到<span style="text-wrap:wrap;">symbol，可以使用Object.getOwnPropertySymbols()访问对象的symbol。然后遍历赋值给</span></span></span>克隆对象
</p>
<p>
	7、函数，可以考虑转成字符串之后进行处理
</p>
<p>
	8 、其他等等 可以根据实际需求进行扩展相应方法。&nbsp; &nbsp;
</p>
<p>
	示例代码如下：&nbsp;&nbsp;
</p>
<pre class="prettyprint lang-js linenums">const cloneBase = (newData, oldValue, key) =&gt; {
 newData[key] = oldValue;
}
cont cloneArr = (newData, oldValue, key) =&gt; {
 // 这里假定数组内部只有基础类型
 newData[key] =oldValue.slice(0);
}
const cloneSet = (newData, oldValue, key) =&gt; {
 newData[key] = new Set([...oldValue]);
}
const cloneMap = (newData, oldValue, key) =&gt; {
 newData[key] = new Map([...oldValue]);
}
// 其他依次按照步骤写相应的方法

function deepCopy(data) =&gt; {
 if (typeof !== "object") {
  // 如果为基础类型则直接返回基础类型、这里没有处理symbol
  return data;
 }
 let new Data = {};
 Object.keys(data).forEach(key =&gt; {
   const curr = data[key];
  // 如果为基础类型
  if (typeof curr !== "object") {
    cloneBase(newData, curr, key);
   }
  // 其他依次调用判断方法即可，最后如果处理对对象进行递归调用处理
  else {
   newData[key] = deepCopy(curr);
  }
 });
  return new Data();
 }
</pre>]]></description>
	<pubDate>Sat, 16 Dec 2023 04:32:19 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/js/212.html</guid>

</item>
<item>
	<title>uni-app placeholder-class不生效</title>
	<link>https://www.skaterboy.cn/problem/209.html</link>
	<description><![CDATA[.vue中，placeholder-class样式如果写在 scoped 则会出现不生效的情况，这个时候需要将它移除scoped，或者用placeholder-style]]></description>
	<pubDate>Thu, 23 Mar 2023 08:45:08 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/problem/209.html</guid>

</item>
<item>
	<title>微信小程序自定义字体</title>
	<link>https://www.skaterboy.cn/problem/208.html</link>
	<description><![CDATA[<p>
	一、直接引用外部字体(需要外部cdn字体)
</p>
<p>
	&nbsp;1. app.scss
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>
<pre class="prettyprint lang-js linenums">/* 自定义字体 */
@font-face {
  font-family: 'D-DIN';
  src: url("https://speedship-prod.oss-cn-shenzhen.aliyuncs.com/wechat_fonts/D-DIN.otf");
}
@font-face {
  font-family: 'D-DIN-Bold';
  src: url("https://speedship-prod.oss-cn-shenzhen.aliyuncs.com/wechat_fonts/D-DIN-Bold.otf");
}</pre>
<p>
	<br />
</p>
<p>
	&nbsp;2. 引用界面
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;
</p>
<pre class="prettyprint lang-js linenums">.classname {
 font-family: D-DIN-Bold
}</pre>
<p>
	<br />
</p>
<p>
	二、app里面使用loadFace
</p>
<p>
<pre class="prettyprint lang-js linenums">wx.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success: console.log
})</pre>
</p>]]></description>
	<pubDate>Wed, 01 Mar 2023 02:49:37 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/problem/208.html</guid>

</item>
<item>
	<title>微信小程序自定义navigation bar</title>
	<link>https://www.skaterboy.cn/problem/207.html</link>
	<description><![CDATA[<p>
	这里假设uniapp开发微信小程序
</p>
<p>
	一、app.vue
</p>
<p>
	<br />
</p>
<pre class="prettyprint lang-js linenums">globalData: {
      navBarHeight: 0, // 导航栏高度
      statusBarHeight: 0 // 状态高度
}, // 全局变量

onLaunch: function() {
  console.log("App Launch");
  let self = this;
  // 计算动态高度
  uni.getSystemInfo({
  success: function(e) {
     // navigationbar高度等于状态栏高度加自定义导航部分高度
     // 状态栏高度是e.statusBarHeight
    //导航栏部分高度有的方案是根据胶囊的边距再加胶囊的高度
    // 有的说状态栏高度加44px，(有的说安卓和ios 分别是44 和 48 )
          const navBarHeight = e.statusBarHeight + 44;
          self.globalData.navBarHeight = navBarHeight;
          self.globalData.statusBarHeight = e.statusBarHeight;
          uni.setStorageSync('statusBarHeight', navBarHeight);
         uni.setStorageSync('statusBarHeight', navBarHeight);
  }
})</pre>
<pre class="prettyprint lang-js linenums"></pre>
<pre class="prettyprint lang-js linenums"></pre>
<pre class="prettyprint lang-js linenums">二、navigationBar</pre>
<pre class="prettyprint lang-js linenums">

<pre class="prettyprint lang-js linenums">&lt;template&gt;
  &lt;view class="navigation-bar-wrapper" :style="{height: navBarHeight + 'px', paddingTop: statusBarHeight + 'px'}"&gt;
    &lt;view class="_back-btn" @tap="back"&gt;&lt;/view&gt;
    &lt;slot&gt;&lt;/slot&gt;
  &lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
var app = getApp();
export default {
  name: "uni-navigation-bar",
  data() {
    return {
      navBarHeight: app.globalData.navBarHeight,
      statusBarHeight: app.globalData.statusBarHeight,
    }
  },
  methods: {
    back() {
      this.$emit('back');
    }
  }
}
&lt;/script&gt;</pre>
<br />
</pre>
<pre class="prettyprint lang-js linenums">三、引用地方</pre>
<pre class="prettyprint lang-js linenums">

<pre class="prettyprint lang-js linenums">&lt;uniNavigationBar @back="onBack"&gt;
      &lt;view class="nav-bar-wrapper"&gt;
        这里是导航栏
      &lt;/view&gt;
    &lt;/uniNavigationBar&gt;</pre>
<br />
</pre>
<p>
	<br />
</p>]]></description>
	<pubDate>Wed, 01 Mar 2023 02:39:00 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/problem/207.html</guid>

</item>
<item>
	<title>知行合一到底有多难</title>
	<link>https://www.skaterboy.cn/note/206.html</link>
	<description><![CDATA[<p>
	张三说世界上最远的距离是说到和做到， 现在对这句话深有体会， 感觉现在做啥都是三天打鱼两天晒网。&nbsp;
</p>
<p>
	1. 学习， 列了完整的学习清单，但是学了几天就没动静了。
</p>
<p>
	2. 运动，坚持了一周夭折。
</p>
<p>
	3. 游戏，打卡了几天就AFK。
</p>
<p>
	回顾了一下，唯一坚持了一段时间的也就是最近的一个游戏了，坚持下去的原因竟然是因为找到了固定队，每天队友催着上线。 就离谱。曾经有好多的机会，都因为自己能力不足导致放弃了。&nbsp;
</p>]]></description>
	<pubDate>Wed, 15 Feb 2023 08:08:42 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/note/206.html</guid>

</item>
<item>
	<title>react-native 多语言切换</title>
	<link>https://www.skaterboy.cn/app/204.html</link>
	<description><![CDATA[<p>
	可以使用 i18n.js实现。&nbsp; I18N主js是配置语言。 setLanguage是更改语言 。 languageupdate是监听语言变化(比如监听语言变化进行setState)
</p>
<p>
	I18n
</p>
<p>
<pre class="prettyprint lang-js linenums">
/**
 * 多语言配置文件
 */
import I18n from "i18n-js";
// import * as RNLocalize from "react-native-localize";
import cn from './lang/cn';
import en from './lang/en';
import th from './lang/th';
import store from '../store/store';
import Map from "../config/Map";

// const locales = RNLocalize.getLocales();
// const systemLanguage = locales[0]?.languageCode;  // 用户系统偏好语言
const userLanguageSetting = store.getState().publicStore.userLanguageSetting;  // 用户手动设置语言
I18n.locale = userLanguageSetting;
// if (userLanguageSetting) {
//     I18n.locale = userLanguageSetting;
// } else if (systemLanguage &amp;&amp; Map.LANG_SETTING.includes(systemLanguage)) {
//     I18n.locale = systemLanguage;
// } else {
//     I18n.locale = 'en';  // 用户既没有设置，也没有获取到系统语言时，默认加载英语语言资源
// }

// 监听应用运行过程中语言的变化
store.subscribe(() =&gt; {
    const newUserLanguageSetting = store.getState().publicStore.userLanguageSetting;
    console.log('.....newUserLanguageSetting....', newUserLanguageSetting);
    console.log('.....userLanguageSetting....', I18n.locale);
    if (newUserLanguageSetting &amp;&amp; newUserLanguageSetting !== I18n.locale) {
        I18n.locale = newUserLanguageSetting;
    }
});

I18n.fallbacks = true;
I18n.translations = {
    zh: cn,
    en,
    th,
};

export default I18n;
// export { systemLanguage };
</pre>
</p>
<p>
	setLanguage.js&nbsp;
</p>
<p>
<pre class="prettyprint lang-js linenums">
/**
 * 设置语言界面
 */
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import {setLanguage} from "../store/publicStore/action";

class SetLanguage extends React.Component {
    constructor(props) {
        super(props);
    }
    render(): React.ReactNode {
        return (
            &lt;View&gt;
                &lt;TouchableOpacity onPress={() =&gt; {
                    this.props.setLanguage('en');
                }}&gt;
                    &lt;Text&gt;英文&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
                &lt;TouchableOpacity onPress={() =&gt; {
                    this.props.setLanguage('zh');
                }}&gt;
                    &lt;Text&gt;中文&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
                &lt;TouchableOpacity onPress={() =&gt; {
                    this.props.setLanguage('th');
                }}&gt;
                    &lt;Text&gt;泰文&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
        );
    }
}
const mapStateToProps = state =&gt; ({
    userLanguageSetting: state.publicStore.userLanguageSetting
});
const mapDispatchToProps = dispatch =&gt; ({
    setLanguage: lang =&gt; dispatch(setLanguage(lang))
});
export default connect(mapStateToProps, mapDispatchToProps)(SetLanguage);
</pre>
<pre class="prettyprint lang-js linenums">
</pre>
<pre class="prettyprint lang-js linenums">languageUpdate.js</pre>
<pre class="prettyprint lang-js linenums"><span style="font-family:&quot;">
<pre class="prettyprint lang-js linenums">import React, { useState, useEffect } from 'react';
import {View} from "react-native";
import store from '../store/store';
import I18n from './index';

const UseLanguageUpdate = ({onLanguageChangeCallBack, listenParamArr = []}) =&gt; {
    const [currentLanguageCode, setCurrentLanguageCode] = useState( I18n.locale);

    useEffect(() =&gt; {
        return store.subscribe(() =&gt; {
            const newUserLanguageSetting = store.getState().publicStore.userLanguageSetting;
            console.log('newUserLanguageSetting....', newUserLanguageSetting);
            console.log('currentLanguageCode....', currentLanguageCode);
            if (newUserLanguageSetting &amp;&amp; newUserLanguageSetting !== currentLanguageCode) {
                setCurrentLanguageCode(newUserLanguageSetting);
                if (onLanguageChangeCallBack) onLanguageChangeCallBack();
            }
        });
    }, [currentLanguageCode, ...listenParamArr]);
    return (
        &lt;View /&gt;
    )
};
export default UseLanguageUpdate;


</pre>
</span></pre>
</p>]]></description>
	<pubDate>Fri, 23 Oct 2020 03:46:34 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/app/204.html</guid>

</item>
<item>
	<title>app像素布局自适应不同屏幕手机</title>
	<link>https://www.skaterboy.cn/app/203.html</link>
	<description><![CDATA[<pre class="prettyprint lang-js linenums">import {
    Dimensions,
} from 'react-native';

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
//像素密度
export const DEFAULT_DENSITY = 2;
//px转换成dp
//以iphone6为基准,如果以其他尺寸为基准的话,请修改下面的defaultWidth和defaultHeight为对应尺寸即可. 以下为1倍图时
const defaultWidth = 375;
const defaultHeight = 667;
const w2 = defaultWidth / DEFAULT_DENSITY;
//px转换成dp
const h2 = defaultHeight / DEFAULT_DENSITY;

//缩放比例
const _scaleWidth = screenW / defaultWidth;
const _scaleHeight = screenH / defaultHeight;

/**
 * 屏幕适配,缩放size , 默认根据宽度适配，纵向也可以使用此方法
 * 横向的尺寸直接使用此方法
 * 如：width ,paddingHorizontal ,paddingLeft ,paddingRight ,marginHorizontal ,marginLeft ,marginRight
 * @param size 设计图的尺寸
 * @returns {number}
 */
export function scaleSize(size: Number) {
    return size * _scaleWidth;
}

/**
 * 屏幕适配 , 纵向的尺寸使用此方法应该会更趋近于设计稿
 * 如：height ,paddingVertical ,paddingTop ,paddingBottom ,marginVertical ,marginTop ,marginBottom
 * @param size 设计图的尺寸
 * @returns {number}
 */
export function scaleHeight(size: Number) {
    return size * _scaleHeight;
}


export function setSpText(size: Number) {
    let scaleWidth = screenW / w2;
    let scaleHeight = screenH / h2;
    let scale = Math.min(scaleWidth, scaleHeight);
    size = Math.round((size * scale + 0.5));

    return size / DEFAULT_DENSITY;
<p>
	}
</p>

<p>
	<br />

</p>

<p>
	宽高使用scaleSize进行转换，如&lt;view style={{width: scaleSize(100)}}&gt;&lt;/view&gt;。字体使用setSpText转换， 如&lt;Text style={{fontSize: setSpText(12)}}&gt;文本&lt;/Text&gt;
</p>
</pre>]]></description>
	<pubDate>Wed, 02 Sep 2020 07:06:19 +0000</pubDate>
	<author>阿蒙</author>
	<guid>https://www.skaterboy.cn/app/203.html</guid>

</item></channel>
</rss>