浏览器这种东西工程量很唬人，但是有了electron+webview我们就相当于只需要干组装的活就可以了，而且产品目标就是给自己玩，
成品的效果

😄本来想写成专业的技术博客，但是发现大家好像对那种密密麻麻，全是代码的技术博客不感兴趣，我就挑重点来写吧。

下载拦截功能

下载逻辑如果不做拦截处理的话，默认就是我们平常写web那种弹窗的方式，既然是浏览器肯定不能是那样的。
electron中可以监听BrowserWindow的页面下载事件，并把拿到的下载状态传给渲染线程，实现类似浏览器的下载器功能。

//这个global.WIN =   global.WIN = new BrowserWindow({ ...})

 global.WIN.webContents.session.on('will-download', (evt, item) => {

 //其他逻辑

       item.on('updated', (evt, state) => {

       //实时的下载进度传递给渲染线程

       })

 })

页面搜索功能

当时做这个功能的时候我就觉得完了，这个玩意看起来太麻烦了，还要有一个的功能这不是头皮发麻啊。

查资料和文档发现这个居然是webview内置的功能，瞬间压力小了很多，我们只需要出来ctrl+f的时候把搜索框弹出来这个UI就可以了，关键字变色和下一个都是内部已经实现好了的。

function toSearch() {

  let timer

  return () => {

    if (timer) {

      clearTimeout(timer)

    }



    timer = setTimeout(() => {

      if (keyword.value) {

        webviewRef.value.findInPage(keyword.value, { findNext: true })

      } else {

        webviewRef.value.stopFindInPage('clearSelection')

      }

    }, 200)

  }

}

  function closeSearch() {

  showSearch.value = false

  webviewRef.value.stopFindInPage('clearSelection')

}



function installFindPage(webview) {

  webviewRef.value = webview

  webviewRef.value.addEventListener('found-in-page', (e) => {

    current.value = e.result.activeMatchOrdinal

    total.value = e.result.matches

  })

}

当前标签页打开功能

就是因为chrome和edge这些浏览器每次使用的时候开非常多的标签，挤在一起，所以我想这个浏览器不能主动开标签，打开了一个标签后强制所有的标签都在当前标签覆盖。

app.on('web-contents-created', (event, contents) => {

  contents.setWindowOpenHandler((info) => {

    global.WIN?.webContents.send('webview-url-is-change')

    if (info.disposition === 'new-window') {

      return { action: 'allow' }

    } else {

      global.WIN?.webContents.send('webview-open-url', info.url)

      return { action: 'deny' }

    }

  })

})

渲染线程监听到webview-open-url后也就是tart="_blank"的情况，强制覆盖当前不打开新窗口

ipcRenderer.on('webview-open-url', (event, url) => {

  try {

    let reg = /http|https/g

    if (webviewRef.value && reg.test(url)) {

      webviewRef.value.src = url

    }

  } catch (err) {

    console.log(err)

  }

})

标签页切换功能

这里的切换是css的显示隐藏，借助了vue-router

这里我们看dom就能清晰的看出来。

地址栏功能

地址栏支持输入url直接访问链接、支持关键字直接打开收藏的网站、还支持关键字搜索。优先级1打开收藏的网页 2访问网站 3关键字搜索

function toSearch(keyword) {

    if (`${keyword}`.length === 0) {

      return false

    }

    // app搜索

    if (`${keyword}`.length < 20) {

      let item = null

      const list = [...deskList.value, ...ALL_DATA]

      for (let i = 0; i < list.length; i++) {

        if (

          list[i].title.toUpperCase().search(keyword.toUpperCase()) !== -1 &&

          list[i].type !== 'mini-component'

        ) {

          item = list[i]

          break

        }

      }

      if (item) {

        goApp(item)

        return false

      }

    }



    // 网页访问

    let url

    if (isUrl(keyword)) {

      if (!/^https?:\/\//i.test(keyword)) {

        url = 'http://' + keyword

      } else {

        url = keyword

      }

      goAppNewTab(url)

      return false

    } else {

      // 关键字搜索

      let searchEngine = localStorage.getItem('searchEngine')

      searchEngine = searchEngine || CONFIG.searchEngine

      url = searchEngine + keyword



      if (!router.hasRoute('search')) {

        router.addRoute({

          name: 'search',

          path: '/search',

          meta: {

            title: '搜索',

            color: 'var(--app-icon-bg)',

            icon: 'search.svg',

            size: 1

          },

          component: WebView

        })

        keepAliveInclude.value.push('search')

      }



      router.push({

        path: '/search',

        query: { url }

      })



      setTimeout(() => {

        Bus.$emit('toSearch', url)

      }, 20)

    }

  }

桌面图标任意位置拖动

这个问题困扰了我很久，因为它不像电脑桌面大小是固定的，浏览器可以全屏也可以小窗口，如果最开始是大窗口然后拖成小窗口，那么图标就看不到了。后来想到我干脆给个中间区域固定大小，就可以解决这个问题了。因为固定大小出来起来就方便多了。这个桌面是上下两层

//背景格子

    <div v-show="typeActive === 'me'" class="bg-boxs">

      <div

        v-for="(item, i) in 224"  //这里有点不讲究了直接写死了

        :key="item"

        class="bg-box"

        @dragenter="enter($event, { x: (i % 14) + 1, y: Math.floor(i / 14) + 1 })"

        @dragover="over($event)"

        @dragleave="leave($event)"

        @drop="drop($event)"

      ></div>

    </div>

 // 桌面层

 // ...

import { ref, computed } from 'vue'

import useDesk from '@/store/deskList'

import { storeToRefs } from 'pinia'



export default function useDrag() {

  const dragging = ref(null)

  const currentTarget = ref()

  const desk = useDesk()



  const { deskList } = storeToRefs(desk)

  const { setDeskList, updateDeskData } = desk



  function start(e, item) {

    e.target.classList.add('dragging')

    e.dataTransfer.effectAllowed = 'move'

    dragging.value = item

    currentTarget.value = e

    console.log('开始')

  }

  let timer2

  function end(e) {

    dragging.value = null

    e.target.classList.remove('dragging')

    setDeskList(deskList.value)



    if (timer2) {

      clearTimeout(timer2)

    }

    timer2 = setTimeout(() => {

      updateDeskData()

    }, 2000)

  }

  function over(e) {

    e.preventDefault()

  }



  let timer

  function enter(e, item) {

    e.dataTransfer.effectAllowed = 'move'

    if (timer) {

      clearTimeout(timer)

    }



    timer = setTimeout(() => {

      if (item?.x) {

        dragging.value.x = item.x

        dragging.value.y = item.y

      }

    }, 100)

  }

  function leave(e) {}



  function drop(e) {

    e.preventDefault()

  }



  return { start, end, over, enter, leave, drop }

}

东西太多了就先介绍这些了

安装包地址

github.com/jddk/aweb-b…

也可以到官网后aweb123.com 如何进入微软商店下载，mac版本因为文件大于100mb没有传上去所以暂时还用不了。

上个月的时候，我被公司裁掉了，陆陆续续找了 1 个月的工作，没有拿到 1 份 Offer，从网上看着各式各样的消息和自己的亲身体会，原来对于像我这样的普通打工族，找工作是如此的难。我相信，任何时候只要实力强，都能有满意的工作，但我不知道，能达到那样的水平还需要多久。

本人是前端，工作 6 年，期间经历过 4 家公司，前两份是外包，后面两份都是领大礼包走的，回想起来，职业生涯也是够惨的。虽然说惨，但是最近领的这一份大礼包个人认为还是值得，工作很难待下去，也没有任何成长，继续待着也是慢性死亡。

这几天我每天都会在 BOSS 上面投十几家公司，能回复非常少，邀请面试的就更少了。外包公司倒是挺多的，而我是从那个火坑里出来的，是不会选择再进去的。于是，我需要做好打持久战的准备，说不定不做程序员了。

我的房子 7 月底就要到期了，我必须要马上做决定，杭州的行情对我来说很不友好，短期内我大概率找不到工作。基于对未来的悲观考虑，我不想把过多的钱花费在房租上面，所以希望就近找一个三线城市，我搜了一下嘉兴，整租 95 平左右的房子只需要 1200 块钱，还是民用水电，思前想后，打算移居到那里嘉兴去。

一方面，我想尝试一下在三线城市生活是一种什么感觉。另一方面，这可以省钱，如果一个月的房租是 1000，民用水电，一个月的开销只要 2500 块。我搜索了一下货拉拉，从我的位置运到嘉兴，需要花费 600 块钱，这个价格也是可以接受的。思考了这些，我觉得是时候离开待了 5 年的杭州。

未来要到哪里去呢，目前可能的选择是上海。我还得想想未来能做什么，我想学一门手艺傍身，比如修理电器、炒菜。毕竟骑手行业太拥挤了，估计也不是长久之计。

房租降下来了，等我把行李都安置妥当，我打算回老家待一段时间。自从上大学以来，很少有长时间待在家里的时候，眼看父母年纪也越来越大了，很想多陪陪他们。如果进入正常的工作节奏，想做到这样还是会受到局限，这次也算是一个弥补的机会。

被裁也是一件好事，可以让我提前考虑一下未来的出路。

这段时间我想把时间用来专门学英语，再自己做几个项目，学英语的目的是为了 35 岁之后做打算，做项目是为了写到简历上面，并且个人觉得自己需要多做一个项目，这样自己才能成长到下一个级别。虽然不知道收益怎么样，但是我想尝试一下。人还活着，有精力，就还是瞎折腾一下。

离职没敢和家里说，说了估计要担心死了，反正是年轻人，有事就先自己扛一扛，我前几天把我的行李寄回去了一批，我妈问我，怎么，寄东西回来了？我回答说要搬家了。本来也想找机会开口说自己离职了，她说，这次搬家也别离公司远了，我也把话憋了进去，只好说“没事的，放心就行”。我自己没觉得离职有什么，正常的起起落落，只是觉得父母可能会过度的担心。

如果做最坏的打算，那就是回去种地，应该这几年还饿不死。有还没离职的同学，建议还是继续苟着。希望社会的低谷期早点过去，希望我们都能有美好的未来。

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

首先明确一点，localStorage是同步的

🥝 一、首先为什么会有这样的问题

localStorage 是 Web Storage API 的一部分，它提供了一种存储键值对的机制。localStorage 的数据是持久存储在用户的硬盘上的，而不是内存。这意味着即使用户关闭浏览器或电脑，localStorage 中的数据也不会丢失，除非主动清除浏览器缓存或者使用代码删除。

当你通过 JavaScript 访问 localStorage 时，浏览器会从硬盘中读取数据或向硬盘写入数据。然而，在读写操作期间，数据可能会被暂时存放在内存中，以提高处理速度。但主要的特点是它的持久性，以及它不依赖于会话的持续性。

🍉 二、硬盘不是io设备吗？io读取不都是异步的吗？

是的，硬盘确实是一个 IO 设备，而大部分与硬盘相关的操作系统级IO操作确实是异步进行的，以避免阻塞进程。不过，在 Web 浏览器环境中，localStorage 的API是设计为同步的，即使底层的硬盘读写操作有着IO的特性。

js代码在访问 localStorage 时，浏览器提供的API接口通常会处于js执行线程上下文中直接调用。这意味着尽管硬盘是IO设备，当一个js执行流程访问 localStorage 时，它将同步地等待数据读取或写入完成，该过程中js执行线程会阻塞。

这种同步API设计意味着开发者在操作 localStorage 时不需要考虑回调函数或者Promise等异步处理模式，可以按照同步代码的方式来编写。不过，这也意味着如果涉及较多数据的读写操作时，可能对性能产生负面影响，特别是在主线程上，因为它会阻塞UI的更新和其他js的执行。

