Write the Code. Change the World.

5月 09

头条、抖音、字节啥的都叫抖音小程序。没开始之前,以为和其他小程序一样,看这文档,噼里啪啦就能做下来。发现不是那么会事。不是不好开发,是一开始抖音就限制了你开发的能力。比如,你想自定义顶部导航栏不允许,比如企业级账号想获取手机号码不允许,比如获取定位不允许。作为一个小程序,一个常规的社交 app,这些是最基本的能力。这都不允许,怎么好把小程序体验开发到极致呢。
不是不允许,是要你满足它特定的条件,才渐渐的开放给你。不明白这是要搞啥子。好吧,只能妥协,开始开发出不是很满意的小程序出来。

顺便吐槽小各家小程序的顶部的胶囊。个人觉得还是微信和支付宝的好看一些。有些家不仅不好看,感觉就毫无设计可言。包括抖音的。胶囊丑,顶部导航栏也丑。

https://developer.open-douyin.com/

5月 06

前边那个弹窗还有一些瑕疵,看得到的瑕疵。比如,使用贝塞尔曲线来模拟弹簧那种伸缩效果时,会露底。如果说是变魔术,用土话讲,那就是穿帮了。还有就是弹窗的动画的时间没有定义的地方。这次都加上了。先看看效果。

Code

popupLayout.vue

<template>
    <view v-if="controller.open" class="popup-layer" catchtouchmove="true">
        <view v-if="direction == 'top'" class="top-bg-color" :class="{ 'top-bg-show': controller.bg, 'top-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>

        <view v-if="direction == 'bottom'" class="bottom-bg-color" :class="{ 'bottom-bg-show': controller.bg, 'bottom-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>

        <view v-if="direction == 'left'" class="left-bg-color" :class="{ 'left-bg-show': controller.bg, 'left-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>

        <view v-if="direction == 'right'" class="right-bg-color" :class="{ 'right-bg-show': controller.bg, 'right-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>

        <view class="popup-content" :style="_location">
            <slot></slot>

            <view v-if="timingFun == 'cubic-bezier' && contentBgColor" :style="{background:contentBgColor}" :class="'content-bg-' + direction"></view>
        </view>
    </view>
</template>

<script setup>
import { reactive, defineProps, defineEmits, defineExpose, computed, onMounted, watch } from 'vue';

const controller = reactive({
    open: false,
    lock: false,
    bg: false,
    bgOpacity: 0,
    translate: -100,
    time: null
});

const emits = defineEmits(['onClose']);

const timingFuns = {
    'cubic-bezier': 'transition-timing-function: cubic-bezier(.15,-0.88,.41,1.68);',
    ease: 'transition-timing-function: easy;',
    'ease-in': 'transition-timing-function: ease-in;',
    'ease-out': 'transition-timing-function: ease-out;',
    'ease-in-out': 'transition-timing-function: ease-in-out;',
    linear: 'transition-timing-function: linear;'
};

const props = defineProps({
    direction: {
        type: String,
        default: 'top' // 方向  top,bottom,left,right
    },
    bgOpacity: {
        type: Number,
        default: 0.38
    },
    timingFun: {
        type: String,
        default: 'cubic-bezier'
    },
    contentBgColor: {
        type: String,
        default: ''
    },
    transitionDuration: {
        type: String,
        default: '0.5s'
    }
});

watch(() => props.timingFun, (newValue, oldValue) => {}, {
    immediate: true
});

const _translate = computed(() => {
    const transformObj = {
        top: `transform:translateY(${-controller.translate}%)`,
        bottom: `transform:translateY(${controller.translate}%)`,
        left: `transform:translateX(${-controller.translate}%)`,
        right: `transform:translateX(${controller.translate}%)`
    };
    return transformObj[props.direction];
});

const _location = computed(() => {
    const positionValue = {
        top: 'bottom:0px;width:100%;',
        bottom: 'top:0px;width:100%;',
        left: 'right:0px;top:0px;height:100%;',
        right: 'left:0px;top:0px;height:100%;'
    };

    let style = `transition-duration:${props.transitionDuration};`;
    if (timingFuns[props.timingFun]) {
        style += timingFuns[props.timingFun];
    }
    return style + positionValue[props.direction] + _translate.value;
});

