todo
https://daisyui.com/components/rating/?lang=zh_cn
很喜欢 aisyui 的风格。下一个版本,我会丢掉 bootstrap,使用 tailwindcss + daisyui 组合了。
https://daisyui.com/components/rating/?lang=zh_cn
很喜欢 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。还有,如果涉及到长列表,就要处理滚动问题以及动态加载问题。该怎么做呢。
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
去补充这个位置。这样视觉上可能会更好一点,有用空间也会更大。不过呀,抖音小程序自定义导航栏的要求不好实现。百度小程序和微信小程序都没问题。
自定义导航栏后的效果。
获取 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/
才刚接触 babylonjs,就遇到天空盒。既然遇到了,就弄弄看。
https://doc.babylonjs.com/features/featuresDeepDive/environment/skybox
https://doc.babylonjs.com/features/featuresDeepDive/materials/using/reflectionTexture
https://skybox.blockadelabs.com/
用 blender 这样的 3d 建模软件,不用快捷键是不行的。有时候录一些教程,显示操作的快捷键就很有必要。screencast keys 这个插件刚好能满足需求。
下载地址: https://github.com/nutti/Screencast-Keys/releases
效果图如下图所示
这里我按了一组 shift + a
快捷键,弹出了添加面板。同时在右下角这里,显示出了我按了 shift + a
快捷键。按 n
快捷键弹出选项面板,选项面板中就包含有 screencast keys
插件的设置信息。你可以设置字号、字体、位置等。
zip
文件。blender
,依次点击菜单的 编辑->偏好设置->插件,在弹出面板中点击安装,选择之前下载的 zip
文件。上边三步就 ok 了。你通过 n 快捷键,就可以从弹出的选项中找到该插件的设置面板。
babylonjs + blender 弄一个最简单的 3D效果出来。从来没有做过,那就试试吧。
最终效果: https://www.xiangrong.pro/web3d
花了好几个小时,看着 B 站的视频,用 blender 画了一个椅子。如下图所示。
椅背本来是粉色的。为了让 logo 可以显示出来,换成了这个色。
这里,我们使用 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
椅子缺失的问题找到了。导出的时候将网格下的应用修改器打钩就可以了。之前镜像就是修改器之一。
当你的电脑没有装 ps,或电脑装了 ps 不能用的时候,网页版 ps 绝对是个好东西。对于我,不仅仅是网页版 ps,是苹果手机的套图。真的忘不掉。
我知道,我用网页版 ps 打开 psd。然后将从苹果手机隔空过来的截屏图片拖入进对应图层。我先设置导入截屏图片的宽度为 756px,高度会自动调整。然后设置 x 坐标为 980px,y 坐标为 1262px。 最后点击菜单栏的文件,导出。就可以导出一张合图的苹果手机图了。
这些数字,也只是对我有用。这是 psd 决定的。
微信、百度小程序都支持常量 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
哈。
那梳理下流程。
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 隐藏了滚动条。反正体验还是不怎么好。
初步了解了下 web3d 相关的信息。 three.js 或 babylon.js 要学一个(它们会封装 WebGL 和 WebGPU 的Api)。然后 blender 也要学一下。如果做虚拟城市这块的建模,building tools 这个插件很多人在用。那就用吧。
https://ranjian0.github.io/building_tools/
下载好后,打开 blender ,点击菜单栏的编辑,再点插件,再添加,把这个插件添加进去。