🍑 三、完整操作流程

localStorage 实现同步存储的方式就是阻塞 JavaScript 的执行，直到数据的读取或者写入操作完成。这种同步操作的实现可以简单概述如下：

在同步的 localStorage 操作期间，由于 js 的单线程性质，整个线程会阻塞，即不会执行其他任何js代码，也不会进行任何渲染操作，直到 localStorage 调用返回。

🍒 四、localStorage限制容量都是因为同步会阻塞的原因吗？

🍐 五、那indexDB会造成滥用吗？

虽然它们提供了更大的存储空间和更丰富的功能，但确实潜在地也可能被滥用。但是与相比 localStorage 增加了一些特性用来降低被滥用的风险：

🤖 六、一个例子简单测试一下

其实也不用测，平时写的时候你也没用异步的方式写localStorage吧，我们这里简单写个例子

html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Documenttitle>

head>



<body>

    <script>

        const testLocalStorage = () => {

            console.log("==========> 设置localStorage之前");

            localStorage.setItem('testLocalStorage', '我是同步的');

            console.log("==========> 获取localStorage之前");

            console.log('=========获取localStorage', localStorage.getItem('testLocalStorage'))

            console.log("==========> 获取localStorage之后");

        }



        testLocalStorage()

    script>

body>



html>

前言

做gis的同学肯定知道等时圈这个东西，即：在一定时间内通过某种出行方式能到达的范围

通过一些计算，我们可以做一些好玩的事情，比如上图通过调用mapbox等时圈接口，计算在蓝色点位附近骑车17分钟可以到达哪些公司或学校。

可能由于国内交通情况更为复杂，做实时性较差的等时圈意义不大，所以高德地图提供了比较稳当的API：公交地铁到达圈，其概念和等时圈类似，你可以选择地铁或公交出行，或者两者兼可，高德接口将计算出可达范围。

高德公交到达圈的好玩应用

用了很久的高德，发现这个功能好像没有被很好的应用，其实高德早在1.4的API中就提供了此功能，最近正好要换个房子，突然想到这个东西正好可以拿来做一个很棒的辅助。

由于我跟我对象上班的地方离得比较远，所以找个折中的地方租房是是很重要的，我准备查询到两个到达圈后，再计算一下重合部分，在重合部分找房，就准确多了。

使用AMap.ArrivalRange画出到达圈

首先我做了一个简单的页面

左上角的面板用来设置参数，可选地铁+公交、地铁、公交三种方式，出行耗时最大支持60分钟（超过了接口会报错），位置需要传入经纬度。

初始化地图的步骤就不用说了，我讲一下这个小应用的使用逻辑。

首先，点击地图时，拾取该位置的经纬度，并通过逆地理接口获取到位置文本

function handleMapClick(e: any) {

  if (!e.lnglat) return

  if (currPositionList.value.length >= 2) {

    autolog.log("最多添加 2 个位置", 'error') // 你不会想三个人一起住吧？

    return

  }

  var lnglat = e.lnglat;

  geocoder.getAddress(lnglat, (status: string, result: {

    regeocode: any; info: string;

  }) => {

    if (status === "complete" && result.info === "OK") {

      currPositionList.value.push({ name: result.regeocode.formattedAddress, lnglat: [lnglat.lng, lnglat.lat] })

    }

  });

}

可以看到，我把点选的位置信息，暂时存放到了currPositionList里面，比如你在西二旗上班，而你女朋友在国贸，则点选后效果是这样的

左侧面板新增了两个位置，点击查询时，我将依次查询这两个到达圈，并渲染到地图上

function getArriveRange() {

  let loopCount = 0

  for (let item of currPositionList.value) {

    arrivalRange.search(item.lnglat, currTime.value, (_status: any, result: { bounds: any; }) => {

      map.remove(polygons);

      if (!result.bounds) return

      let currPolygons = []

      loopCount++

      for (let item of result.bounds) {

        let polygon = new AMap.Polygon(polygonStyle[`normal${loopCount}` as "normal1" | "normal2"]);

        polygon.setPath(item);

        currPolygons.push(polygon)

      }

      map.add(currPolygons);

      polygons.push({

        lnglat: item.lnglat,

        polygon: currPolygons,

        bounds: result.bounds

      })

      if (loopCount === currPositionList.value.length) {

        map.setFitView();

      }

    }, { policy: currStrategy.value });

  }

}

由于接口调用方式是以回调函数的形式返回的，所以我这里记录了一下回调次数，当次数满足后，再去调整视角。这段逻辑运行之后，将是如下结果：

很遗憾，你和你的女朋友，下班后的一个小时内见不成面了，这意味着，如果找一个折中的地方租房，你们上班单程通勤，无论如何都超过一个小时了，如果想尽量接近一个小时，那么看下两者的交汇处

大钟寺地铁站将会是个很好的选择。

这样仍需要我们手动去观察，那么能不能算一下两者的交集呢？

在高德地图中使用 turf.js 计算多多边形交集

在上面提到的getArriveRange函数中，我新增了这样的逻辑

      if (loopCount === currPositionList.value.length) {

        let poly1 = turf.multiPolygon(toNumber(polygons[0].bounds));

        let poly2 = turf.multiPolygon(toNumber(polygons[1].bounds));

        var intersection = turf.intersect(turf.featureCollection([poly1, poly2]));

        if (intersection) {

          let geojson = new AMap.GeoJSON({

            geoJSON: {

              type: "FeatureCollection",

              features: [intersection]

            },

            getPolygon: (_: any, lnglats: any) => {

              return new AMap.Polygon({

                path: lnglats,

                ...polygonStyle.overlap

              });

            }

          });

          polygons.push({

            lnglat: [0, 0],

            polygon: geojson,

            bounds: intersection.geometry.coordinates

          })

          map.add(geojson);

        } else {

          autolog.log("暂无交集，请自行查找", 'error')

        }

        map.setFitView();

      }

由于高德地图到达圈获取到的经纬度是字符串，放到 turf 里面会报错，所以这里写了一个简单的递归，将多维数组所有的数据都转化为数字。

// 递归的将多维数组内的字符串转为数字

function toNumber(arr: any) {

  return arr.map((item: any) => {

    if (Array.isArray(item)) {

      return toNumber(item)

    } else {

      return Number(item)

    }

  })

}

使用turf.multiPolygon将获取到的多维数组转化为标准的 geojson 格式，以便于 turf 处理，在turf7.x中，turf.intersect的用法稍有改变，需要turf.featureCollection([poly1, poly2])作为参数传入。

这一步操作 turf 将计算并返回两个多多边形的交集intersection(geojson)，但是在高德地图API2.0中，直接传入这个geojson会报错(1.4不会)，看了下源码，发现高德有一个操作是直接取第 0 个features,导致它识别不了这种格式的数据，所以我们手动处理下，即：

          let geojson = new AMap.GeoJSON({

            geoJSON: {

              type: "FeatureCollection",

              features: [intersection]

            },

            getPolygon: (_: any, lnglats: any) => {

              return new AMap.Polygon({

                path: lnglats,

                ...polygonStyle.overlap

              });

            }

          });

这样，高德就可以正确渲染这个数据了，这里需要注意的是，geojson 虽然也是 AMap.Polygon 构造的，但是需要一个特殊参数：path，没有的话，也不会报错，但是渲染不出来。

渲染完成后是这样的：

使用绿色代表重合部分，说明在这之中找房都是可以的。

通过 AMap.PlaceSearch 搜索交集区域的小区

高德提供了通过多边形区域搜索POI的接口

         placeSearch = new AMap.PlaceSearch({ //构造地点查询类

            pageSize: 5, // 单页显示结果条数

            pageIndex: 1, // 页码

            map: map, // 展现结果的地图实例

            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围

          });

          placeSearch.searchInBounds('小区', intersection.geometry.coordinates);

效果如上图所示，这样就可以轻松租房啦！

但是由于此接口是 get 请求，如果交集区域过大，会超出 get 请求长度限制：

结语

这个就叫产品思维，一个简单的API可以延伸出很多有趣的应用。

此仓库已在 github 开源，地址：

github.com/LarryZhu-de…

番外

高德云镜（高德云镜三维重建平台）目前已向企业和政府开放使用（暂未对个人开发者开放）

在web端，高德开发了 Cesium 插件用作展示，但目前来看要求配置过高

• CesiumJS引擎：CesiumJS v1.117+（建议）


• 浏览器：Chrome v126+（建议）


• 显卡：16GB显存以上独立显卡，推荐 NVDIA RTX 4090


• CPU：2.5 GHz 以上（建议）


• 内存：32GB 以上（建议）

看起来类似谷歌地球的全量城市建模。

官网：yunjing.amap.com/#/

开发文档：yunjing.amap.com/#/docs

认知迭代

回顾过去改革开放以来，那些赚钱比较多的，基本都是跟对了政策的方向，吃到了由此带来的福利，比如90年代那波做外贸的，2000年后做房地产和互联网的。

在快速发展的当今时代，国家政策成为引导社会发展的重要指南针。对于个人而言，紧跟国家政策不仅是明智的选择，更是实现自身价值和梦想的关键。

国家政策代表了国家的意志和方向，它汇集了众多专家的智慧和经验，经过深思熟虑后形成。

紧跟国家政策还可以为我们提供更多的机遇和资源。国家为了推动某项政策的实施，往往会投入大量的人力、物力和财力。这意味着我们只要紧跟国家政策，就有可能获得更多的支持和帮助。

观念改变命运，思路决定出路。要想人生总富有，跟着国家政策走。要想人生总辉煌，不同时期改改行！

昨日回顾

锻炼上，昨晚先带着儿子做了蹲下起立，俯卧撑和仰卧起做，并跑了一会热身，然后把娃送回家，才开始去跑的三公里，跑起来感觉有点疲惫，确实身体素质下降得比较多。

为了解决思维导图协作的问题，昨天花了两个小时，在后端、后台系统和导图的项目，加上了增删改查的功能，因为以后还有200本的绘本需要做四维导出，存电脑本地还是不方便。

昨天下午，没想到会有一个粉丝找我付费咨询职业发展的问题，和他聊了半小时，感慨波多，即使他是985毕业，毕业后就去了腾讯工作了6年，后面一直在小公司，近期被裁员后，一直没有面试的机会，我认为除了环境的因素，更多是没有做好职业规划。

晚上和一个做校招面试辅导的朋友，交流了一下想法，制定了一些改进的方向，通过讨论，感觉这个项目还是有机会的。

今日安排

• 锻炼上：晚上跑一个三公里，俯卧撑和仰卧起坐各50个，蹲下起立100个；


• 工作上：
  
  
  
  • 确定跨学科美育课程50个美术知识点对应的200本绘本；
  
  
  • 调研一下3D模型的制作和灯光效果的技术实现；
  
  
  • 讨论秋季续费和上课安排的方案；
  
  
  • 3D 画展加上浏览量和支持点赞，原来的点赞改成留言。
  
  
  • 参加银河的复试。
  
  
  
  


• 生活上：和美团的同事一起吃个午饭。

老板说，2 天开发一个 App，我用 Expo 做到了，当然，学习怎么使用 Expo 花了1个小时时间不算哈。Expo 是一个非常强大的工具，特别适合那些想要快速构建和发布React Native应用的开发者。你有没有遇到过这种情况？刚刚上手React Native，发现配置开发环境、调试代码这些事情耗费了太多时间，而你真正想做的是快速看到成果。那么，Expo 就是为你量身定做的解决方案。