const open = function() {
    if (controller.open) {
        return;
    }

    controller.open = true;

    let openTimer = setTimeout(() => {
        clearTimeout(openTimer);
        controller.lock = true;
        controller.bg = true;
        controller.bgOpacity = props.bgOpacity;
        controller.translate = -0.1;
        openTimer = null;
    }, 100);

    // 防止误触
    let lockTimer = setTimeout(() => {
        clearTimeout(lockTimer);
        controller.lock = false;
        lockTimer = null;
    }, 500);
};

const close = function() {
    if (controller.timer || controller.lock) {
        return;
    }

    controller.bgOpacity = 0;
    controller.bg = false;
    controller.translate = -100;

    controller.timer = setTimeout(() => {
        clearTimeout(controller.timer);
        controller.open = false;
        controller.timer = null;
        emits('onClose');
    }, 500);
};

defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>
.popup-layer {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 9999;

    .popup-content {
        position: absolute;
        z-index: 1000000;
        transition: transform;
    }

    .content-bg-top {
        position: absolute;
        width: 100%;
        height: 108rpx;
        left: 0;
        bottom: -100rpx;
    }

    .content-bg-bottom {
        position: absolute;
        width: 100%;
        height: 108rpx;
        left: 0;
        top: -100rpx;
    }

    .content-bg-left {
        position: absolute;
        width: 108rpx;
        height: 100%;
        top: 0;
        right: -100rpx;
    }

    .content-bg-right {
        position: absolute;
        width: 108rpx;
        height: 100%;
        top: 0;
        left: -100rpx;
    }
}

// 底部出来
.top-bg-color {
    width: 120vw;
    height: 120vh;
    background: #000;
    position: relative;
    left: -10vw;
    top: 121vh;
    opacity: 0;
    transition: 0.24s opacity, 0.24s top;
}

.top-bg-show {
    top: 0;
}

.top-bg-hide {
    top: 121vh;
}

.top-bg-color:after {
    content: '';
    width: 120vw;
    height: 120vw;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    left: 0;
    top: -30vw;
}

// 顶部出来
.bottom-bg-color {
    width: 120vw;
    height: 120vh;
    background: #000;
    position: relative;
    left: -10vw;
    bottom: 121vh;
    opacity: 0;
    transition: 0.24s opacity, 0.24s bottom;
}

.bottom-bg-show {
    bottom: 0;
}

.bottom-bg-hide {
    bottom: 121vh;
}

.bottom-bg-color:after {
    content: '';
    width: 120vw;
    height: 120vw;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    left: 0;
    bottom: -30vw;
}

// 右边出来
.left-bg-color {
    width: 120vw;
    height: 120vh;
    background: #000;
    position: relative;
    top: -10vh;
    left: 121vw;
    opacity: 0;
    transition: 0.24s opacity, 0.24s left;
}

.left-bg-show {
    left: 0;
}

.left-bg-hide {
    left: 121vw;
}

.left-bg-color:after {
    content: '';
    width: 120vh;
    height: 120vh;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: -30vh;
}

// 左边边出来
.right-bg-color {
    width: 120vw;
    height: 120vh;
    background: #000;
    position: relative;
    top: -10vh;
    right: 121vw;
    opacity: 0;
    transition: 0.24s opacity, 0.24s left;
}

.right-bg-show {
    right: 0;
}

.right-bg-hide {
    right: 121vw;
}

.right-bg-color:after {
    content: '';
    width: 120vh;
    height: 120vh;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    right: -30vh;
}
</style>
5月 06

在项目中,如果说什么组件用的最多。那弹窗觉得是第一个。想要一个好的弹窗,也是要花一些心思。这里从这几个方面来说。

  1. 展示效果好看。
  2. 弹窗一般分背景底色和弹窗实体。怎么做到好看呢。底色要渐变出来,底色要像子弹一样有一个圆头,刷一样出来好看。
  3. 弹窗实体怎么好看。可以先快速再慢速的展示出来。也可以像弹簧一样来回动弹几下出来。
  4. 弹出的方向可配置,背景颜色,透明度可配置。
  5. 弹窗实体中,内容太高或太宽怎么处理呢。
  6. 总之,就是要做的好看。

只有想到了才会去做到,去实现。那么就一点点实现吧。

实现过程

在实现这些效果中, css 占据了很重要的一部分。比如渐变、伸出。

实现渐变可以用 opacity、rgba。

想实现伸出弹出可以用 transform、keyframes,甚至绝对定位。

