非你网

还是以 vue 项目为例，去配置和使用 tailwindcss

官网 https://tailwindcss.com/docs/installation/using-postcss

安装 vue 项目

安装 vue 项目

# 创建
pnpm create vue

# 选择配置，尽量选 TypeScript、Router、Pinia、ESLint、Prettier 这些。你做一个大的项目，这些都是必须的

我们把 package.json 中的 type 设置成 module。遵循使用 es 模块规范。

{
  …,
  "type": "module"
}

然后运行起来看看。

继续阅读

初始化项目后，我们需要对项目进行一些配置，以及安装一些插件

修改 node 的规范模式

先修改 node 的规范模式。默认是 commonjs，我们把它改成 es Module 模式。

修改package.json 文件中的 type 属性（没有就加一个。

{
    …,
    "type": "module"
}

在 commonjs 规范中，导入使用 require。es Module 中，则使用 import 。这是大家最直接基本的映象。当然还有很多的细节问题，可以另外查阅。

最基本的结构

新建 layouts 文件夹，创建 base.vue 文件，填入以下代码。

<template>
    <div class="content">
        <slot></slot>
    </div>
</template>

继续阅读

在正式开发之前，我们先了解下 nuxt 的一些基础理论知识。

文件构成

.
├── README.md
├── app.vue  # nuxt 应用程序主组件（入口组件） 
├── nuxt.config.ts  # nuxt 配置文件（该文件配置可覆盖默认的配置-一方面可以覆盖，一方面扩展）
├── package.json  # 项目包配置文件
├── pnpm-lock.yaml  # pnpm 版本锁定控制文件
├── public
│   └── favicon.ico
├── server
│   └── tsconfig.json
└── tsconfig.json # ts 配置文件

上边这些，只是使用工具创建的默认文件。一个完整的项目，远远不止这些文件夹、文件、配置。 可见官方文档。

https://nuxt.com/docs/guide/directory-structure/nuxt

我们先了解几个比较用的到的。

继续阅读

如果做官网、h5这些。 ssr 还是得要考虑的。好吧 vue3 + nuxt3 是一个选择。当然，还有辅助的一些工具和框架。比如 tailwindcss 这些。

vue 官网： https://cn.vuejs.org/guide/essentials/application.html
nuxt 官网： https://nuxt.com/docs/getting-started/installation

在使用 nuxt 之前，您应该已经会使用 vue3 了哈。

一般，都会选择最新，最流行的工具和框架。比如，使用 vite 代替 webpack，使用 pnpm 代替 yarn，npm 这些。如果是 mac 使用 item2 代替默认的终端。这个是跟风，也是学习的动力。有新鲜感和不一样的体验感。

下边这个是我使用 laravel10( blade) + bootstrap5 实现的一个自适应官网。这次，就做一个类似的网站。主要有顶部导航栏、中间实体部分、以及底部信息栏构成。这个是一个实践，做一个完整的这样的页面加一个跳转也面就够了。基础做好了，就是添砖加瓦的事情。

继续阅读

todo

https://tailwindcss.com/

https://daisyui.com/components/rating/?lang=zh_cn

https://upstash.com/

很喜欢 aisyui 的风格。下一个版本，我会丢掉 bootstrap，使用 tailwindcss + daisyui 组合了。

记录一下，直接到达

抖音小程序

https://developer.open-douyin.com/docs/resource/zh-CN/codelabs/mini-app/microapp-share/profile

流量配置，这个似乎蛮好的呀。
https://developer.open-douyin.com/microapp/tt3f8b4936a0a1fb42/traffic-configuration

百度小程序

https://smartprogram.baidu.com/docs/develop/framework/app_service_pagefunction/#onShareAppMessage

https://smartprogram.baidu.com/docs/design/whitebook/how_to_improveUXforweb/

swiper 组件，通常会用来做轮播图使用。而它的动作表现形式，不仅仅可以做轮播图。比如多个长列表的横向切换。可是，swiper 自身不支持动态高度的。也就是它的高度是默认的，开始指定好的。当然，你也可以使用 js 去动态效果。一般，用 css 能搞定的，就不要去麻烦 js。还有，如果涉及到长列表，就要处理滚动问题以及动态加载问题。该怎么做呢。