首先，Expo 是一个开源框架，背后有一个强大的社区支持。你可以在 Expo 的 GitHub 仓库 找到它的源码、更新日志以及社区贡献的内容。这也意味着，你可以完全掌控你项目的每一个细节，而且社区成员之间的经验分享和合作让开发变得更加顺畅。

1. Expo 的核心特点

你可能会问，Expo 和普通的 React Native 开发有什么不同？Expo 的一大特点就是“省心”。它帮你封装了大量底层配置，让你不需要花时间在复杂的环境搭建上。想要启动一个新项目？只需几条命令，你的开发环境就配置好了，甚至不需要接触到原生代码。这对于不太熟悉 iOS 和 Android 原生开发的前端开发者来说，简直是福音。话又说回来，如果想看源码，人家也没拦着你，因为生态是开源的。

2. 零门槛开发

如果你还没用过 Expo CLI，那你一定要试试。通过几条简单的命令，你就可以创建并运行一个 React Native 应用。Expo Go 应用甚至允许你直接在手机上预览你的应用，而不需要复杂的配置。这就像是给你装了一双翅膀，让你可以随时随地测试你的应用。

🗄️ npx create-expo-app@latest

🌭 bunx create-expo-app

📦 pnpm create expo-app

🧶 yarn create expo-app

3. 丰富的生态系统

Expo 的生态系统也是它的一大亮点。它内置了大量的常用功能模块，比如相机、位置服务、传感器等等，你可以直接调用这些API，而不需要自己动手去编写原生代码。而且，Expo SDK 每年都会发布几次更新，哦不好意思，每个月都会更新，奶奶的，我刚用就从 50 更新到 51 了，也够速度的，但是好在，是兼容的，好处是确保你能用上最新最酷的功能，比如 react native 的恐怖性能的新架构，妥妥的给安排上。

你也不用担心这些功能的性能问题。Expo 团队非常注重性能优化，确保你的应用能在各类设备上流畅运行。

使用相机，使用数据库啥的，一个 import 搞定，兼容 API，双端几乎一致的体验简直爽大爆炸。

import { CameraView } from 'expo-camera';

import * as SQLite from 'expo-sqlite';

4. 云端构建与发布

说到发布，Expo 还提供了EAS（Expo Application Services），这个服务可以帮你处理繁琐的构建和发布流程。你只需专注于开发，剩下的事情交给EAS就好。无论是 iOS 还是 Android 平台，它都能帮你轻松搞定。更棒的是，你可以通过EAS进行云端构建，不再需要配置繁琐的构建环境。我比较好奇的是他尽然帮我托管了我的签名，所以基本上意味着交给 eas 去构建，发布到 Google play，和 App Store 就是点点鼠标的事情，但是前提是你得功能测试过，不要闪退和白屏。

5. 社区与支持

最让人欣慰的是，Expo 背后有一个活跃的社区。你可以随时在GitHub上提出问题，或者浏览别人已经解决的类似问题。除此之外，Expo 的文档非常详细，新手也能很快上手。如果你想了解某个API的用法，文档里都有详细的示例代码，这让学习曲线变得非常平滑。我遇到的一些问题就是在 docs 上找答案，比如如何本地构建，如何弹出原生模块，因为有可能需要做一些原生开发。

6. 什么时候不该用Expo？

当然，Expo 也并不是万能的。如果你需要使用某些非常特殊的原生功能，Expo 可能并不能完全满足你的需求。在这种情况下，你可能需要“弹出”Expo（也就是所谓的“eject”），从而使用纯粹的 React Native 环境。这时候，你就要自己管理所有原生模块了。

不过，对于大多数应用开发者来说，特别是那些不太熟悉原生开发的前端，Expo 已经足够强大。这里页打一只强心针，只要不是那些小众的三方库，比如腾讯云 cos，基本上问题不大。

个人感觉，Expo是简化了开发流程的，而且哦还为你提供了强大的工具和服务。你只需要专注于编写业务代码，正在做移动端，或者想做移动端开发的，快去试试吧，我相信你会爱上它的。

反问一波

那位说，你知道不是搞 Flutter 的吗，怎么突然就用 react native 了呢？我想说的是，这些都是工具而已，就好比我们夹菜用筷子，喝粥用瓢羹。关键看什么需求，如果你的 App 要求双端 UI 渲染一致性非常高，有非常多高性能动画的需求，那么 Flutter 很适合你，如果你需要快速实现需求，对双端一致性没那么强，且你对 web 开发很熟悉，ok，react native 是你比较好的选择，能说的就是这么多。

大家好呀，我是前端创可贴。

不管是什么行业和职业，都要做好相应的了解，提前做好职业规划和学习路线，否则在现如今的大环境下，倘若摸着石头过河，很容易还没摸到石头，就被大水冲跑了。

尤其是对于现在的应届毕业生，大环境让很多人都很难找到心仪的工作，竞争的人很多，岗位却变少了。有了清晰的职业发展方向后，便可提前做好技术积累，给面试官一个 surprise。

面试官 be like：

今天咱们就来聊一聊，作为前端程序员，我们的职业发展思路和方向，可以是什么样子的呢。

Advancement Path

先来看看晋升路线。

程序员的技术职业生涯，这里咱们暂且先不提转岗为管理层，技术人的 title 可大致分为几个等级：初级、中级、高级、资深、专家、架构师、CTO。

每个阶段所掌握的技术内容，和需要具备的能力，都是不尽相同的。我们需要基于当前的等级，规划未来几年需要达到什么样的层次，为了达到这个等级我需要掌握什么样的技能，而不是盲目去学习试图可以很自然的就得到了晋升。

初级前端需要掌握怎么使用框架进行基本的开发，学习产品开发思维和提升学习能力，需要掌握基本的 HTML、CSS、JS 相关知识，例如原型链、闭包、作用域、异步编程等；

中级前端需要接触一些更深刻的问题，例如如何进行一些基本的工程化配置和原理、了解浏览器的渲染原理、常用框架的一些实现原理、了解性能优化、了解网络协议、掌握 TS 等等；

高级前端需要掌握浏览器运行机制、性能优化、代码重构、不同框架的底层实现原理、前端工程化、技术选型、可视化开发、熟悉 Docker、了解后端知识、算法、设计模式、项目组织结构、指导新人等等；

资深前端需要掌握跨端、前端的高级应用、管理一个小组、掌握大型项目的架构设计、掌握前端领域的研究方法、跟进前端最新发展趋势、掌握前端运维部署、掌握计算机底层原理等等；

专家需要带领团队攻坚技术难题、管理前端团队、培养有潜力的团队成员、提高团队整体工作效率等等；

架构师一般不会仅停留在纯前端或纯后端，需要做到统筹帷幄，需要设计系统架构，保障系统的稳定性、安全性、扩展性等等；

CTO 就是一家公司技术层面的最高负责人了，需要带领公司进行技术探索，保障整个公司的系统稳定，探索公司未来的技术发展方向等等，CTO 一般需要较高的学历或极其丰富的阅历，才能作为公司的技术招牌、稳定人心、拉到投资。

不同的公司对于不同的职级会有不同的划分，以上仅是参考，以实际具体的公司要求为准，不同职级所需要掌握的技术内容也没有限制那么严格，毕竟学无止境，会的更多当然更好。当然也不是说一定非要学那么多，但是至少要保障有一些核心竞争力，才不会被淘汰。

Basic

程序员有一些永恒的话题：程序员到底需不需要高学历？程序员英文不好到底行不行？前端/Java/... 到底有没有前途？...

这些问题的答案其实每个人的回答可能都不太相同，我想以我的过往经历来认真的回答一下，给大家一个参考。

不可否认，程序员（尤其是前端）的门槛没有那么的高，不像有些职业，对于普通的岗位都设定为最低硕士，甚至是博士。程序员大部分基本上没有这个要求，在以前，有个大专、普通本科的学历就可以了，再会一点代码，应届生可以随随便便找个工作。

但是到了现在，相信很多刚毕业的同学，已经经历过社会的第一次拷打了吧，应届生越来越难找工作，因为和你竞争的人太多了，一名专科和一名 985 毕业同学，谁的入职几率更大呢？我们没有学历歧视，但是现在的情况就是僧多粥少，企业是既要还要，现在就是一个全民降本增效的年代。

所以答案是：不是一定要，但是尽量要。虽然很多人在上学期间不知道读书的重要性，在工作之后才反应过来，然后勤奋苦学，通过自己努力也可能实现不小的成就，但是企业都是现实的，不会去赌你的未来，而且有可能你在一家企业只会呆上两三年，也等不到你实现成就，为公司带来价值。

那么对于因为学历屡屡碰壁的同学该怎么办呢？只能前期猥琐发育，先找份工作安定下来，不眼高手低，先入行、后学习、再跳槽，当你有了很多的技术积累，还是能缩小很多差距的。

如果没有好项目，写在简历上不够亮眼，自己的技术积累又得不到展示，就只能另辟蹊径，让企业知道你的水平。比如去贡献开源项目、开博客写文章、自己做项目、做个人网站、包装自己简历等等，都是大家值得去试试的方法。总之，要想方设法让别人看到你的能力，给予你足够的正反馈，否则你会陷入对自己的怀疑：我学了那么多，为什么 Boss 还是已读不回，我还需要继续努力学习吗。

学习相对来说本来就很痛苦，要是得不到企业的认可，很难保持动力一直坚持下去，所以一定要表现出来，至少可以争得很多面试机会，通过面试也可以检验一下自己的水平，还可以做到查缺补漏。

2. 程序员英文不好到底行不行？

前言

大文件上传是项目中的一个难点和亮点，在面试中也经常会被面试官问到，所以今天蘑菇头来聊聊这个大文件上传。

什么样的文件算的上是大文件？

对于Web前端来说，当涉及到上传或下载操作时，通常认为任何超过10MB的文件都属于较大文件，尤其是对于HTTP POST上传操作。如果文件大小达到几十MB甚至更大，那么通常就需要考虑使用分块上传、断点续传等技术来优化传输过程，减少因网络不稳定导致的失败率，并提高用户体验。

当然了，这和你的网络带宽也有关系，当你的网络带宽很小时，即时在小的文件传输速率也很慢，也可以被称之为大文件了。

接下里我们来模拟一下如何使用分块上传技术来优化传输过程。

分片上传文件

分片上传技术是解决大文件上传问题的一种有效方法。它通过将大文件分割成多个较小的部分（称为“分片”或“片段”），然后分别上传这些部分，最后再由服务器端合并这些部分来重构原始文件。这种方法的优点包括能够更好地利用网络资源、支持断点续传以及提高上传效率。

主要思想

首先，前端获取到input框里输入的文件对象，通过slice方法将大文件对象进行切割得到小的Blob对象，由于后端无法识别Blob对象，所以需要转为前后端都能识别的对象FormData，然后将这个对象通过post请求发送给后端，将切片一个一个发送给后端。

后端接收到一个一个切割好的对象进行解析，将这些切片保存到一个文件夹下。当所有的切片都发送完毕之后，后端接收到合并这个信号，将文件夹下的切片排好顺序进行合并，创建可写流，将所有的切片读成流类型并汇入到可写流中得到完整的文件资源。

详细过程

有几个点需要我们注意

文件如何切割？用什么方法？

后端什么时候知道前端已经将所有的分片都发送过来了，然后才开始合并？

合并的过程中如何保证分片的顺序？

后端怎么将前端发送过来的分片文件进行合并？

前端

监听input框的change事件，获取文件对象。

使用slice将文件对象进行切片，返回一个数组。

使用FormData构造函数，将Bolb对象包装成formdata对象，以便后端能够识别，并且给这个对象添加文件名，分片名属性，以便后来分片进行排序。