那想要一个好的弹射效果,先想到的可能会是 keyframes。它可以很精细的对目标的状态进行更改操作。可是吧,transform 可以使用 step 和 cubic-bezier(贝塞尔曲线),也可以实现弹簧的那种效果。这样实现起来就简单好多了(代码要少要少要干净),但是,觉得还是不够细腻,不够好。

先看看效果吧。

出了 css,其他就是 vue3 相关的东东了。下边直接贴出代码。

这里有个缺点,就是使用贝塞尔曲线来做弹出效果时候,底端会露白。其实,也想到了一个方法。传一个实体的背景色过来,在背景那边补上颜色也是可以解决的。

Code

popupLayer.vue

<template>
    <view v-if="controller.open" class="popup-layer" catchtouchmove="true">
        <view v-if="direction == 'top'" class="top-bg-color" :class="{ 'top-bg-show': controller.bg, 'top-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>

        <view v-if="direction == 'bottom'" class="bottom-bg-color" :class="{ 'bottom-bg-show': controller.bg, 'bottom-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>

        <view v-if="direction == 'left'" class="left-bg-color" :class="{ 'left-bg-show': controller.bg, 'left-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>

        <view v-if="direction == 'right'" class="right-bg-color" :class="{ 'right-bg-show': controller.bg, 'right-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>

        <view class="popup-content" :style="_location"><slot></slot></view>
    </view>
</template>

<script setup>
import { reactive, defineProps, defineEmits, defineExpose, computed, onMounted, watch } from 'vue';

const controller = reactive({
    open: false,
    lock: false,
    bg: false,
    bgOpacity: 0,
    translate: -100,
    time: null
});

const emits = defineEmits(['onClose']);

const timingFuns = {
    'cubic-bezier': 'transition-timing-function: cubic-bezier(.15,-0.88,.41,1.68);',
    ease: 'transition-timing-function: easy;',
    'ease-in': 'transition-timing-function: ease-in;',
    'ease-out': 'transition-timing-function: ease-out;',
    'ease-in-out': 'transition-timing-function: ease-in-out;',
    linear: 'transition-timing-function: linear;'
};

const props = defineProps({
    direction: {
        type: String,
        default: 'top' // 方向  top,bottom,left,right
    },
    bgOpacity: {
        type: Number,
        default: 0.38
    },
    timingFun: {
        type: String,
        default: 'cubic-bezier'
    }
});

watch(() => props.timingFun, (newValue, oldValue) => {}, {
    immediate: true
});

const _translate = computed(() => {
    const transformObj = {
        top: `transform:translateY(${-controller.translate}%)`,
        bottom: `transform:translateY(${controller.translate}%)`,
        left: `transform:translateX(${-controller.translate}%)`,
        right: `transform:translateX(${controller.translate}%)`
    };
    return transformObj[props.direction];
});

const _location = computed(() => {
    const positionValue = {
        top: 'bottom:0px;width:100%;',
        bottom: 'top:0px;width:100%;',
        left: 'right:0px;top:0px;height:100%;',
        right: 'left:0px;top:0px;height:100%;'
    };

    let style = '';
    if (timingFuns[props.timingFun]) {
        style = timingFuns[props.timingFun];
    }
    return style + positionValue[props.direction] + _translate.value;
});

const open = function() {
    if (controller.open) {
        return;
    }

    controller.open = true;

    let openTimer = setTimeout(() => {
        clearTimeout(openTimer);
        controller.lock = true;
        controller.bg = true;
        controller.bgOpacity = props.bgOpacity;
        controller.translate = -0.1;
        openTimer = null;

        console.log('_location', _location);
    }, 100);

    // 防止误触
    let lockTimer = setTimeout(() => {
        clearTimeout(lockTimer);
        controller.lock = false;
        lockTimer = null;
    }, 500);
};

const close = function() {
    if (controller.timer || controller.lock) {
        return;
    }

    controller.bgOpacity = 0;
    controller.bg = false;
    controller.translate = -100;

    controller.timer = setTimeout(() => {
        clearTimeout(controller.timer);
        controller.open = false;
        controller.timer = null;
        emits('onClose');
    }, 600);
};

defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>
.popup-layer {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 9999;

    .popup-content {
        position: absolute;
        z-index: 1000000;
        transition: transform 0.4s;
    }
}