尝试

1. 组件自身有 onReachBottom 函数。当页面滑动底部会触发。如果不是最外层页面而是内部的滚动是不会触发的。比如可以将 swiper-item 的 overflow 样式值改为 auto, 也是可以滚动的。只是这样一来触发不了 onReachBottom 函数，就没办法去动态加载了。这个时候，我们可以通过加载完数据后，ui 更新后，计算当前 swiper-item 的高度，然后给 swipe 动态设置高度实现。

# swiper 的 current
const tabIndex = ref(0);

# swiper 的高度
const swiperHeight = ref(300);

const calcSwiperHeight = function() {
    nextTick(() => {
        uni.createSelectorQuery().select(`#list${tabIndex.value}`).fields({size:true}, function(res){
            swiperHeight.value = res.height;
        }).exec();
    })
}

这种方式可以去试试，我没完全体验测试完毕。

2. 使用 scroll-view 组件和 swiper 组件来嵌套使用。这样，就不需要动态的去计算 swiper 组件的高度了，而且 scroll-view 有 scrolltolower 函数，解决了动态加载的问题。记得将 scroll-view 放在 swiper-item 内。

这里将 swiper 和 scroll-view 的高度固定。比如 height: calc(100vh - 200rpx);。具体多少，自己把控。

效果动图如下。上边是封装的 tabMenu 组件配合 swiper 一起，双向使用。当然你也可以不要 tabMenu。第一页，我特意设置单次请求数目（也就是 limit）为 5，并且重复拼凑了一些数据。因为总共只有 6 条数据，不足以拉到底部刷新。第二页，我将单次请求数目设置为 20 。第三页是没数据。看请求次数，切换了很多次，只请求了 4 次。这样实现，对页面请求次数也有好处。

布局还可以进一步优化。自定义导航栏，设置 navigationStyle 为 customer, 用 tabMenu 去补充这个位置。这样视觉上可能会更好一点，有用空间也会更大。不过呀，抖音小程序自定义导航栏的要求不好实现。百度小程序和微信小程序都没问题。

自定义导航栏后的效果。

百度小程序第一步

获取 access_token https://smartprogram.baidu.com/docs/develop/serverapi/power_exp/

获取 session_key https://smartprogram.baidu.com/docs/develop/api/open/getSessionKey/

登录流程 https://smartprogram.baidu.com/docs/develop/function/login_process/

单登录 https://smartprogram.baidu.com/docs/develop/function/login/

获取手机号码 https://smartprogram.baidu.com/docs/develop/function/login_union/

获取用户信息 https://smartprogram.baidu.com/docs/develop/function/getuserinfo/

用 blender 这样的 3d 建模软件，不用快捷键是不行的。有时候录一些教程，显示操作的快捷键就很有必要。screencast keys 这个插件刚好能满足需求。

下载地址： https://github.com/nutti/Screencast-Keys/releases

效果图如下图所示

这里我按了一组 shift + a 快捷键，弹出了添加面板。同时在右下角这里，显示出了我按了 shift + a 快捷键。按 n 快捷键弹出选项面板，选项面板中就包含有 screencast keys 插件的设置信息。你可以设置字号、字体、位置等。

安装方法

1. 打开下载地址，下载最新版本的 zip 文件。
2. 打开 blender，依次点击菜单的 编辑->偏好设置->插件，在弹出面板中点击安装，选择之前下载的 zip 文件。
3. 然后在该面包找到该插件打钩够。

上边三步就 ok 了。你通过 n 快捷键，就可以从弹出的选项中找到该插件的设置面板。

babylonjs + blender 弄一个最简单的 3D效果出来。从来没有做过，那就试试吧。

最终效果： https://www.xiangrong.pro/web3d

步骤

1. 使用 blender 画一个小椅子。
2. 给立方体上色。
3. 导出 glb 文件。
4. 创建 babylongjs 项目。
5. 加载使用 glb 文件。

先用 blender 画出小椅子并导出 glb 文件

花了好几个小时，看着 B 站的视频，用 blender 画了一个椅子。如下图所示。

椅背本来是粉色的。为了让 logo 可以显示出来，换成了这个色。