使用Promise.all方法，当所有的分片请求都成功后，在all的then方法里面发送一个分片请求已完成的信号给后端，告诉后端可以开始合并分片了。

<input type="file" name="" id="input">

<button id="btn">上传</button>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>

        const input = document.getElementById('input');

        const btn = document.getElementById('btn');

        let fileObj = null

        input.addEventListener('change', handleFileChange);

        btn.addEventListener('click', handleUpload)



        function handleFileChange(e) {//监听change事件,获取文件对象

            // console.log(event.target.files);

            const [file] = event.target.files;

            fileObj = file;

        }

        function handleUpload() {//点击按钮上传文件到服务器

            if (!fileObj) return;

            const chunkList = createChunk(fileObj);

            // console.log(chunkList);

            const chunks = chunkList.map(({ file }, index) => {//创建切片对象

                return {

                    file,

                    size: file.size,

                    percent: 0,

                    index,

                    chunkName: `${fileObj.name}-${index}`,

                    fileName: fileObj.name,

                }

            });

            // 发请求

            uploadChunks(chunks);



        }

        //切片

        function createChunk(file, size = 5 * 1024 * 1024) {

            const chunkList = [];

            let cur = 0;

            while (cur < file.size) {

                chunkList.push({

                    file: file.slice(cur, cur + size),

                })

                cur += size;

            }

            return chunkList;

        }

        // 发请求到后端

        function uploadChunks(chunks) {

            console.log(chunks); //这个数组中的元素是对象，对象中有blob类型的文件对象，后端无法识别,所以需要转换成formData对象

            const formChunks = chunks.map(({ file, fileName, index, chunkName }) => {

                const formData = new FormData();

                formData.append('file', file);

                formData.append('fileName', fileName);

                formData.append('chunkName', chunkName);

                return { formData, index }

            })

            console.log(formChunks); // 后端能识别的类型

            //发请求

            const requestList = formChunks.map(({ formData, index }) => {//一个一个片段发

                return axios.post('http://localhost:3000/upload', formData,()=>{

                    console.log(index + ' 上传成功');

                })

                .then(res => { 

                })

            })

            Promise.all(requestList).then(() => {

                console.log('全部上传成功');

                mergeChunks();               

            })

        }

        // 合并请求的信号

        function mergeChunks(size=5*1024*1024){

            axios.post('http://localhost:3000/merge',{

                fileName:fileObj.name,

                size

            })

            .then(res=>{

                console.log(fileObj.name + '合并成功');

            })

        }

</script>

后端

使用第三方库multiparty对传输过来的formdata进行解析。

使用fse模块对解析完成的数据进行保存。

当所有的切片都完成时，后端接收到合并切片的请求信号时，使用fse模块读取所有的切片并进行排序。

排序完成之后使用fse模块进行合并。

const http = require('http');

const path = require('path');

const multiparty = require('multiparty');

const fse = require('fs-extra');



const server = http.createServer(async (req, res) => {

    res.writeHead(200, {

        'access-control-allow-origin': '*',

        'access-control-allow-headers': '*',

        'access-control-allow-methods': '*'

    })

    if (req.method === 'OPTIONS') { // 请求预检

        res.status = 200

        res.end()

        return

    }



    if (req.url === '/upload') {

        // 接收前端传过来的 formData 

        const form = new multiparty.Form();

        form.parse(req, (err, fields, files) => {

            // console.log(fields);  // 切片的描述

            // console.log(files);  // 切片的二进制资源被处理成对象

            const [file] = files.file

            const [fileName] = fields.fileName

            const [chunkName] = fields.chunkName

            // 保存切片

            const chunkDir = path.resolve(UPLOAD_DIR, `${fileName}-chunks`)

            if (!fse.existsSync(chunkDir)) { // 该路径是否有效

                fse.mkdirSync(chunkDir)

            }

            // 存入

            fse.moveSync(file.path, `${chunkDir}/${chunkName}`)



            res.end(JSON.stringify({

                code: 0,

                message: '切片上传成功'

            }))



        })



    }



    if (req.url === '/merge') {

        const { fileName, size } = await resolvePost(req) // 解析post参数

        const filePath = path.resolve(UPLOAD_DIR, fileName)  // 完整文件的路径

        // 合并切片

        const result = await mergeFileChunk(filePath, fileName, size)

        if (result) { // 切片合并完成

            res.end(JSON.stringify({

                code: 0,

                message: '文件合并完成'

            }))

        }

    }

})



// 存放切片的地方

const UPLOAD_DIR = path.resolve(__dirname, '.', 'qiepian')



// 解析post参数

function resolvePost(req) {

    return new Promise((resolve, reject) => {

        req.on('data', (data) => {

            resolve(JSON.parse(data.toString()))

        })

    })

}



// 合并

function pipeStream(path, writeStream) {

    return new Promise((resolve, reject) => {

        const readStream = fse.createReadStream(path)

        readStream.on('end', () => {

            fse.removeSync(path)  // 被读取完的切片移除掉

            resolve()

        })

        readStream.pipe(writeStream)

    })

}



// 合并切片

async function mergeFileChunk(filePath, fileName, size) {

    // 拿到所有切片所在文件夹的路径

    const chunkDir = path.resolve(UPLOAD_DIR, `${fileName}-chunks`)

    // 拿到所有切片

    let chunksList = fse.readdirSync(chunkDir)

    // console.log(chunksList);

    // 万一切片是乱序的

    chunksList.sort((a, b) => a.split('-')[1] - b.split('-')[1])



    const result = chunksList.map((chunkFileName, index) => {

        const chunkPath = path.resolve(chunkDir, chunkFileName)

        // ！！！！！合并

        return pipeStream(chunkPath, fse.createWriteStream(filePath, {

            start: index * size,

            end: (index + 1) * size

        }))



    })



    // console.log(result);

    await Promise.all(result)

    fse.rmdirSync(chunkDir) // 删除切片目录

    return true



}



server.listen(3000, () => {

    console.log('listening on port 3000');

})

最近使用uniapp开发了一个微信小程序（本项目技术栈是uniapp + vue3 + ts，用了最近比较火的模板unibest。），踩了一些大家普遍都会踩的坑，下面做一些总结。文章多处引用到权威官方内容和一些比较可靠的文章。如有错误，欢迎指正。

1. 使用微信昵称填写能力遇到的问题

自 2022 年 10 月 25 日 24 时后，wx.getUserProfile 和 wx.getUserInfo的接口被收回，要想获取微信的昵称头像需要使用微信的头像昵称填写能力。

我们的设计稿中没有编辑确认按钮，所以应该失焦后就调用后端的变更昵称接口：

但是失焦之后，微信会对昵称内容做合规性校验，导致失焦后不能立马获取到输入的内容：

<uv-input v-model="form.name" type="nickname" placeholder="请输入内容" @blur="handleSubmit"></uv-input>

async function handleSubmit() {

    console.log('form.value.name', form.value.name) // 测试用户001

    console.log('rawName', rawName) // 测试用户001

    if (form.value.name === rawName)

        return

    // ...

}

因此最开始的想法是等待校验结束：

async function handleSubmit() {

    // 微信会对type="nickname"的输入框失焦时进行昵称违规校验，这个校验是异步的，所以需要等待一下

    await new Promise((resolve) => setTimeout(resolve, 0))

    console.log('form.value.name', form.value.name) // Jude

    console.log('rawName', rawName) // 测试用户001

    if (form.value.name === rawName) {

        return

    }

    // ...

}

但如果真的输入了违规昵称，微信将自动清空输入框内容，而在此之前我的提交请求已经发送：

因此需要用到官方新加的一个回调事件bindnicknamereview（文档）：

<uv-input v-model="form.name" type="nickname" placeholder="请输入内容" @nicknamereview="handleSubmit"></uv-input>

function onNickNameReview(e) {

    console.log('onNickNameReview', e)

    if (e.detail.pass) {

        // 校验通过

        handleSubmit()

    } else {

        form.value.name = rawName

    }

}

但发现 uv-ui 并没有提供这个事件，还是没有生效，只能改node_modules的uv-input源码，并给uv-ui提个pr：

2. 自定义导航栏

原生导航栏配置方面有很多限制，比如不允许修改字体大小等。所以有的时候需要自定义导航栏。

首先注意，webview的页面无法自定义导航栏！

所以：
导航栏高度 = 状态栏到胶囊的间距（胶囊上坐标位置-状态栏高度） * 2 + 胶囊高度 + 状态栏高度

第一步：配置当前页面的json文件

// pages.json

{ navigationStyle: "custom" }

第二步：获取状态栏和导航栏高度，只需要获取一次即可，获取到可以放到pinia里

// 自定义导航栏

const statusBarHeight = ref(0)

const navBarHeight = ref(0)

statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight

let menuButtonInfo = uni.getMenuButtonBoundingClientRect()

navBarHeight.value = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight.value) * 2

第三步：自定义导航栏

<view class="nav-bar">

        <!-- 状态栏占位 -->

        <view :style="{ height: statusBarHeight + 'px' }"></view>

        <!-- 真正的导航栏内容 ，请按照自己的需求自行定义-->

        <view class="nav-bar-content" style="font-size: 34rpx;" :style="{ height: navBarHeight + 'px' }">导航栏标题</view>

</view>

问题：微信小程序原生导航栏会根据微信设置（字体大小，是否开启深色模式）等变化，深色模式是页面是可以获取到的，但字体大小等目前没有开放接口，所以无法根据微信设置动态变化。

3. 自定义tabbar

由于原生底部tabbar的局限性，未能满足产品需求，所以需要自定义tabbar。

首先，自定义tabbar的第一步配置pages.json：

// pages.json

  tabBar: {

    custom: true,

    // ...

  },

然后，我们只需要在项目根目录(src)创建custom-tab-bar目录，uniapp编译器会直接它拷贝到小程序中:

<!-- src/custom-tab-bar/index.wxml -->

<view class="tab-bar">

  <view class="tab-bar-border"></view>

  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">

    <image class="tab-bar-item-img" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>

    <view class="tab-bar-item-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>

  </view>

</view>

// src/custom-tab-bar/index.js

Component({

  data: {

    selected: 0,

    color: "#8d939f",

    selectedColor: "#e3eaf9",

    list: [{

      pagePath: "/pages/index/index",

      iconPath: "../static/tabbar/home01.png",

      selectedIconPath: "../static/tabbar/home02.png",

      text: "首页"

    }, {

      pagePath: "/pages/my/my",

      iconPath: "../static/tabbar/user01.png",

      selectedIconPath: "../static/tabbar/user02.png",

      text: "我的"

    }]

  },

  attached() {

  },

  methods: {

    switchTab(e) {

      const data = e.currentTarget.dataset

      const url = data.path

      wx.switchTab({url})

      this.setData({

        selected: data.index

      })

    }

  }

})

// src/custom-tab-bar/index.json

{

  "component": true

}

// src/custom-tab-bar/index.wxss

.tab-bar {

  position: fixed;

  bottom: calc(16rpx + env(safe-area-inset-bottom));

  left: 0;

  right: 0;

  height: 100rpx;

  background: linear-gradient(180deg, rgba(13, 15, 26, 0.95) 0%, rgba(42, 50, 76, 0.95) 100%);

  box-shadow: 0rpx 4rpx 16rpx 0px rgba(0, 0, 0, 0.12);

  display: flex;

  width: calc(100% - 2 * 36rpx);

  border-radius: 36rpx;

  margin: 0 auto;

}



.tab-bar-item {

  flex: 1;

  text-align: center;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

}



.tab-bar-item .tab-bar-item-img {

  width: 32rpx;

  height: 32rpx;

}