// 底部出来
.top-bg-color {
    width: 120vw;
    height: 120vh;
    background: #000;
    position: relative;
    left: -10vw;
    top: 121vh;
    opacity: 0;
    transition: 0.24s opacity, 0.24s top;
}

.top-bg-show {
    top: 0;
}

.top-bg-hide {
    top: 121vh;
}

.top-bg-color:after {
    content: '';
    width: 120vw;
    height: 120vw;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    left: 0;
    top: -30vw;
}

// 顶部出来
.bottom-bg-color {
    width: 120vw;
    height: 120vh;
    background: #000;
    position: relative;
    left: -10vw;
    bottom: 121vh;
    opacity: 0;
    transition: 0.24s opacity, 0.24s bottom;
}

.bottom-bg-show {
    bottom: 0;
}

.bottom-bg-hide {
    bottom: 121vh;
}

.bottom-bg-color:after {
    content: '';
    width: 120vw;
    height: 120vw;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    left: 0;
    bottom: -30vw;
}

// 右边出来
.left-bg-color {
    width: 120vw;
    height: 120vh;
    background: #000;
    position: relative;
    top: -10vh;
    left: 121vw;
    opacity: 0;
    transition: 0.24s opacity, 0.24s left;
}

.left-bg-show {
    left: 0;
}

.left-bg-hide {
    left: 121vw;
}

.left-bg-color:after {
    content: '';
    width: 120vh;
    height: 120vh;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: -30vh;
}

// 左边边出来
.right-bg-color {
    width: 120vw;
    height: 120vh;
    background: #000;
    position: relative;
    top: -10vh;
    right: 121vw;
    opacity: 0;
    transition: 0.24s opacity, 0.24s left;
}

.right-bg-show {
    right: 0;
}

.right-bg-hide {
    right: 121vw;
}

.right-bg-color:after {
    content: '';
    width: 120vh;
    height: 120vh;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    right: -30vh;
}
</style>

测试调用的临时 vue

<template>
    <view class="d-flex flex-column w-100">
        <view class="flex-column mt-10 px-30">
            <view class="text-color-3 text-size-30 font-w600">设置方向</view>

            <view class="d-flex align-items-center flex-wrap mt-10">
                <view v-for="(item, index) in directions" :key="index" class="mr-10 mt-10" hover-class="hover-opacity" @tap="setDirections(item)">
                    <view class="d-flex px-16 py-6 border-radius-8 flex-shrink-0" :class="{ 'bg-color-1 text-color-2': item == popupOption.direction, 'bg-color-2 text-color-4': item != popupOption.direction}">
                        <view class="text-size-26"> {{ item }} </view> 
                    </view>
                </view>
            </view>

            <view class="text-color-3 text-size-30 font-w600 mt-30">设置弹射</view>

            <view class="d-flex align-items-center flex-wrap mt-10">
                <view v-for="(item, index) in timingFuns" :key="index" class="mr-10 mt-10" hover-class="hover-opacity" @tap="setTimingFuns(item)">
                    <view class="d-flex px-16 py-6 border-radius-8 flex-shrink-0 action-item" :class="{ 'bg-color-1 text-color-2': item == popupOption.timingFun, 'bg-color-2 text-color-4': item != popupOption.timingFun}">
                        <view class="text-size-26"> {{ item}} </view> 
                    </view>
                </view>
            </view>

            <view hover-class="hover-opacity" class="bg-color-1 text-color-2 text-size-30 border-radius-16 py-20 mt-30 d-flex justify-content-center" @tap="doPopup">开始弹出</view>
        </view>
    </view>

    <popupLayer ref="layer" :direction="popupOption.direction" :timing-fun="popupOption.timingFun" @onClose="onClose">
        <view class="box-shadow-sm" :class="boxClass"></view>
    </popupLayer>
</template>

<script setup>

import { ref, reactive } from 'vue'

const popupOption = reactive({
    'direction': 'top',
    'timingFun': 'cubic-bezier'
});

const directions = ['top', 'bottom', 'left', 'right'];