创建项目加载渲染 glb

这里，我们使用 pnpm 创建 vite 项目

pnpm crate vite

# 输入项目名 web3d
# 选择框架，这里选择最高效，最悠久的框架 Vanilla
# 选择语言， 这些选择 JavaScript
# 最后，回车。项目就建立好了

创建好项目后，我习惯性安装依赖包，并建立 git 版本控制，初始化项目

cd web3d
pnpm install
git init -b main
git add .
git commit -m 'initialize web'

我喜欢干干净净的干事情，删掉不需要的文件，并创建 src 目录，将 main.js 和 style.css 文件移到该目录中。

rm -rf counter.js
rm -rf javascript.svg
mkdir src
mv main.js ./src
mv style.css ./src

修改 index.html

  <body>
    <canvas id="canvas"></canvas>
    <script type="module" src="/src/main.js"></script>
  </body>

修改 style.css

# 删除 style.css 中所有代码，加入下边代码
* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

修改 main.js

# 删除 main.js 中所有代码，加入下边代码
import './style.css'

到此，已经很干净了。运行起来，再提交版本控制。

pnpm dev

git add .
git commit -m '删除不必要的代码'

这个时候，只有一个白白的网页。下边正式开学写 babylonjs 代码。

先安装 babylonjs 和 babylonjs-loaders

pnpm add babylonjs
pnpm add babylonjs-loaders

在 main.js 中修改为以下代码（之前只有一行代码）

import * as BABYLON from 'babylonjs'
import 'babylonjs-loaders'
import './style.css'

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

// 创建引擎， 第二个参数为抗锯齿
const engine = new BABYLON.Engine(canvas, true)

// 创建场景
const scene = new BABYLON.Scene(engine)

/**
 * 创建相机
 * @name 名字
 * @alpha 相机的 alpha 值，水平旋转角度
 * @beta  相机的 bata 值，垂直旋转角度
 * @radius 相机的半径
 * @target 相机的目标点
 * @scene 相机所在的场景
 */
const camera = new BABYLON.ArcRotateCamera('camera', 0, 0, 0, BABYLON.Vector3.Zero(), scene)

// 设置相机的位置
camera.setPosition(new BABYLON.Vector3(0, 5, 10))

// 将相机的目标指向场景的原点
camera.setTarget(BABYLON.Vector3.Zero());

// 把相机附加到画布上, true 阻止默认操作
camera.attachControl(canvas, true)

// 顶部球形光
const hemisphericLight1 = new BABYLON.HemisphericLight(
    'light',  //光源的名称
    new BABYLON.Vector3(1, 1, 0),  //光源的方向
    scene //光源所在的场景
)

// 底部球形光
const hemisphericLight2 = new BABYLON.HemisphericLight(
    'light',  //光源的名称
    new BABYLON.Vector3(1, -1, 0),  //光源的方向
    scene //光源所在的场景
)
hemisphericLight2.intensity = 0.72

// 隐藏 loading 画面
BABYLON.SceneLoader.ShowLoadingScreen = false

BABYLON.SceneLoader.Append('models/', 'yizi.glb', scene, (glb) => {
    console.log(glb)
}, null)

// 渲染场景
engine.runRenderLoop(() => {
    scene.render()
})

// 监听尺寸更改
window.addEventListener('resize', function() {
    engine.resize()
})

到此，代码是完成了。椅子文件还没放到项目中。我们在 public 目录中创建 models文件夹，并将 blender 导出的 yizi.glb 文件放到 models文件夹下。

于是，效果如下图所示。

不知道啥原因，用镜像做的部分，显示不出来。使用官方的沙盒也是这样。

提交代码。

git add .
git commit -m '安装 babylonjs 以及 loader，并编写创建加载代码'

相关

glb 文件下载

链接: https://pan.baidu.com/s/1DnkSQaa1z_JLAYCsXeXmqw 提取码: u8p4

椅子教程

https://www.bilibili.com/video/BV1kX4y1m7G5?p=1

最后

椅子缺失的问题找到了。导出的时候将网格下的应用修改器打钩就可以了。之前镜像就是修改器之一。

代码 https://github.com/vinistudy/web3d