.tab-bar-item .tab-bar-item-text {

  margin-top: 10rpx;

  font-size: 20rpx;

}

最后，关键坑注意：每个tab页都有自己的tabbar实例：

因此需要每个tab页渲染时设置一下自定义tabbar组件的 activeIndex（我这里变量名是selected）：
如果是原生小程序开发像官网那样写就好，如果是uniapp开发，需要：

onShow(() => {

    const currentPage = getCurrentPages()[0];  // 获取当前页面实例

    const currentTabBar = currentPage?.getTabBar?.();

    // 设置当前tab页的下标index

    currentTabBar?.setData({ selected: 0 });

})

效果：

4. IOS适配安全距离

当用户使用圆形设备访问页面时，就存在“安全区域”和“安全距离”的概念。安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。

上图来自designing-websites-for-iphone-x

uniapp适配：

uniapp适配安全距离有三个方法：

a. manifest.json配置安全距离

// manifest.json

{

    "app-plus": {

        "safearea": {    //可选，JSON对象，安全区域配置

            "background": "#RRGGBB",    //可选，字符串类型，#RRGGBB格式，安全区域背景颜色

            "backgroundDark": "#RRGGBB",     //可选，字符串类型，#RRGGBB格式，暗黑模式安全区域背景颜色

            "bottom": {     //可选，JSON对象，底部安全区域配置

                "offset": "auto"     //可选，字符串类型，安全区域偏移值，可取值auto、none

            },

            "left": {      //可选，JSON对象，左侧安全区域配置

                "offset": "none"  //可选，字符串类型，安全区域偏移值，可取值auto、none

            },

            "right": {       //可选，JSON对象，左侧安全区域配置

                "offset": "none"    //可选，字符串类型，安全区域偏移值，可取值auto、none

            }

        },

    }

}

问题： 这种方式显然不够灵活，它设置的是单独的背景色，如果需要下方一个区域是背景图，延伸到底部安全区就满足不了了。

所以，我是将以上的配置设置成none，然后手动适配页面的安全距离：

b. js获取安全距离

let app = uni.getSystemInfoSync()

app.statusBarHeight // 手机状态栏的高度

app.bottom // 底部安全距离

c. 使用苹果官方推出的css函数env()、constant()适配

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ 

padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

注意： constant和env不能调换位置

可以配合calc使用：

padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); /*兼容 IOS<11.2*/ 

padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); /*兼容 IOS>11.2*/

h5适配

网页适配安全距离的前提是需要将<meta name="viewport">标签设置viewport-fit:cover;：

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

这是MDN上关于viewport-fit的解释：

直观一点就是：

上图来自移动端安全区域适配方案

然后再使用env和constant

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ 

padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

5. 列表滚动相关问题

列表滚动如果使用overflow: auto; 在首次下拉时（即使触控点在列表内）也会使整个页面下拉：

解决这个问题只需要将内容使用 scroll-view 包裹即可：

<scroll-view scroll-y class="max-h-[800rpx] overflow-auto"></scroll-view>

下拉刷新将列表滚动到顶部：

小程序默认使用webview渲染，如果需要Skyline渲染引擎需要配置，而srcoll-view标签在webview中有个独有的属性enhanced，启用后可通过 ScrollViewContext 操作 scroll-view：

<scroll-view id="scrollview" :enhanced="true" scroll-y class="max-h-[800rpx] overflow-auto"></scroll-view>

/** 将scrollview滚动到顶部 */

function scrollToTop(id: string) {

	wx.createSelectorQuery()

		.select(id)

		.node()

		.exec((res) => {

			const scrollView = res[0].node;

			scrollView.scrollTo({

				top: 0,

				animated: true

			});

		})

}



onPullDownRefresh(async () => {

	console.log('下拉刷新')

	try {

		await fetchList()

	} catch (error) {

		console.log(error)

	} finally {

		uni.stopPullDownRefresh()

		scrollToTop('#scrollview')

	}

})

6. 配置小程序用户隐私保护指引

文档：小程序隐私协议开发指南

什么时候要配置：

但凡你的小程序用到上图中任何一种用户信息就得配置，否则使用wx.authorize来获取相应授权时直接会走到fail回调，报 { "errMsg": "authorize:fail api scope is not declared in the privacy agreement", "errno": 112 }

配置的是什么：

配置的是将来你的程序打开让用户确认授权的隐私协议内容。

如何配置：

登录微信公众平台 -> 设置 -> 服务内容声明 -> 用户隐私保护指引 -> 修改

隐私弹框触发的流程是什么：

程序调用隐私相关接口 ——> 微信判断该接口是否需要隐私授权 ——> 如果需要隐私授权且开发者没有对其响应（注册onNeedPrivacyAuthorization的监听事件）则主动弹出官方弹框（此时隐私相关接口调用处于pending状态，如果用户拒绝将会报{ "errMsg":" getLocation:fail privacy permission is not authorized", "errno":104 }）。

代码逻辑：

配置并等待审核通过后，进行以下步骤：

1. 配置 __usePrivacyCheck__: true

尽管官方文档说明2023年10月17日之后无论是否配置改字段，隐私相关功能都会启用，但是实际尝试后发现还是得配置上才生效。

// manifest.config.ts

'mp-weixin': {

    __usePrivacyCheck__: true

},

2. 自定义隐私弹框组件

尽管官方提供了官方隐私弹框组件，但是真机上没有生效，于是还是使用了自定义隐私弹框。

我是直接在插件市场找了一个下载量最多的插件，兼容vue2和vue3。

在小程序对应的页面：

<WsWxPrivacy id="privacy-popup" @agree="onAgree" @disagree="onDisAgree"></WsWxPrivacy>

function onAgree() {}



function onDisAgree() {}

tip: 这部分逻辑相对于业务是几乎没有耦合的，甚至如果没有特殊需求agree和disagree事件都不用写。如果将来官方主动弹框没问题了，那这个逻辑可以直接删掉。

3. 业务代码

举个例子，我这里隐私相关接口是uni.getLocation获取用户地理位置。

function handleCheckLocation() {

	return new Promise((resolve, reject) => {

		uni.getLocation({

			type: 'gcj02',

			success: async (res) => {

				console.log('当前位置:', res)

				try {

					let r = await checkLocation({

						lon: res.longitude.toString(),

						lat: res.latitude.toString(),

					})

                                        // ...

                                        resolve('success')

				} catch (error) {

					reject(error)

				}

			},

			fail: (error) => {

				console.log('获取位置失败:', error)

				reject(error)

			}

		})

	})

}

以上代码，在调用uni.getLocation时，微信自动发起位置授权，发起位置授权之前又会自动发起隐私授权。到此，这一流程是ok的。但是，如果用户拒绝了隐私授权，或者拒绝了位置授权，该怎么办？

如果拒绝了隐私授权，下次调用隐私相关接口时还会再次弹出隐私授权弹框。

如果拒绝了位置授权，下次调用就不会弹出位置授权弹框，但可以通过uni.getSetting来判断用户是否拒绝过，再通过wx.openSetting让用户打开设置界面手动开启授权。代码如下：

function getLocationSetting() {

    uni.getSetting({

        success: (res) => {

            console.log('获取设置:', res)

            if (res.authSetting['scope.userLocation']) {

                // 已经授权，可以直接调用 getLocation 获取位置

                handleCheckLocation()

            } else if (res.authSetting['scope.userLocation'] === false) {

                // 用户已拒绝授权，引导用户到设置页面开启

                wx.showModal({

                    title: '您未开启地理位置授权',

                    content: '请在设置中开启授权',

                    success: res => {

                        if (res.confirm) {

                            wx.openSetting({

                                success(settingRes) {

                                    if (settingRes.authSetting['scope.userLocation']) {

                                        // 用户打开了授权，再次获取地理位置

                                        handleCheckLocation()

                                    }

                                }

                            })

                        }

                    }

                })

            } else {

                // 首次使用功能，请求授权

                uni.authorize({

                    scope: 'scope.userLocation',

                    success() {

                        handleCheckLocation()

                    }

                })

            }

        }

    })

}

当然你也可以封装一下：

function getSetting(scopeName: string, cb: () => any) {

    uni.getSetting({

        success: (res) => {

            console.log('获取设置:', res)

            if (res.authSetting[scopeName]) {

                // 已经授权，可以直接调用

                cb()

            } else if (res.authSetting[scopeName] === false) {

                // 用户已拒绝授权，引导用户到设置页面开启

                wx.showModal({

                    title: '您未开启相关授权',

                    content: '请在设置中开启授权',

                    success: res => {

                        if (res.confirm) {

                            wx.openSetting({

                                success(settingRes) {

                                    if (settingRes.authSetting[scopeName]) {

                                        // 用户打开了授权，再次获取地理位置

                                        cb()

                                    }

                                }

                            })

                        }

                    }

                })

            } else {

                // 首次使用功能，请求授权

                uni.authorize({

                    scope: scopeName,

                    success() {

                        cb()

                    }

                })

            }

        }

    })

}

这样，整个隐私协议指引流程就完整了。

一、Web3 的定义与核心概念

Web3 是区块链等技术的总称，这些技术可以分散互联网上的数据所有权和控制权。大多数互联网应用程序都由集中式实体控制，这些实体决定如何保存和使用最终用户数据。Web3（也称为 Web 3.0、去中心化 Web 或语义 Web）技术允许社区驱动的项目，而不是集中式管理结构。在这些项目中，最终用户控制数据、确定定价、直接为技术开发做出贡献，并在项目的方向上拥有更重要的发言权。这些技术具有自动调节用户相互交互方式的机制。因此，不需要集中式实体来管理这些交互。

• Web3是互联网的第三代，旨在通过区块链技术实现去中心化、更加安全和隐私的数据交互。


• Web3的主要特点包括语义Web、人工智能、3D图形、无处不在的网络、开放性和互操作性。


• Web3通过去中心化的区块链技术，将权力和数据集中到用户手中，而不是某个公司。


• Web3应用程序（DApps）在去中心化网络上运行，用户可以在未经中央公司许可的情况下构建和连接不同的DApp。

Web 3.0 具备四项主要功能。

去中心化

去中心化的 Web 应用程序是 Web 3.0 的关键功能。其目的是在去中心化网络中分发和存储数据。在这些网络中，不同的实体拥有底层基础设施，用户直接向存储提供商付费以访问该空间。

去中心化的应用程序还将信息副本存储在多个位置，并确保整个过程中的数据一致性。每位用户可以控制其数据存放的位置，而不必将其移交给集中式基础设施。去中心化的互联网用户可根据需要出售自己的数据。

去信任性

在集中式 Web 应用程序和服务中，用户通常需要信任中央权威机构来管理其数据、交易和交互。这些中央权威机构可以控制用户数据，并且可以操纵系统的规则。数据可能存在安全风险或管理不善，从而导致用户信息丢失或滥用。

相比之下，Web3 引入去信任性，因此用户可以在无需信任任何特定方的情况下进行交易和交互。

语义网

借助语义网，应用程序能够通过理解 Web 数据的内容和上下文来执行复杂的任务。语义网使用元数据和人工智能为用户生成的数据提供含义（语义）。

Web 3.0 旨在更全面地转向目前存在于现有 Web 技术某些方面中的语义网技术。例如，搜索引擎可提供更准确且与上下文相关的搜索结果，而智能代理则可帮助用户更高效地执行任务。

互操作性

Web 3.0 的目标是在不同技术之间建立更多的互连，从而数据无需中介即可在不同平台之间流动。互操作性使数据具有可移植性，因此用户可以在服务之间无缝切换，同时保持自己的首选项、配置文件和设置。