const timingFuns = ['cubic-bezier', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'];

const layer = ref(null);

const boxClass = ref('bottom-box');

const setDirections = function(value) {
    popupOption.direction = value;

    boxClass.value = { 'bottom': 'top-box', 'top': 'bottom-box', 'left': 'right-box', 'right': 'left-box'}[value]
}

const setTimingFuns = function(value) {
    popupOption.timingFun = value;
}

const doPopup = function() {
    layer.value.open()
}

const onClose = function() {
    console.log('close')
}
</script>

<style>
    .bottom-box {
        width: 100%;
        height: 520upx;
        border-top-left-radius: 20upx;
        border-top-right-radius: 20upx;
        background-color: #ffffff;
    }

    .top-box {
        width: 100%;
        height: 520upx;
        border-bottom-left-radius: 20upx;
        border-bottom-right-radius: 20upx;
        background-color: #ffffff;
    }

    .left-box {
        width: 520upx;
        height: 100vh;
        border-top-right-radius: 20upx;
        border-bottom-right-radius: 20upx;
        background-color: #ffffff;
    }

    .right-box {
        width: 520upx;
        height: 100vh;
        border-top-left-radius: 20upx;
        border-bottom-left-radius: 20upx;
        background-color: #ffffff;
    }
</style>

关于测试用的 vue,里边用到了很多 class,这些 class 都是全局定义好的。足够规范和足够包容就可以少写很多样式了。这样,有一个缺点就是 html 部分特别长。这就是组合起来的好处和缺点。也贴出部分代码。

base.scss

// 布局相关的样式
.d-none {
    display: none;
}

// flex 布局(全用 flex 布局)
.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}
……
// margin
$list: 6 8 12 16 24;

// left
@each $i in $list {
    .ml-#{$i} {
        margin-left: #{$i}upx;
    }
}

@for $i from 1 to 5 {
    .ml-#{$i * 10} {
        margin-left: #{$i * 10}upx;
    }
}

// right
@each $i in $list {
    .mr-#{$i} {
        margin-right: #{$i}upx;
    }
}

@for $i from 1 to 5 {
    .mr-#{$i * 10} {
        margin-right: #{$i * 10}upx;
    }
}

// x
@each $i in $list {
    .mx-#{$i} {
        margin-left: #{$i}upx;
        margin-right: #{$i}upx;
    }
}

@for $i from 1 to 5 {
    .mx-#{$i * 10} {
        margin-left: #{$i * 10}upx;
        margin-right: #{$i * 10}upx;
    }
}

$num: 12;
@while $num < 54 {
    .text-size-#{$num} {
        font-size: #{$num}upx;
    }
    $num: $num + 2;
}

$num: 6;
@while $num < 30 {
    .border-radius-#{$num} {
        border-radius: #{$num}upx;
    }
    $num: $num + 2;
}

还有 css 的变量写法也要用起来。好东西就要用起来,有了变量,才算是真正的程序啊,哈哈。

root: {
--bg-color: #f00;
}

span {
background: var(--bg-color)
}

最后

其实,这里没有对超过宽度或超过高度的处理。这里仅仅是个弹出的工具,仅仅做弹出而已。实体部分都由插槽交给需要用到的地方。

如果真遇到宽度或高度超过的情况,可以套一层 scroll-view 组件。如果实体内容具有可变性,就是有时候会高一点有时候会矮一点(数据驱动ui,数据来源服务器),这个时候给 scroll-view可以加个约束,比如 max-height:calc(100vh - 100px),具体多少,试着来。

相关文章

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

https://zhuanlan.zhihu.com/p/397089242

https://cubic-bezier.com/#.23,-0.47,.44,1.65

https://juejin.cn/post/6844903688029339655

https://juejin.cn/post/6972720564301463565

5月 06

一切都是在发展,一切都是在进步。一切是如此,产品也是如此。 如果还停留在过去,产品的体验(服务、外观、交互、程序自身)就会变差,因为有了对比。这个时候,重构就很有必要了。
我是喜欢求新,求干净,愿意去学,愿意去使用。那么,开始选型和重来吧。

旧的技术栈

服务器:阿里g7 2核8G 6M 带宽 centos8 操作系统
服务器环境:php7.4 + nginx + mysql 8 + redis + …
服务端语言:php
服务端框架:laravel 8
后台框架: vue-element-admin (vue2)
网页版:blade + bootstrap 4
前端框架:uniapp + vue2
上架发布:微信小程序 + 苹果商店
辅助工具:postman + charles

将用的技术栈

服务器:阿里g7 2核8G 5M 带宽 Alibaba Cloud Linux release 3 操作系统
服务器环境:php8.2 + nginx + mysql 8 + redis + …
服务端语言:php
服务端框架:laravel 10
后台框架: 在选择中…
网页版:blade + bootstrap 5(当然也可以选择 Inertia )
前端框架:uniapp + vue3
上架发布:微信小程序 + 百度小程序 + 字节小程序 + 苹果商店
辅助工具:postman + charles

