前端 Archives - 第5页共19页

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

尝试

组件自身有 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();
    })
}

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

使用 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 去补充这个位置。这样视觉上可能会更好一点，有用空间也会更大。不过呀，抖音小程序自定义导航栏的要求不好实现。百度小程序和微信小程序都没问题。

自定义导航栏后的效果。

5月 30

百度小程序授权登录获取手机号码相关

发表于 2023年5月30日 • 342 views • 没有评论!

前端

百度小程序第一步

获取 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/

5月 27

blender 记录显示操作快捷键插件 screencast keys

发表于 2023年5月27日 • 1,020 views • 没有评论!

web3d,前端

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

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

效果图如下图所示

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

安装方法

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

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

5月 24

babylonjs + blender 弄一个最简单的 3D效果出来

发表于 2023年5月24日 • 499 views • 没有评论!

web3d,前端

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

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

步骤

使用 blender 画一个小椅子。
给立方体上色。
导出 glb 文件。
创建 babylongjs 项目。
加载使用 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，并编写创建加载代码'

最后

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

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

5月 18

字节小程序底部自适应

发表于 2023年5月18日 • 408 views • 没有评论!

前端

微信、百度小程序都支持常量 env，来自适应有圆弧屏幕的手机。头条小程序却不可以（抖音开发者官网也没有，只手搜适配，自适应等关键词没找到，看了部分文档也没找到）。头条自己的官方示范的小程序自己都没适配。这就是他们的态度。好吧，别人不做，自己总得做做好，要不体验肯定会差的。

常规处理

像苹果这种棱角是圆弧的手机，底部顶部都是要做自适应处理，才可以有更好的体验。常规操作是加一个 margin 或一个 padding 或补一个 div。而这些都会用到这个常量： env(safe-area-inset-bottom)

比如可以这样做：

    .safe-bottom {
        margin-bottom: env(safe-area-inset-bottom);
    }

    # 或
    .safe-bottom {
        box-sizing: box-border;
        padding-bottom: env(safe-area-inset-bottom);
    }

    # 或多加一个 div
    .safe-bottom {
        height: env(safe-area-inset-bottom);
    }

甚至可以和 calc 组合使用，比如：

.footer {
    width: 100%;
    height: calc(88rpx + env(safe-area-inset-bottom));
    box-sizing: box-border;
    padding-bottom: env(safe-area-inset-bottom);
}

可是，头条小程序中 env(safe-area-inset-bottom) 这玩意不支持。

头条小程序自适应

既然一条路走不通，那就选其他的路。找找思路。比如只要能知道圆弧区域的高度不就可以了吗。在系统信息中，会携带这些信息（叫安全区域信息）。拿到了高度，一样可以 margin，一样可以 padding 哈。

那梳理下流程。

在 main.js 中，拿到安全区域信息，并将底部的高度数据定义到 globalProperties 中。之所以这样做，是因为需要自适应场景的页面有很多个，不想每个页面都再重复去获取这些信息。
在有需要的地方使用这个高度。

# main.js
import App from './App'
import { createPinia } from 'pinia'
import {
    createSSRApp
} from 'vue'

export function createApp() {
    const app = createSSRApp(App)

    app.use(createPinia())

    // 头条自适应
    // #ifdef MP-TOUTIAO
    const systemInfo = uni.getSystemInfoSync();
    if (systemInfo && systemInfo.safeAreaInsets) {
        app.config.globalProperties.$safeTop = systemInfo.safeAreaInsets.top;
        app.config.globalProperties.$safeBottom = systemInfo.safeAreaInsets.bottom;
    }
    // #endif

    return {
        app
    }
}

# 使用的地方
<view  hover-class="hover" :style="{'margin-bottom': $safeBottom + 'px'}">
</view>

好吧，就这样完事了。

字节小程序官方实例

滑到底部了，不仅不自适应，底部还有一部分被挡住了。

其实，并不赞成官方实例的搞法。底部导航栏非原生，会对整个项目带来影响。页面滚动不丝滑是其中之一，滚动条会滚动到底部不好看。要不就是使用 scroolview 隐藏了滚动条。反正体验还是不怎么好。

5月 17

blender 构建虚拟城市插件 building tools

发表于 2023年5月17日 • 721 views • 没有评论!

web3d,前端

初步了解了下 web3d 相关的信息。 three.js 或 babylon.js 要学一个（它们会封装 WebGL 和 WebGPU 的Api）。然后 blender 也要学一下。如果做虚拟城市这块的建模，building tools 这个插件很多人在用。那就用吧。

下载地址

https://ranjian0.github.io/building_tools/

下载好后，打开 blender ，点击菜单栏的编辑，再点插件，再添加，把这个插件添加进去。

5月 17

WebGL 和 WebGPU

发表于 2023年5月17日 • 415 views • 没有评论!

web3d,前端

随着社会的发展，技术的发展，市场的发展，平面展示已不能满足需要了。商品可以 3D 化，道路建筑可以 3D 化。而 web 又是最通用的一种承载形式，web3D 的的必要性就突出来了。其实，很早就有了。我是萌新，可不能不去了解，甚至学习。

WebGL

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 canvas 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。

目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+ 和 Microsoft Edge build 10240+；然而，WebGL 一些特性也需要用户的硬件设备支持。

WebGL 2 API 引入了对大部分的 OpenGL ES 3.0 功能集的支持; 它是通过WebGL2RenderingContext界面提供的。

WebGL 是基于 OpenGL 演进的。

WebGPU

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGPU_API

WebGPU 是 WebGL 的继任者，为现代 GPU 提供更好的兼容、支持更通用的 GPU 计算、更快的操作以及能够访问到更高级的 GPU 特性。

web3D 渲染

web3D应用 -> 引擎 -> web端图形API -> 本地端图形 API -> 显卡

WebGL 和 WebGPU 在这个环节中，本地图形 API 是不一样的。 WebGL 使用的是 OpenGL 或 DirectX。WebGPU 使用的是 Direct3D 或 Metal 或 Vulkan。

对于用户，只会关心所看到的 3D 效果。对于实现者，要了解知道渲染的流程还有熟悉 web 端图形 API 的使用。直接使用 WebGL API 或 WebGPU API 是能够实现 3D 效果。但会有第三方工具，比如 three.js 和 babylon.js 。它们会对 API 进行封装转换，可以省很多很多事。

blender 也是工具。
https://www.blender.org/
https://zhuanlan.zhihu.com/p/59575701
https://www.bilibili.com/video/BV13M41137Ki/?p=2&spm_id_from=pageDriver&vd_source=6993ce0cd88c9947ac7681b6864a99d0

非你网

Write the Code. Change the World.

todo

记录一下，直接到达

抖音小程序

百度小程序

尝试

百度小程序第一步

安装方法

步骤

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

创建项目加载渲染 glb

相关

最后

常规处理

头条小程序自适应

字节小程序官方实例

下载地址

WebGL

WebGPU

web3D 渲染

相关文章