与此同时，集成各种物联网（IoT）设备的协议将 Web 的覆盖范围扩展到传统边界之外。例如，支持无边界交易的加密货币技术允许跨地域和政治边界进行价值交换。

二、互联网的发展史：从Web 1.0到Web 2.0再到Web3

要充分理解Web3的含义，就必须先看互联网的发展史，以及Web3与前两个发展阶段的不同之处。

Web 1.0（1994-2004）

Web 1.0是互联网的第一个发展阶段，这个阶段从1994年一直延续到2004年，期间出现了Twitter和Facebook等社交媒体巨头。虽然大众在1994年左右才接触到Web 1.0，但实际上早在1968年，一个名为“ARPANET”（全称是Advanced Research Projects Agency Network）的美国政府项目就启动了Web 1.0。ARPANET最初是由军方承包商和大学教授组成的一个小型网络，他们在其中互相交换数据。

Web 1.0主要是静态的HTML网页，用户之间很少交互。虽然有门户网站以及私人聊天室和BBS等论坛，但总的来说当时的互联网仍没有什么交互或支付交易功能。

Web 2.0（2004年至今）

互联网在2004年左右经历了蜕变，由于当时互联网在网速、光纤基础设施和搜索引擎等方面都取得了发展，因此用户对社交、音乐、视频分享和支付交易的需求大幅上升。
这种更具互动性的全新互联网体验为用户带来了许多新的功能，并提升了用户体验。但问题也随之而来，并且直到今天也一直无法彻底解决，那就是：用户如果要使用这些新功能，就必须授权中心化的第三方平台管理大量数据。因此这些中心化的实体在数据和内容权限方面被赋予了巨大的权力和影响力。

Web3（2008年之后）

在2008年，中本聪发布了比特币白皮书，在其中指出了区块链技术的核心基础并发明了点对点的数字货币，由此掀起了Web 2.0的改革浪潮。比特币彻底颠覆了我们对数字化交易的概念，并首次提出了一种无需可信中间方的安全在线交易模式。中本聪写道：“需要基于加密证明，而非信任，来建立电子支付系统。”

直到智能合约被发明后，去中心化的互联网模式才真正进入公众视野。如果说比特币实现了点对点支付，智能合约扩展了可编程协议的概念，实现了保险、游戏、身份管理和供应链等更高级的用例，那么这一切会如何影响互联网用户体验和数字化交互呢？智能合约用户可以直接、安全地交互，因此打造了一个更加公平、透明且基于加密事实的新型互联网。

Gavin Wood将这个升级版的互联网称作“Web3”，即“一个安全的、由社会运行的系统”。

简而言之，Web3就是一个去中心化的互联网，旨在打造出一个全新的合约系统，并颠覆个人和机构达成协议的方式。Web3复刻了第一版互联网（即Web 1.0）的去中心化基础架构，Web 1.0的特色是用户自己架设博客网站以及RSS feed。在此基础上，Web3还结合了Web 2.0丰富的交互体验，比如社交媒体平台。Web 1.0和Web 2.0相结合，就形成了Web3的数字化生态，在其中用户可以真正拥有自己的数据，并且交易受到了加密技术保障。用户无需再信任品牌背书，而是可以依赖确定的软件代码逻辑来严格执行协议。

三、Web3对前端开发的影响

• 在Web3.0中，前端不再仅仅是展示层，而是成为了与智能合约、区块链网络直接交互的重要桥梁。


• 前端开发者需要掌握如何通过Web3.0技术栈，如以太坊智能合约、IPFS等，实现去中心化应用（DApp）的开发。


• Web3.0强调去中心化和用户数据主权，这要求前端开发在设计和实现应用时，更加注重用户隐私保护和数据安全。


• Web3.0时代的前端开发还面临着性能优化的挑战，由于区块链操作通常较慢，前端需要进行相应的优化。

四、Web3前端开发需要掌握的技术

• 区块链技术：了解区块链的基本原理、共识机制、加密算法等基础知识。


• 智能合约开发：掌握智能合约的编写语言（如Solidity）和开发工具，以及合约的部署和调用方法。


• 去中心化应用设计：了解去中心化应用的设计原则、用户体验和开发流程。


• 分布式存储技术：熟悉常见的分布式存储方案，如IPFS。


• 前端开发技术：具备HTML、CSS和JavaScript等基础技能，同时了解React、Vue.js、Web3.js等前端框架和库。


• 安全性和隐私保护：了解如何进行合约审计、安全防范和数据加密等方面的知识。

五、Web3前端开发的工具和库

• Web3.js：一个JavaScript API库，用于与以太坊区块链进行交互。


• Ethers.js：一个小而完整的JavaScript API库，为以太坊区块链及其生态系统提供支持。


• Truffle：一个以太坊智能合约开发框架，提供编译和测试智能合约的开发环境。


• Remix IDE：一个用于编写和使用智能合约的在线编辑器。


• MetaMask：一个Chrome扩展程序，可让用户从浏览器连接到以太坊区块链网络。


• Ganache：提供本地区块链环境，用于测试智能合约。

六、Web3前端开发挑战

Web3的去中心化特性和用户数据主权要求前端开发者在编码时采用更高的安全标准。前端开发者需要掌握如何使用端到端加密技术来保护用户数据，确保数据在传输和存储过程中的安全性。

由于区块链操作通常较慢，前端开发者需要优化性能以确保用户体验。通过使用高效的缓存策略和异步处理技术，开发者可以减少用户等待时间，提升应用的响应速度。

用户体验在Web3应用中至关重要。前端开发者需要设计直观且友好的用户界面，确保用户能够轻松地与区块链进行交互。这包括使用现代前端框架如React和Vue.js来构建动态和响应式的界面。

Web3技术栈的复杂性要求前端开发者掌握多种新技术和工具，如Web3.js、ethers.js等库。这些工具帮助开发者与区块链进行交互，实现智能合约调用和数据读取。

隐私保护是Web3前端开发的核心要求之一。开发者需要采用端到端加密技术，确保用户数据在传输和存储过程中的安全性，防止数据泄露和篡改。

七、Web3前端开发未来趋势

虚拟现实（VR)技术与Web3的融合，正在为用户提供前所未有的沉浸式交互体验。通过Web3的去中心化特性，用户可以在虚拟现实中拥有更高的自主权和数据安全性。这种技术融合不仅改变了传统互联网的边界，还为开发者提供了创造丰富多样用户体验的机会。

元宇宙是Web3技术的一个重要应用领域。通过去中心化的区块链技术，元宇宙中的虚拟世界可以实现更高的透明度和安全性。用户在元宇宙中不仅可以进行虚拟资产交易，还可以参与到去中心化的社区治理中，真正实现虚拟世界的自治。

智能合约作为Web3的重要组成部分，将继续在前端开发中发挥关键作用。前端开发者需要掌握智能合约的编写和部署，以便在去中心化应用中实现自动化和安全的交易。智能合约的应用不仅限于金融领域，还可以扩展到供应链管理、数字身份验证等多个方面。

去中心化存储技术，如IPFS，将成为Web3前端开发的重要组成部分。IPFS通过分布式存储网络，提供了更高效和安全的数据存储解决方案。前端开发者可以利用IPFS来存储和检索数据，确保数据的完整性和不可篡改性，从而提升应用的可靠性。

跨链技术的发展将促进不同区块链之间的互操作性。前端开发者需要关注跨链技术的最新进展，以便在开发去中心化应用时实现不同区块链之间的数据和资产互通。跨链技术不仅可以提升区块链网络的整体效率，还可以为用户提供更加便捷的跨链交易体验。

参考:

aws

chainlink

作者：洞窝-雪花

产品的原话就是“要又大又全”。既然存储量大，也要覆盖全多种设备多种浏览器。

方案选择

• 既然要存储的数量大，得排除cookie


• localStorage，虽然比cookie多，但是同样有上限（5M）左右，备选


• websql 使用简单，存储量大，兼容性差，备选


• indexDB api多且繁琐，存储量大、高版本浏览器兼容性较好，备选

既然罗列了一些选择，都没有十全十美的，那么有没有一种能够集合这多种方式的插件呢？渐进增强 or 优雅降级 的存在
冲着这个想法，就去github和谷歌找了一下，还真的有这么一个插件。

那就是 localforage

localforage

localForage 是一个 JavaScript 库，只需要通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。

关于兼容性

localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。下面是 indexDB、web sql、localStorage 的一个浏览器支持情况，可以发现，兼容性方面loaclForage基本上满足99%需求

使用

解决了兼容性和存储量的点，我们就来看看localforage的基础用法

安装

# 通过 npm 安装：

npm install localforage

// 直接引用

<script src="localforage.js"></script>

<script>console.log('localforage is: ', localforage);</script>

获取存储

getItem(key, successCallback)

从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem() 将返回 null。

localforage.getItem('somekey').then(function(value) {

    // 当离线仓库中的值被载入时，此处代码运行

    console.log(value);

}).catch(function(err) {

    // 当出错时，此处代码运行

    console.log(err);

});



// 回调版本：

localforage.getItem('somekey', function(err, value) {

    // 当离线仓库中的值被载入时，此处代码运行

    console.log(value);

});

设置存储

setItem(key, value, successCallback)

将数据保存到离线仓库。你可以存储如下类型的 JavaScript 对象：

• Array


• ArrayBuffer


• Blob


• Float32Array


• Float64Array


• Int8Array


• Int16Array


• Int32Array


• Number


• Object


• Uint8Array


• Uint8ClampedArray


• Uint16Array


• Uint32Array


• String

localforage

  .setItem("somekey", "some value")

  .then(function (value) {

    // 当值被存储后，可执行其他操作

    console.log(value);

  })

  .catch(function (err) {

    // 当出错时，此处代码运行

    console.log(err);

  });



// 不同于 localStorage，你可以存储非字符串类型

localforage

  .setItem("my array", [1, 2, "three"])

  .then(function (value) {

    // 如下输出 `1`

    console.log(value[0]);

  })

  .catch(function (err) {

    // 当出错时，此处代码运行

    console.log(err);

  });



// 你甚至可以存储 AJAX 响应返回的二进制数据

req = new XMLHttpRequest();

req.open("GET", "/photo.jpg", true);

req.responseType = "arraybuffer";



req.addEventListener("readystatechange", function () {

  if (req.readyState === 4) {

    // readyState 完成

    localforage

      .setItem("photo", req.response)

      .then(function (image) {

        // 如下为一个合法的 <img> 标签的 blob URI

        var blob = new Blob([image]);

        var imageURI = window.URL.createObjectURL(blob);

      })

      .catch(function (err) {

        // 当出错时，此处代码运行

        console.log(err);

      });

  }

});

删除存储

removeItem(key, successCallback)

从离线仓库中删除 key 对应的值。

localforage.removeItem('somekey').then(function() {

    // 当值被移除后，此处代码运行

    console.log('Key is cleared!');

}).catch(function(err) {

    // 当出错时，此处代码运行

    console.log(err);

});

清空存储

clear(successCallback)

从数据库中删除所有的 key，重置数据库。

localforage.clear() 将会删除离线仓库中的所有值。谨慎使用此方法。

localforage.clear().then(function() {

    // 当数据库被全部删除后，此处代码运行

    console.log('Database is now empty.');

}).catch(function(err) {

    // 当出错时，此处代码运行

    console.log(err);

});

localforage是否万事大吉？

用上了localforage一开始我也以为可以完全满足万恶的产品了，然而。。。翻车了.。

内存不足的前提下，localforage继续缓存会怎么样？

在这种状态下，尝试使用localforage，不出意外，抛错了 QuotaExceededError 的 DOMErro