曾经也同时上架过百度小程序和微信小程序。现在要增加到发布四端了。如果用户用起来,web 端会做的更好,还会发布 android 端。上边那四端是一定要发的。

后话

看似改变不大,其实很多地方都变了。包括一些写法。有云,条条大路通罗马,总有那么几条,那么一条是最好的。所以在选择的问题和使用的问题上很重要。

为什么还用 php。目前,服务端语言就 php 熟练一些。go 和 node.js 虽然使用过,也仅仅是使用过。太久没碰,也差不多丢了。 java 也能看懂一些,还是不够做一个完整的项目。php 有 laravel 框架,足够可以做很多很多事情了。

为什么用 uniapp 。uniapp 的确是个好东西。国内很多公司很多人都在用。一套代码,可以发布多个平台(多家小程序 + app + h5 + 快应用),而且支持 vue 的写法。如果没有特殊要求的 app,用 uniapp 来开发绝对是一个又快又好用的工具。如果有特殊需要,可以用 flutter。想当初,用 flutter 也干出个 app 出来。后来出了 dart2.0,更好了。

还有,如果有需要,可以开发桌面应用,比如使用 Electron,还有 Tauri。如果这两个都没用过,估计会选择 Tauri 吧。

为什么用 vue3。vue3 在性能和写法,还有一些新的功能特性上,都比 vue2 要强。有新的版本,为什么不用呢。总得前进吧。为什么不用 react 呢。用的东西太多太杂了,都记不住了。先不学 react 和 用它吧。

5月 05

vue3 出来那么久了。以前的项目 vue2 也该更更更了。新项目那必须得 vue3 了。不过,有些关键的写法,会有些不同。一点点的来。

globalProperties

在 vue2,想定义一个全局的属性(方法或变量),只需要定义在 Vue.prototype 上就可以。然后在 template 中可以直接使用,在 script 中,通过 this 来访问使用。

到了 vue3 这里,就不一样了。这些方法和属性定义在 globalProperties, 就是 app.config.globalProperties 上。

比如:

import App from './App'

import {
    createSSRApp
} from 'vue'

const app = createSSRApp(App)

app.config.globalProperties.$test = (value) => {
    console.log('test ' + value)
}

vue3 是干掉 this 的。使用的时候这样。

import { onMounted, getCurrentInstance } from 'vue'

onMounted(() => {
    const { proxy,  ctx } = getCurrentInstance()
    proxy.$test('全局调用')
})

template 中,则可以直接使用。 getCurrentInstance 还有一个输出 ctx,这个和 vue2 时候的 this 一个样。

5月 04

laravel orm 的多态有的时候是真的好用。比如,我们在设计一个消息表的时候,这个多态就很有用。消息对于整个项目,是一个基础的统称。比如,有人注册账号了,给他一个欢迎的消息。 有人充值了一个会员,给他一个充值消息。有人参加了一个活动,给他一个参加的消息。就这样一个场景。在消息表里边,我们仅仅需要构建这些字段 user_id、content、messageable_id、messageable_type、status、updated_at、created_at 就可以了。是不是很干净,是不是很舒适。后端的东西往往是给前端服务的。我们要会联想到前端的一个场景。有一个消息列表,我们点击消息,应该可以查看到消息的详情。比如会员消息详情、充值详情(当然有的时候是不需要详情,比如欢迎语。)这个时候,多态一对一在这个场景就很符合。这个多态和面向对象里的多态(继承、接口)不一样,但有相似的意境。

开始

多态的重要信息是 xxxable_id、和 xxxable_type。一个对应的是目标对象的 id,一个对应的是目标对象的类名(比如 App\Models\Topic)。

在 xxx 模型中。我们要定义一个 xxxable 方法。这里以 Message 模型为例。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Relations\MorphTo;

class Message extends Model
{
    use HasFactory;

    protected $fillable = ['user_id', 'content', 'messageable_id', 'messageable_type'];

    public function user()
    {
        return $this->belongsTo(User::class);
    }

    /**
     * 获取父级的对象
     */
    public function messageable(): MorphTo
    {
        return $this->morphTo();
    }
}

在父级对象中,你也可以定义相对应的关系。当然也可以不定义。在这个场景中,我们重要的是消息列表以及消息对应的对象。所以仅仅在消息中定义 morph 就好。

