5月 2023 - 第2页共2页

5月 09

发表于 2023年5月9日 • 452 views • 没有评论!

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

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

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

5月 06

写一个弹窗后续

发表于 2023年5月6日 • 373 views • 没有评论!

前端

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

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

写一个弹窗组件

发表于 2023年5月6日 • 485 views • 没有评论!

前端

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

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

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

实现过程

在实现这些效果中， 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

项目重构

发表于 2023年5月6日 • 577 views • 没有评论!

工具,设计

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

旧的技术栈

服务器：阿里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 globalProperties

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

vue,前端

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 多态

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

php

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

homestead 下切换 php 版本

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

linux,php

虽然有 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 8 或 php 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
}

今天五月一日。

Page 2 of 2
<
1
2

非你网

Write the Code. Change the World.

Code

实现过程

Code

最后

相关文章

旧的技术栈

将用的技术栈

后话

globalProperties

开始

使用

再啰嗦一点点

中文文档

使用 php 版本

补充

操作

其实

2023年 5月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31