解决
存储数据的时候加上存储的时间戳和模块标识，加时间戳一起存储

setItem({

    value: '1',

    label: 'a',

    module: 'a',

    timestamp: '11111111111'

})

• 如果是遇到存储使用报错的情况，try/catch捕获之后，通过判断报错提示，去执行相应的操作，遇到内存不足的情况，则根据时间戳和模块标识清理一部分旧数据（内存不足的情况还是比较少的）


• 在用户手机上产生脏数据的情况，想要清理的这种情况的 处理方式是：


• 让后端在用户信息接口里面加上缓存有效期时间戳，当该时间戳存在，则前端会进行一次对本地存储扫描


• 在有效期时间戳之前的数据，结合模块标识，进行清理，清理完毕后调用后端接口上报清理日志


• 模块标识的意义是清理数据的时候，可以按照模块去清理（选填）

我，一名7年老前端，目前还在从事前端工作，接下来这篇文章可能有点长，主要围绕我是如何接触画画这件事。

2015年毕业后，第一份工作是浙江台州的一家药企：海正药业，在实验室从事肿瘤药的研发工作，工资3000+，包吃住。

2016-2017年，这期间算是成为前端程序员的探路阶段，在这个过程中，我接触了很多不一样的工作。第一份工作：某三方检测机构检测员，因为公司规模不大，所以和老板几乎每天待在一起，每天做的事情就是陪着老板出入各酒店，检测酒店的房间是否符合卫生标准，检测游泳池细菌是否在规定范围内，然后出具一份检测报告，用来保证酒店的正常营业，检测报告每年一检，每到一处酒店的人员都是笑脸相迎，很有面的感觉，但是这没有给我带来成就感，工资也才4000+，干了大半年后我还是决定离开；第二份工作：SGS宁波分公司检测员，每天在实验室检测各种材料的材质是否符合标准，和上一份工作有点类似，有人会好奇既然差不多，为什么还要选择尝试，因为SGS当时给人的感觉特别高大上，连邮件都是纯英文的，干了三个月，转完正我离职了，原因还是工资太低看不到希望；第三份工作：宁波荃盛粽子公司，包住，铺盖都搬进去了，突然灵光一闪，我以后就是个卖粽子的，赶紧跑。至此2016年已过半，我该怎么办，思来想去，我决定先不找工作了，专心自学安卓开发，学了小半年，感觉入门了但是心里还是空空的，出去面试的时候也不够自信，试了两家公司后我感觉还是不行，我还是没办法在这个行业扎根，于是2017年初，我毅然决然去了杭州，在那边培训了半年，回到宁波，找到了当时的第一份前端工作，老东家的同事都很好，刚去就体验了一把福利，整个部门集体三亚7日游，成年往事这里就不找照片了。也是在这一年，我在父母的帮助下，在宁波买了房，因为这时候月供才还的起，之前的工资都是养活不了自己的。

2017.08-现在，在现在的公司待了快5年了，公司敏捷开发模式，好在福利都还不错，每年有3000块的京东卡福利，逢年过节也都有很正式的礼盒，就加班稍微多一点，但早已习惯。

小插曲，2019年因为自己从事小程序开发有两年时间了，当时给自己做了两个小程序，都开源出来了，小程序云开发布道者，不知道那些粉丝还在不在，相当老的粉丝了，哈哈哈。

接下来我要讲画画这件事，这是文章的重头戏，我先附下链接从不懂油画到作品入展我用了多久。

今年，脑子里想的最多的还是，我是不是要找点事情做做，与其每天刷小视频不如利用这些时间做点有意义的事，于是有了下面这篇文章：心流C大调画展，截取里面的个人介绍方便大家查看：

在这里还是啰嗦一遍，虽然上面链接有讲到我入门油画的过程。上面说的有意义的事情其实在我脑子里已经计划了大半年，那就是画画，画什么画呢，高大上一点的，那就油画吧，油画保存的好的话可以几百年不褪色，那跟谁学 呢，不知道。一次偶然的机会，我在小红书看到了Michael老师的画画视频，发现老师真的很厉害，加上老师有留言说如果想学习就扣“666”，于是我顺利联系上了我现在的助教老师：sandy老师（mjssandy）,交谈下来除了费用一下子有点难接受，其他都满意，那些天我像着了魔似的，就是想成为老师的终身会员，终身跟着老师画下去，于是经过两次发工资的倒腾，我终于报上了终身课，于是有了我现在的作品，下面我一一展示给大家看看：

田园风景

田园风景是入门油画的第一幅作品，很多人可能会觉得这不像没有基础的人画的，错，我至今不懂素描是什么，小时候喜欢一个人安静的画画，上学后就没有支撑这个爱好的资本了，一直搁置到现在。

苹果

苹果是第二幅作品，我突然发现自己对这种要求素描功底的静物反而画的有信心一些，于是第三幅作品我打算选一个有难度的。

狸花猫

这幅画用时20天，每天1-2小时，是我真正意义上的第一幅满意的作品。

清晨薄雾

这是一幅特别美的风景画，我自己还是蛮喜欢，只是前景的草画的有点凌乱。

客户定制猫咪-冥想猫

画完狸花猫，居然有人找我画订单了，这真的太不可思议了，接到这个消息后我第一时间联系我的老师，老师鼓励我勇敢去尝试，最终以1250的价格成交了这幅画。

英伦玫瑰

这幅画是继苹果之后的另一幅静物画作，画的过程中很得心应手，但是选这幅画也是有原因的，当时离520还有10天的时间，打算浪漫一下，画完送给老婆，谁知中间接到客户的猫咪定制，就把玫瑰暂时搁置了，画完冥想猫已经是520之后的事了，但是换的钱上交给了老婆，老婆很满意。

老者画像

老者画像，用时32天，每天1-2小时，这是有史以来画的最吃力的一幅作品，一个鼻子画了4天，好在最后很完美，老师都惊呆了，这是接触油画3个月的人能完成的事？！

儿子的大猩猩

儿子的大猩猩，儿子喜欢，那就安排，现在技法还太单一，以后画肯定不是这么个水平，这是继冥想猫之后的第二幅创作作品。

我是如何平衡工作，生活与画画的

一开始，我尝试晚上画，常常一画就是凌晨，导致第二天上班的精神萎靡，知道行不通我就改在周末多画画，但是有一个问题，一天画太长时间人会烦躁郁闷，周末也行不通。而且上面两个时间段我都放弃了陪家人的时间，完全不可取。后来我和老婆商量晚上早点睡，如果儿子晚上太兴奋我也不管，让老婆陪着他，我到了10点就要准时睡觉，不然无法保证我早上5点起床的目标，适应了1个月，感觉良好，一直到现在已经坚持4个月了，白天中午都会休息半小时，早上都能保证至少画1个小时，兴致高就2小时，这个时间段老婆孩子还在睡，完全属于我的个人放空时间。而且养成了早睡早起的习惯后我整个人的精神状态也好了，还有老婆孩子看到我能画出这么厉害的画，都有点崇拜主义，老婆更是每完成一幅作品必帮我发朋友圈炫耀，画画原来还有助于家庭和谐，夫妻幸福！

结语

我没敢想以后靠画画为生，但是我在坚持，坚持这个词看似不妥，但是没有坚持再好的天赋也会被埋没。最后我想对大家说的是，如果你有爱好，你不妨去尝试一下，不去尝试你永远不知道自己有多厉害！

最后的最后送给大家一句话，与君共勉：坚持和热爱是最好的天赋！

前言：运维已就绪，但好奇心作祟

• 背景故事： 虽然前端开发人员平时可能不会直接操控Jenkins，运维团队已经把这一切搞得井井有条。然而，你的好奇心驱使你想要深入了解这些自动化的流程。本文将带你一探究竟，看看Jenkins如何在前端项目中发挥作用。
• 目标介绍： 了解Jenkins如何实现从代码提交到自动部署的全过程，并学习如何配置和优化这一流程。

---

Jenkins基础与部署流程

1. Jenkins到底是个什么东西？

• Jenkins简介： Jenkins是一个开源的自动化服务器，用于持续集成和持续交付。它能够自动化各种开发任务，提高开发效率和软件质量。
• 核心功能： Jenkins可以自动化构建、测试和部署任务，帮助开发团队实现快速、高效的开发流程。

2. 自动化部署流程详解

• 流程概述： 本文将重点介绍前端自动化部署的完整流程，包括代码提交、构建、打包、部署等步骤。具体流程如下：
  1. 代码提交：
     • 开发人员通过 git push 将代码提交到远程仓库。
  2. 触发Jenkins自动构建：
     • Jenkins配置为在代码提交时自动触发构建任务。
  3. 拉取代码仓库代码：
     • Jenkins从仓库拉取最新代码。
  4. 构建打包：
     • Jenkins运行构建命令（如 npm run build），将源代码编译成可部署版本。
  5. 生成dist文件：
     • 构建生成 dist 文件夹，包含打包后的静态资源。
  6. 压缩dist文件：
     • 使用压缩工具（如 tar 或 zip）将 dist 文件夹压缩成 dist.tar 或 dist.zip。
  7. 迁移到指定环境目录下：
     • 将压缩包迁移到目标环境目录（如 /var/www/project/）。
  8. 删除旧dist文件：
     • 删除目标环境目录下旧的 dist 文件，以确保保留最新版本。
  9. 解压迁移过来的dist.tar：
     • 在目标环境目录下解压新的 dist.tar 文件。
  10. 删除dist.tar：
      • 解压后删除压缩包，节省存储空间。
  11. 部署成功：
      • 自动化流程完成，新的前端版本已经成功部署。

---

准备工作

服务器配置：

• 操作系统: CentOS7.9
• CPU: 2核
• 内存: 2GB
• 系统盘: SSD云硬盘 40GB

项目 fork的大佬的开源项目soybean-admin

话不多说干就完了！！！

安装git

yum install -y git

查看是否安装成功

git --version

 生成秘钥

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

查看公钥

cat ~/.ssh/id_rsa.pub

 将公钥添加到GitHub或其他代码库的SSH Keys

---

Docker安装

直接查看 菜鸟教程

安装完之后,配置docker镜像源详情参考 24年6月国内Docker镜像源失效解决办法...

编辑 /etc/resolv.conf 文件：

sudo vim /etc/resolv.conf

添加或修改以下行以使用 Cloudflare 的 DNS 服务器：

nameserver 1.1.1.1

nameserver 1.0.0.1

创建完成的docker-hub镜像输出示例:

 查看docker相关的rpm源文件是否存在

rpm -qa |grep docker

作用

• rpm -qa：列出所有已安装的 RPM 包。
• grep docker：筛选出包名中包含 docker 的条目。

示例输出  启动Docker服务：

• 启动Docker服务并设置为开机自启：

  sudo systemctl start docker
  
  sudo systemctl enable docker
  
  

---

Docker安装Docker Compose

Docker Compose 可以定义和运行多个 Docker 容器应用的工具。它允许你使用一个单独的文件（通常称为 docker-compose.yml）来配置应用程序的服务，然后使用该文件快速启动整个应用的所有服务。

第一步，下载安装

curl -L https://get.daocloud.io/docker/compose/releases/download/v2.4.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

第二步，查看是否安装成功

docker-compose -v

第三步，给/docker/jenkins_home 目录设置最高权限，所有用户都具有读、写、执行这个目录的权限。（等建了/docker/jenkins_home目录之后设置）

chmod 777 /docker/jenkins_home

创建Docker相关文件目录

可以命令创建或者相关shell可视化工具创建， 命令创建如下:

mkdir /docker 

mkdir /docker/compose 

mkdir /docker/jenkins_home 