使用

比如: Message::query()->take(10)->with('messageable')->get();

一个完整的过程。我们有这三个模型:Message(消息)、Topic(话题)、Member(会员)。

$user = $request->user();
$data = [xxx];
$topic = Topic::create($data);

# 获取类名
$topicClass = get_class($topic);

# 创建消息
Message::create([
    'user_id' => $user->id,
    'content' => '您的话题已创建,请等待审核',
    'messageable_id' => $topic->id,
    'messageable_type' => $topicClass
 ]);

---------------------------------------
$member = Member::create($data);

Message::create([
    'user_id' => $user->id,
    'content' => '您已成为会员,请愉快的玩耍吧',
    'messageable_id' => $member->id,
    'messageable_type' => get_class($member)
 ]);

再啰嗦一点点

上边说了,前端是要点击消息,做对应的跳转的。既然后端是动态绑定(多态算是动态的一种绑定吧),那么前端就是一个强制的硬性的绑定了,可以理解为是枚举。可以用 if 来搞定。因为消息的种类就那么多,不像数据库,有成千上万百万千万的数据。

if (消息类型一) {
    跳转到一
} else if (消息类型二) {
    跳转到二
}

因为有了 messageable_id,我们就可以通过接口来请求各自所想要的信息了。

对于消息列表。如果没有特殊的要求 messageable 我们也是不需要在这里就请求上的。因为请求了,就需要数据库去查询。查询了又不用,那不是浪费。这里看具体情况哈。

中文文档

https://learnku.com/docs/laravel/10.x/eloquent-relationshipsmd/14889#5981a6

5月 01

虽然有 docker , 但还是喜欢用 homestead 开发环境。这个时候,一些旧的项目可能会用到比较低版本的 php,这个时候切换 php 版本就是一个常用的操作。

使用 php 版本

homestead 环境中,项目使用 php 的哪个版本,可以在 Homestead.yaml 文件中进行配置。比如:

sites:
    - map: work.xiangrong.com
      to: /home/vagrant/code/zhoulin/work.xiangrong.com/public
      php: "7.4"

这里指定好 php 版本就好。

但是,当 homestead 环境中当前使用的 php 版本是 php 8php 5.6 这些。使用 composer 或项目本身就有可能报错。这个时候,我们就需要将 homestead 环境的 php 版本切换的和项目所配置的一样。

补充

如果切换成对应的 php 版本还会出 badgateway 这样的错误,可以试着重启 php 看看。

# 这里以 php 7.4 为例
sudo /etc/init.d/php7.4-fpm restart

操作

# 查看当前环境中的 php 版本
php -v

# 查看所有 php 版本和当前版本
sudo update-alternatives --display php

# 执行后,会列出当前 php 所有版本和编号,输入编号,切换到执行的版本
sudo update-alternatives --config php

其实

其实,想切换到某个 php 版本。直接输入就可以了,也不用向上边那样敲那么长的命令。 比如,想切换到 php7.4 版本。直接输入 php74 回车即可。同理,想切换到 php8.2 版本,直接输入 php82 回车即可。这些命令,可以在 Homestead 目录下的 aliases 文件中找到。

function php73() {
    sudo update-alternatives --set php /usr/bin/php7.3
    sudo update-alternatives --set php-config /usr/bin/php-config7.3
    sudo update-alternatives --set phpize /usr/bin/phpize7.3
}

function php74() {
    sudo update-alternatives --set php /usr/bin/php7.4
    sudo update-alternatives --set php-config /usr/bin/php-config7.4
    sudo update-alternatives --set phpize /usr/bin/phpize7.4
}

function php80() {
    sudo update-alternatives --set php /usr/bin/php8.0
    sudo update-alternatives --set php-config /usr/bin/php-config8.0
    sudo update-alternatives --set phpize /usr/bin/phpize8.0
}

function php81() {
    sudo update-alternatives --set php /usr/bin/php8.1
    sudo update-alternatives --set php-config /usr/bin/php-config8.1
    sudo update-alternatives --set phpize /usr/bin/phpize8.1
}

function php82() {
    sudo update-alternatives --set php /usr/bin/php8.2
    sudo update-alternatives --set php-config /usr/bin/php-config8.2
    sudo update-alternatives --set phpize /usr/bin/phpize8.2
}

今天五月一日。