mkdir /docker/nginx 

mkdir /docker/nginx/conf 

mkdir /docker/html 

mkdir /docker/html/dev 

mkdir /docker/html/release

mkdir /docker/html/pro

创建docker-compose.yml、nginx.conf配置文件

cd /docker/compose touch docker-compose.yml 

cd /docker/nginx/conf touch nginx.conf

完成后目录结构如下： 

---

编写nginx.conf

user  nginx;

worker_processes  1;

 

error_log  /var/log/nginx/error.log warn;

pid        /var/run/nginx.pid;

 

 

events {

    worker_connections  1024;

}

 

 

http {

    include       /etc/nginx/mime.types;

    default_type  application/octet-stream;

 

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '

                      '$status $body_bytes_sent "$http_referer" '

                      '"$http_user_agent" "$http_x_forwarded_for"';

 

    access_log  /var/log/nginx/access.log  main;

 

    sendfile        on;

    #tcp_nopush     on;

 

    keepalive_timeout  65;

 

    gzip  on;



    #dev环境

    server {

        #监听的端口

        listen  8001;

        server_name  localhost;

        #设置日志

        access_log  logs/dev.access.log  main;

        

        #定位到index.html

           location / {

               #linux下HTML文件夹,就是你的前端项目文件夹

               root  /usr/share/nginx/html/dev/dist;

#              root  /home/html/dev/dist;

               #输入网址（server_name：port）后，默认的访问页面

               index  index.html;

               try_files $uri $uri/ /index.html;

           }

    }



    #release环境

    server {

        #监听的端口

        listen  8002;

        server_name  localhost;

        #设置日志

        access_log  logs/release.access.log  main;

        

        #定位到index.html

           location / {

               #linux下HTML文件夹,就是你的前端项目文件夹

               root  /usr/share/nginx/html/release/dist;

#              root  /home/html/release/dist;

               #输入网址（server_name：port）后，默认的访问页面

               index  index.html;

               try_files $uri $uri/ /index.html;

           }

    }



 

    #pro环境

    server {

        #监听的端口

        listen  8003;

        server_name  localhost;

        #设置日志

        access_log  logs/pro.access.log  main;



        #定位到index.html

           location / {

               #linux下HTML文件夹,就是你的前端项目文件夹

               root  /usr/share/nginx/html/pro/dist;

#              root  /home/html/pro/dist;

               #输入网址（server_name：port）后，默认的访问页面

               index  index.html;

               try_files $uri $uri/ /index.html;

           }

    }

#    include /etc/nginx/conf.d/*.conf;



   

}

---

编写docker-compose.yml

networks:

  frontend:

    external: true



services:

  docker_jenkins:

    user: root                                 # root权限

    restart: always                            # 重启方式

    image: jenkins/jenkins:lts   # 使用的镜像

    container_name: jenkins                    # 容器名称

    ports:                                     # 对外暴露的端口定义

      - 8999:8080

      - 50000:50000

    environment: 

    - TZ=Asia/Shanghai ## 设置时区  否则默认是UTC

    #- "JENKINS_OPTS=--prefix=/jenkins_home"

    ## 自定义 jenkins 访问前缀（设置了的话访问路径就为你的ip:端口/jenkins_home，反之则直接为ip:端口）

    volumes:    # 卷挂载路径

      - /docker/jenkins_home/:/var/jenkins_home   

      # 挂载到容器内的jenkins_home目录 

      # docker-compose up 就会自动生成一个jenkins_home文件夹

      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose

  

  docker_nginx_dev:

    restart: always

    image: nginx

    container_name: nginx_dev

    ports:

      - 8001:8001

    volumes:  

      - /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf

      - /docker/html:/usr/share/nginx/html

      - /docker/nginx/logs:/var/log/nginx



  docker_nginx_release:

    restart: always

    image: nginx

    container_name: nginx_release

    ports:

      - 8002:8002

    volumes:

      - /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf

      - /docker/html:/usr/share/nginx/html

      - /docker/nginx/logs:/var/log/nginx

    environment:

      - TZ=Asia/Shanghai

      

  docker_nginx_pro:

    restart: always

    image: nginx

    container_name: nginx_pro

    ports:

      - 8003:8003

    volumes:

      - /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf

      - /docker/html:/usr/share/nginx/html

      - /docker/nginx/logs:/var/log/nginx

---

启动Docker-compose

cd /docker/compose

docker-compose up -d

此时就会自动拉取jenkins镜像与Nginx镜像

查看运行状态

docker-compose ps -a

示例输出

---

验证Nginx

在/docker/html/dev/dist目录下新建index.html，文件内容如下：

html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Hello Nginxtitle>

head>

<body>

    <h1>Hello Nginxh1>

body>

html>

浏览器打开，输入服务器地址:8001看到下面的页面说明nginx配置没问题，同样的操作可测试下8002端口和8003端口

---

验证Jenkins

浏览器输入服务器地址:8999

 查看jenkins初始密码

docker logs jenkins

安装插件

---

安装Publish Over SSH、NodeJS

【Dashboard】——>【Manage Jenkins】——>【Plugins】——>【Available plugins】，搜索Publish Over SSH、NodeJS，安装后重启。 

• Publish Over SSH配置远程服务器

 找到SSH Servers

 点击Test Configuration显示successs则成功，之后再Apply并且Save。

• NodeJS配置

 找到Nodejs 

坑点!!! 使用阿里云镜像 否则会容易报错

 

阿里云node镜像地址

https://mirrors.aliyun.com/nodejs-release/

---

添加凭据

添加凭据，也就是GitHub或者其他远程仓库的凭据可以是账号密码也可以是token，方便之后使用。话不多说，Lets go！

 我这里使用的是ssh，原因用账号密码拉不下来源码不知道为啥

---

创建Job

选择自由风格 

• 配置git仓库地址 
• 构建环境 在 Jenkins 中将 Node.js 和 npm 的 bin 文件夹添加到 PATH 中，否则可能就会报错。 
• 选择nodejs版本

• 创建shell命令

• 自动部署到对应环境项目目录：上面打包到了Jenkins中的workspace中，但是我们设置的项目环境路径跟这个不同，比如开发环境项目目录是/docker/html/dev/dist/，所以需要打包后，把dist文件内容推送到/docker/html/dev/dist/目录下
  1. 修改一下上面的shell脚本

     #!/bin/bash
  
     echo "Node版本："
  
     node -v 
  
     pnpm i
  
     echo "依赖安装成功"
  
     pnpm build
  
     echo "打包成功"
  
     rm -rf dist.tar     # 每次构建删除已存在的dist压缩包
  
     tar -zcvf dist.tar ./dist  #将dist文件压缩成dist.tar
  
     echo $PATH
  
  

  2. 然后Add build step选择Send files or execute commands over SSH，Send files or execute
  3. 通过SSH连接到远程服务器执行命令和发送文件：

 ps:脚本解释

• cd /docker/html/dev
  • 切换到 /docker/html/dev 目录。这是你要进行操作的工作目录。
• rm -rf dist/
  • 递归地删除 dist/ 目录及其所有内容。这是为了确保旧的 dist 目录被完全移除。
• tar zxvf dist.tar
  • 解压 dist.tar 文件，并将其中的内容解压到当前目录下。通常，dist.tar 会包含 dist/ 目录，解压后就会生成一个新的 dist/ 目录。
• rm dist.tar
  • 解压完成后，删除 dist.tar 文件。这样可以节省存储空间并清理不再需要的压缩包。

至此全部配置完成

• 测试ci/cd 点击Build Now开始构建

查看构建中任务的Console Output，日志出现Finished: SUCCESS即为成功

---

预览产物: 

---

其他配置

GitHub webHooks配置

 payload URL 为：http://ip:jenkins端口/github-webhook/ 

在Github webHooks创建好后，到jenkins中开启触发器  这样配置完后在push到相应分支就会自动构建发布

其他的个性化配置例如：钉钉通知、邮箱通知、pipeline配置等等就不做学习了，毕竟运维的事，我也学不会。😊😊

完结撒花🎉🎉🎉

作者：stringtiky
来源：juejin.cn/post/7407333344889896998

我来看看怎么个事？

你们还记得自己为什么要做程序员吗？我先来说，就是看见别人有一个精美的网站。但是，现在很多人要么就是后端crud boy，要么就是前端vue渲染数据girl。没有现成的框架，现成的ui组件，就没法写代码了。好看的网页怎么来呢？有人会说是UI设计的，我前端只需要vue渲染数据就行了🤣（今天我们就不探讨后端技术🐶）。久而久之，自己就会慢慢变菜，最后想开发一个项目，发现无从下手，写个页面都费劲！！！所以，还是慢慢做一个全栈，这样既可以写好玩的工具，也可以提高自己的竞争力，强者恒强，没错就是我啦😅

1.loading实际效果图

字不重要，看图👉👉👉👉

pc端

移动端

2.准备css素材

这种loading的效果，网上有很多网站可以直接diy，几乎没有人手写一个。当然你也可以手写，如果觉得闲的话

推荐网站
国内也有很多，我使用的是国外网站（科学上网）

loading.io/#editor

下载素材推荐svg格式，如果你的svg动图存在背景

如图，这种背景一定要去掉，给svg设置一个透明度，找到svg文件，background属性，设置rgb(255，255，255，0)就可以了，如下图：

3.loading隐藏与显示逻辑

思考🤔：

当我们点击按钮的时候，一般会触发请求，比如请求后台数据，这个时候中间就会有加载的样式。

总结就两个条件：

1.按钮要触发点击事件，开启loading效果

2.需要一个事件完成的状态（标记），关闭loading效果

4.编写looding组件，全局注册组件

<script setup>

</script>

<template>

  <div class="loading">

    <img src="./loading.svg" alt="loading"/>

  </div>

</template>



<style scoped lang="scss">

.loading {

//通过定位，实现loading水平垂直居中

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  img {

    width: 70px;

    height: 70px;

  }

}

</style>

全局注册loading组件

5.登录页面使用loading组件

<script setup>



import {reactive, ref, watch} from "vue";



//模拟请求数据，code===200表示事件完成

const result = reactive({data: [], code: 0})



//判断按钮是否触发点击事件，默认false，按钮没有触发点击

const clickFlag = ref(false)



//按钮提交方法

const submit = () => {

  //重置code

  result.code = 0

  //标记请求触发

  clickFlag.value = true

  //模拟http请求

  setTimeout(() => {

    //模拟后台数据

    result.data = [{'name': 'bobo', 'age': 12}]

    //模拟请求完成

    result.code = 200

  }, 3000)

}

</script>



<template>

  <div class="login-container">

    <div class="login-box">

      <div class="form">

        <h2>用户登录</h2>

        <div class="content">

          <input class="input" type="text" placeholder="请输入账号">

          <input class="input" type="password" placeholder="请输入密码">

          <button @click="submit" class="button">登录</button>

          <!--判断loading 1.有没有点击事件 2.有没有loading终止标记-->

          <loading v-show="result.code!==200&&clickFlag"></loading>

        </div>

      </div>

    </div>

  </div>

</template>



<style lang="scss" scoped>

.login-container {

  .login-box {

    .form {

      position: relative;

      padding: 24px;

      text-align: center;

      color: rgb(55 65 81);

      line-height: 1.75rem;

      }

    }

  }

</style>

具体页面布局的代码，请参考我之前的文章juejin.cn/post/738854…

这里不做过多叙述！能坚持✊看到这里，想必你一定很棒，给你个🍭🍭🍭

在线浏览网址http://www.codingfox.icu/#/dashboard (我不知道可以坚持到多久，靠爱发电，网站搬迁会尽量迁移)