<template>
<view class="home">
<view class="courseIntroduce_box">
<view class="courseIntroduce_des">
<view class="courseIntroduce_info">{{ introduce }}</view>
</view>
<courseIntroduceData :msg="introduceList"/>
<view class="question_line"></view>
<view class="courseIntroduce_tab_box">
<view class="courseIntroduce_tab_nav">
<view v-for="(item,index) in items" :class="{ 'btna':count === index }" @tap="change(index)" :key="index">{{ item }}</view>
</view>
<view class="courseIntroduce_tab_con">
<view class="discount_info" :class="{dis:count === 0}">
内容1
</view>
<view class="discount_info" :class="{dis:count === 1}">
内容2
</view>
</view>
</view>
</view>
</view>
</template>

<script>
import courseIntroduceData from "../../../components/courseIntroduce-data/courseIntroduce-data.vue"
export default {
data() {
return {
introduce:"",
introduceList:[],
items:["课程章节","课程介绍"],
count:0
}
},
components:{
courseIntroduceData
},
onLoad(options) {

        uni.request({  
            url:"https://www.itbaizhan.cn/api/course/detail",  
            data:{  
                id:options.id,  
                course:options.course  
            },  
            success: (res) => {  
                this.introduce = res.data.data.introduce  
                this.introduceList = res.data.data.introduceList  
            }  
        })  
    },  
    methods: {  
        change(index){  
            this.count = index;  
        }  
    }  
}  

</script>

<style lang="scss">
.courseIntroduce_box {
display: flex;
box-sizing: box;
flex-direction: column;
margin-bottom: 90px;

    .courseIntroduce_des {  
        display: flex;  
        box-sizing: border-box;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        width: 100%;  
        background-color: #0c9c8f;  
        padding: 0 10px 15px;  
        overflow: hidden;  

        .courseIntroduce_info {  
            display: flex;  
            box-sizing: box;  
            width: 100%;  
            color: #fff;  
            font-size: 16px;  
            line-height: 24px;  
        }  
    }  

    .courseIntroduce_tab_box {  
        display: flex;  
        box-sizing: border-box;  
        flex-direction: column;  

        .courseIntroduce_tab_nav {  
            display: flex;  
            box-sizing: border-box;  
            flex-direction: row;  
            background-color: #fff;  
            border-bottom: 1px solid #e4e4e4;  
            margin-bottom: 20px;  

            view {  
                height: 50px;  
                line-height: 50px;  
                font-size: 16px;  
                flex-grow: 1;  
                text-align: center;  
                background-color: #fff;  
            }  
        }  
        .discount_info {  
            display: nome;  
        }  
        .btna {  
            display: flex;  
            box-sizing: border-box;  
            justify-content: center;  
            color: $zhu-color;  
            position: relative;  
        }  
        .btna::after {  
            content: '';  
            width: 40px;  
            height: 3px;  
            background-color: $zhu-color;  
            position: absolute;  
            bottom: 0;  
            left: 50%;  
            margin-left: -20px;  
        }  
        .dis {  
                display: block;  
        }  
    }  
}  

</style>
这个编程运行是这个效果：

<view class="flex align-center">  
        <checkbox-group>  
            <label>  
                <checkbox value="cb" checked="true" /> 记住密码  
            </label>  
        </checkbox-group>  
      </view>

colorui.css 文件中注释掉两处即可

checkbox::before {  
    font-family: "cuIcon";  
    content: "\e645";  
    position: absolute;  
    color: #ffffff !important;  
    top: 50%;  
    margin-top: -8px;  
    right: 5px;  
    font-size: 32upx;  
    line-height: 16px;  
    pointer-events: none;  
    transform: scale(1, 1);  
    transition: all 0.3s ease-in-out 0s;  
    /* z-index: 9; */  
}  

/* checkbox .uni-checkbox-input::before, */  
radio .uni-radio-input::before {  
    display: none;  
}

uniapp项目开发在线接单，可定制，可二开，时间充裕，保质保量
有需要请联系 vx : docxxlsx

坦白讲，我真的被uniapp官方以及一些登录插件搞死了，总算是搞成了，记录一下有哪些坑。

先写有哪些坑，因为这些坑太痛苦，太隐藏了，然后官方也好，很多说明也好都没有提到！简直误国误民！
1，SHA1 有两个！一个是你用keystore通过命令行生成的，一个是google play console 里面的（在play console设置=》签名），这两个不是一样的，测试环境用前面的，正式环境用后面的。

我想问一下官方，为什么不说！为什么不说！我想问一下那些搞google 登录插件的，为什么不说！为什么不说！

反正最终我这个是可以的，也没有谁说过要去谷歌审核，但是话说回来，谷歌登录给你装到你app，你说你不要审核，你觉得可能吗！
如果是黄赌毒，用谷歌登录，是什么感觉！问题是我从来没有在官方以及其他任何一个帖子上看到。

本文受众

本文用来解释和指导发布目录从 h5 调整 web 过程，收到影响的用户。

背景

HBuilderX 从 4.06 开始 uni-app 的 web 项目的编译目录从 h5 调整为 web 目录了。

• 调整 uni-app运行 unpackage编译目录 h5目录名改为web

这一条改动很多人没有留意到，沿用历史的持续集成流程，会产生错误，因为目录发生了变更。

改动的原因，在相关 ask 社区中也有回答，主要还是为了统一概念。

早期 uni-app 在 web 端主要使用移动端展示内容，随着功能迭代和使用场景丰富，很多用户在宽屏 PC 端也会选择 uni-app 进行渲染和展示。

相关 api 的返回值，条件编译等已经陆陆续续统一到 web 上来，所以调整编译目录也是在计划中。

考虑到很多用户的使用场景，并不能轻易调整持续构建的流程，这里提供一些临时的兼容方案进行过度，最好的方案还是修改持续集成的流程。

临时兼容方案

如果是类似 jenkins/业务定制的 CICD 流程，可以尝试添加 post scripts，linux 服务器

cp -r unpackage/dist/build/web unpackage/dist/build/h5  
# 或者习惯用 mv，二选一即可  
mv unpackage/dist/build/web unpackage/dist/build/h5

如果你使用 windows 服务器

copy unpackage\\dist\\build\\web unpackage\\dist\\build\\h5

如果也不允许修改 jenkins ，可以尝试添加 npm scripts 添加上方命令。在 build 结束之后继续执行命令。

如果你仍有问题，欢迎留言讨论。

小红书APP源码，1:1还原小红书功能。可接定制二次开发需求。有疑问请随时联系在线客服，谢谢!

主要功能：推荐算法、视频、圈子、购物、直播、小视频、话题、投票、城市、天气、实名认证、发布、任务、邀请、深色模式、广告、采集、暗黑模式、多语言

客户端版本：本程序有H5、小程序、安卓、苹果、电脑端、5端同步共用同一套后台，数据互通。

本程序是我们自主开发，不依赖第三方系统。
接口开发语言：PHP，mysql，thinkphp5
官网地址：www.suxiangw.com
服务承诺：提供技术、维护、更新，提供源代码，合同等服务

在使用 uni-app 开发项目时，会遇到需要在 onLaunch 中请求接口返回结果，并且此结果在项目各个页面的 onLoad 中都有可能使用到的需求，比如微信小程序在 onLaunch 中进行登录后取得 openid 并获得 token，项目各页面需要带上该 token 请求其他接口。

在onLaunch 中的请求是异步的，也就是说在执行 onLaunch 后页面 onLoad 就开始执行了，而不会等待 onLaunch 异步返回数据后再执行，这就导致了页面无法拿到 onLaunch 中异步获取的数据。

使用custom-hooks-plus库可以完美的帮我解决这个问题。

可以定义一个全局变量

// global.ts 文件  
import { proxyData } from 'custom-hooks-plus'  

interface GlobalData {  
  token: string  
  userInfo: number  
}  

export const globalData = proxyData({  
  token: '',  
})  

export function set<K extends keyof GlobalData>(key: K, val: GlobalData[K]) {  
  globalData[key] = val  
}  

export function get<K extends keyof GlobalData>(key: K): GlobalData[K] {  
  return globalData[key]  
}

// App.vue  
import { init } from 'custom-hooks-plus';  

init(  
  {  
    Token: {  
      key: 'token', // 监听global文件中globalData的token的变化  
    }  
  }  
);  

onLaunch(() => {  
  uni.login((res) => {  
    // 进行登录操作，修改globalData中的token  
  })  
})

// 页面中使用  
import { onCustomLoad, onCustomShow } from 'custom-hooks-plus';  

onCustomLoad((options) => {  
  console.log('globalData的token都被修改了才会触发');  
}, ['Token']);

通过上面的代码实现了，页面中的onCustomLoad的回调会等token有值后再执行，完美的解决了onLaunch和onLoad的异步问题。

具体可看：https://github.com/DBAAZzz/custom-hooks-plus

原创研发uniapp+vue3+pinia2+uv-ui+vite4.x跨端仿微信app聊天Uniapp-Wechat。支持编译到H5+小程序端+App端。实现编辑框多行自适应高度消息+emoj混合、长按仿微信语音面板、图片/视频预览、红包/朋友圈等功能。

https://ask.dcloud.net.cn/article/40928

编译h5+小程序+APP端效果

uni-vue3-wechat项目使用HbuilderX4.0.8开发工具，采用vue3 setup语法规范编码。

使用技术

• 开发工具：HbuilderX 4.0.8
• 技术框架：Uniapp+Vue3+Pinia2+Vite4.x
• UI组件库：uni-ui+uv-ui
• 弹框组件：uv3-popup（uniapp+vue3多端自定义弹框组件）
• 自定义组件：uv3-navbar+uv3-tabbar组件
• 缓存服务：pinia-plugin-unistorage
• 编译支持：H5+小程序+APP端

项目结构图

main.js配置

/**  
 * 入口文件 main.js  
*/  

import { createSSRApp } from 'vue'  
import App from './App'  

// 引入pinia状态管理  
import pinia from '@/pinia'  

export function createApp() {  
    const app = createSSRApp(App)  
    app.use(pinia)  
    return {  
        app,  
        pinia  
    }  
}

在web端则是以750px像素布局。

App.vue配置

<script setup>  
    import { provide } from 'vue'  
    import { onLaunch, onShow, onHide, onPageNotFound } from '@dcloudio/uni-app'  

    onLaunch(() => {  
        console.log('App Launch')  

        uni.hideTabBar()  
        loadSystemInfo()  
    })  

    onShow(() => {  
        console.log('App Show')  
    })  

    onHide(() => {  
        console.log('App Hide')  
    })  

    onPageNotFound((e) => {  
        console.warn('Route Error：', `${e.path}`)  
    })  

    // 获取系统设备信息  
    const loadSystemInfo = () => {  
        uni.getSystemInfo({  
            success: (e) => {  
                // 获取手机状态栏高度  
                let statusBar = e.statusBarHeight  
                let customBar  

                // #ifndef MP  
                customBar = statusBar + (e.platform == 'android' ? 50 : 45)  
                // #endif  

                // #ifdef MP-WEIXIN  
                // 获取按钮的布局位置信息  
                let menu = wx.getMenuButtonBoundingClientRect()  
                // 导航栏高度 = 下距离 + 上距离 - 状态栏高度  
                customBar = menu.bottom + menu.top - statusBar  
                // #endif  

                // #ifdef MP-ALIPAY  
                customBar = statusBar + e.titleBarHeight  
                // #endif  

                // 由于globalData在vue3 setup存在兼容性问题，改为provide/inject替代方案  
                provide('globalData', {  
                    statusBarH: statusBar,  
                    customBarH: customBar,  
                    screenWidth: e.screenWidth,  
                    screenHeight: e.screenHeight,  
                    platform: e.platform  
                })  
            }  
        })  
    }  
</script>  

<style>  
    /* #ifndef APP-NVUE */  
    @import 'static/fonts/iconfont.css';  
    /* #endif */  
</style>  
<style lang="scss">  
    @import 'styles/reset.scss';  
    @import 'styles/layout.scss';  
</style>

公共布局模板

项目整体分为顶部区域+内容区+底部区域三个大的模块。

<!-- 公共布局模板 -->  

<!-- #ifdef MP-WEIXIN -->  
<script>  
    export default {  
        /**  
         * 解决小程序class、id问题  
         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效，组件外部传入的class没有挂到组件根节点上，在组件中增加options: { virtualHost: true }  
         * https://github.com/dcloudio/uni-ui/issues/753  
         */  
        options: { virtualHost: true }  
    }  
</script>  
<!-- #endif -->  

<script setup>  
    const props = defineProps({  
        // 是否显示自定义tabbar  
        showTabBar: { type: [Boolean, String], default: false },  
    })  
</script>  

<template>  
    <view class="uv3__container flexbox flex-col flex1">  
        <!-- 顶部插槽 -->  
        <slot name="header" />  

        <!-- 内容区 -->  
        <view class="uv3__scrollview flex1">  
            <slot />  
        </view>  

        <!-- 底部插槽 -->  
        <slot name="footer" />  

        <!-- tabbar栏 -->  
        <uv3-tabbar v-if="showTabBar" hideTabBar fixed />  
    </view>  
</template>

uniapp+vue3实现微信九宫格图像

<script setup>  
    import { onMounted, ref, computed, watch, getCurrentInstance } from 'vue'  

    const props = defineProps({  
        // 图像组  
        avatar: { type: Array, default: null },  
    })  

    const instance = getCurrentInstance()  

    const uuid = computed(() => Math.floor(Math.random() * 10000))  
    const avatarPainterId = ref('canvasid' + uuid.value)  

    const createAvatar = () => {  
        const ctx = uni.createCanvasContext(avatarPainterId.value, instance)  
        // 计算图像在画布上的坐标  
        const avatarSize = 12  
        const gap = 2  
        for(let i = 0, len = props.avatar.length; i < len; i++) {  
            const row = Math.floor(i / 3)  
            const col = i % 3  
            const x = col * (avatarSize + gap)  
            const y = row * (avatarSize + gap)  

            ctx.drawImage(props.avatar[i], x, y, avatarSize, avatarSize)  
        }  
        ctx.draw(false, () => {  
            // 输出临时图片  
            /* uni.canvasToTempFilePath({  
                canvasId: avatarPainterId.value,  
                success: (res) => {  
                    console.log(res.tempFilePath)  
                }  
            }) */  
        })  
    }  

    onMounted(() => {  
        createAvatar()  
    })  

    watch(() => props.avatar, () => {  
        createAvatar()  
    })  
</script>  

<template>  
    <template v-if="avatar.length > 1">  
        <view class="uv3__avatarPainter">  
            <canvas :canvas-id="avatarPainterId" class="uv3__avatarPainter-canvas"></canvas>  
        </view>  
    </template>  
    <template v-else>  
        <image class="uv3__avatarOne" :src="avatar[0]" />  
    </template>  
</template>  

<style lang="scss" scoped>  
    .uv3__avatarPainter {background-color: #eee; border-radius: 5px; overflow: hidden; padding: 2px; height: 44px; width: 44px;}  
    .uv3__avatarPainter-canvas {height: 100%; width: 100%;}  
    .uv3__avatarOne {border-radius: 5px; height: 44px; width: 44px;}  
</style>

项目中顶部导航条、底部菜单栏、各种弹窗功能均是使用自定义组件实现功能。

uniapp+vue3聊天功能

<view v-if="voicePanelEnable" class="uv3__voicepanel-popup">  
    <view class="uv3__voicepanel-body flexbox flex-col">  
        <!-- 取消发送+语音转文字 -->  
        <view v-if="!voiceToTransfer" class="uv3__voicepanel-transfer">  
            <!-- 提示动效 -->  
            <view class="animtips flexbox" :class="voiceType == 2 ? 'left' : voiceType == 3 ? 'right' : null"><Waves :lines="[2, 3].includes(voiceType) ? 10 : 20" /></view>  
            <!-- 操作项 -->  
            <view class="icobtns flexbox">  
                <view class="vbtn cancel flexbox flex-col" :class="{'hover': voiceType == 2}" @click="handleVoiceCancel"><text class="vicon uv3-icon uv3-icon-close"></text></view>  
                <view class="vbtn word flexbox flex-col" :class="{'hover': voiceType == 3}"><text class="vicon uv3-icon uv3-icon-word"></text></view>  
            </view>  
        </view>  

        <!-- 识别结果状态 -->  
        <view v-if="voiceToTransfer" class="uv3__voicepanel-transfer result fail">  
            <!-- 提示动效 -->  
            <view class="animtips flexbox"><uni-icons type="info-filled" color="#fff" size="20"></uni-icons><text class="c-fff">未识别到文字</text></view>  
            <view class="icobtns flexbox">  
                <view class="vbtn cancel flexbox flex-col" @click="handleVoiceCancel"><text class="vicon uv3-icon uv3-icon-chexiao"></text>取消</view>  
                <view class="vbtn word flexbox flex-col"><text class="vicon uv3-icon uv3-icon-audio"></text>发送原语音</view>  
                <view class="vbtn check flexbox flex-col"><text class="vicon uv3-icon uv3-icon-duigou"></text></view>  
            </view>  
        </view>  

        <!-- 背景语音图 -->  
        <view class="uv3__voicepanel-cover">  
            <image v-if="!voiceToTransfer" src="/static/voice_bg.webp" :webp="true" mode="widthFix" style="width: 100%;" />  
        </view>  
        <!-- 提示文字 -->  
        <view v-if="!voiceToTransfer" class="uv3__voicepanel-tooltip">{{voiceTypeMap[voiceType]}}</view>  
        <!-- 背景图标 -->  
        <view v-if="!voiceToTransfer" class="uv3__voicepanel-fixico"><text class="uv3-icon uv3-icon-audio fs-50"></text></view>  
    </view>  
</view>

Okay，综上就是uni-app+vue3实战开发微信app聊天项目的一些知识分享。

作者：xiaoyan2015
链接： https://juejin.cn/post/7363121890791899170
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

dcloud有销售联系方式吗？

仅在微信小程序测试，多端请自行添加条件编译

首先是一个 worklet.ts 的工具

declare const wx: {  
  worklet: {  
    timing: (value: number, options?: { duration?: number, easing?: any }, callback?: Function) => AnimationObject  
    runOnJS: any  
    shared: <T>(val: T) => SharedValue<T>  
    derived: <T>(val: () => T) => SharedValue<T>  
    Easing: {  
      in: any  
      out: any  
      inOut: any  
      ease: any  
    }  
  }  
}  

export interface SharedValue<T = any> { value: T }  
export type AnimationObject = any  

export const worklet = wx.worklet  

export function getMpInstance() {  
  return (getCurrentInstance()?.proxy as any).$scope  
}  

export interface MpInstance {  
  applyAnimatedStyle: (selector: string, callback: () => Record<string, any>) => void  
}  

export function workletValue<T>(val: T) {  
  return worklet.shared(val)  
}  

export function workletDerived<T>(val: () => T) {  
  return worklet.derived(val)  
}  

export function workletMethods<T extends { [key: string]: Function }>(methods: T) {  
  const mpInstance = getMpInstance()  

  for (const key in methods)  
    mpInstance[key] = methods[key]  

  return methods  
}  

export function useApplyAnimatedStyle() {  
  const mpInstance = getMpInstance()  
  return (selector: string, callback: () => Record<string, any>) => {  
    mpInstance.applyAnimatedStyle(selector, callback)  
  }  
}  

export const GestureState = {  
  POSSIBLE: 0, // 0 此时手势未识别，如 panDown等  
  BEGIN: 1, // 1 手势已识别  
  ACTIVE: 2, // 2 连续手势活跃状态  
  END: 3, // 3 手势终止  
  CANCELLED: 4, // 4 手势取消，  
}  

export const ScrollState = {  
  scrollStart: 0,  
  scrollUpdate: 1,  
  scrollEnd: 2,  
}

使用案例

<script lang="ts">  
export default {  
  options: {  
    virtualHost: true,  
  },  
}  
</script>  

<script setup lang="ts">  
const props = defineProps<{  
  open: boolean  
}>()  

const _height = workletValue(0)  

const applyAnimatedStyle = useApplyAnimatedStyle()  
const { getBoundingClientRect } = useSelectorQuery()  

onMounted(() => {  
  applyAnimatedStyle('.collapse-item', () => {  
    'worklet'  

    return {  
      height: _height.value < 0 ? 'auto' : `${_height.value}px`,  
    }  
  })  
})  

watch(() => props.open, () => {  
  getBoundingClientRect('.collapse-content')  
    .then(rect => rect.height ?? 0)  
    .then((height) => {  
      if (!props.open) {  
        if (_height.value === -1)  
          _height.value = height  
        _height.value = worklet.timing(0, { duration: 300, easing: worklet.Easing.inOut(worklet.Easing.ease) })  
      }  
      else {  
        _height.value = worklet.timing(height, { duration: 300, easing: worklet.Easing.inOut(worklet.Easing.ease) }, () => {  
          'worklet'  
          if (_height.value === height)  
            _height.value = -1  
        })  
      }  
    })  
})  
</script>  

<template>  
  <view class="collapse-item block overflow-hidden">  
    <view class="collapse-content block">  
      <slot />  
    </view>  
  </view>  
</template>  

worklet js 互调 inject popup 示例
popup.ts

const [useProvidePopupStore, usePopupStoreInner] = createInjectionState((close: () => void) => {  
  const _transY = workletValue(1000)  
  const _scrollTop = workletValue(0)  
  const _startPan = workletValue(true)  
  const _popupHeight = workletValue(1000)  

  return { _transY, _scrollTop, _startPan, _popupHeight, close }  
})  

export { useProvidePopupStore }  

export function usePopupStore() {  
  const popupStore = usePopupStoreInner()  
  if (popupStore == null)  
    throw new Error('Please call `useProvidePopupStore` on the appropriate parent component')  
  return popupStore  
}  

export function usePopupWorkletMethods() {  
  const { _popupHeight, _scrollTop, _startPan, _transY, close } = usePopupStore()  

  return workletMethods({  
    openPopup() {  
      'worklet'  
      _transY.value = worklet.timing(0, { duration: 200 })  
    },  
    closePopup() {  
      'worklet'  
      _transY.value = worklet.timing(_popupHeight.value, { duration: 200 })  
      worklet.runOnJS(close)()  
    },  
    // shouldPanResponse 和 shouldScrollViewResponse 用于 pan 手势和 scroll-view 滚动手势的协商  
    shouldPanResponse() {  
      'worklet'  
      return _startPan.value  
    },  
    shouldScrollViewResponse(pointerEvent: any) {  
      'worklet'  
      // transY > 0 说明 pan 手势在移动半屏，此时滚动不应生效  
      if (_transY.value > 0)  
        return false  
      const scrollTop = _scrollTop.value  
      const { deltaY } = pointerEvent  
      // deltaY > 0 是往上滚动，scrollTop <= 0 是滚动到顶部边界，此时 pan 开始生效，滚动不生效  
      const result = scrollTop <= 0 && deltaY > 0  
      _startPan.value = result  
      return !result  
    },  
    handlePan(gestureEvent: any) {  
      'worklet'  
      if (gestureEvent.state === GestureState.ACTIVE) {  
        const curPosition = _transY.value  
        const destination = Math.max(0, curPosition + gestureEvent.deltaY)  
        if (curPosition === destination)  
          return  
        _transY.value = destination  
      }  

      if (  
        gestureEvent.state === GestureState.END  
        || gestureEvent.state === GestureState.CANCELLED  
      ) {  
        if (gestureEvent.velocityY > 500 && _transY.value > 50)  
          this.closePopup()  
        else if (_transY.value > _popupHeight.value / 2)  
          this.closePopup()  
        else  
          this.openPopup()  
      }  
    },  
    adjustDecelerationVelocity(velocity: number) {  
      'worklet'  
      const scrollTop = _scrollTop.value  
      return scrollTop <= 0 ? 0 : velocity  
    },  
    handleScroll(evt: any) {  
      'worklet'  
      _scrollTop.value = evt.detail.scrollTop  
    },  
  })  
}  

popup.vue

<script lang="ts">  
export default {  
  options: {  
    virtualHost: true,  
  },  
}  
</script>  

<script setup lang="ts">  
import { useProvidePopupStore } from './popup'  

const props = withDefaults(defineProps<{  
  open: boolean  
  fullScreen?: boolean  
  rounded?: boolean  
}>(), {  
  fullScreen: false,  
  rounded: true,  
})  

const emit = defineEmits<{  
  (e: 'update:open', val: boolean): void  
  (e: 'scrolltolower'): void  
  (e: 'leave'): void  
  (e: 'afterLeave'): void  
  (e: 'enter'): void  
  (e: 'afterEnter'): void  
}>()  

function onClose() {  
  emit('update:open', false)  
}  

const { _transY, _popupHeight } = useProvidePopupStore(onClose)  

const applyAnimatedStyle = useApplyAnimatedStyle()  

const { getBoundingClientRect } = useSelectorQuery()  

onMounted(() => {  
  getBoundingClientRect('.popup-container').then((res) => {  
    _transY.value = _popupHeight.value = res.height ?? 0  
  })  

  applyAnimatedStyle('.popup-container', () => {  
    'worklet'  
    return {  
      'transform': `translateY(${_transY.value}px)`,  
      'box-shadow': `0px 0px ${_transY.value !== _popupHeight.value ? 10 : 0}px 0px rgba(0, 0, 0, 0.2)`,  
    }  
  })  

  applyAnimatedStyle(`.popup-mask`, () => {  
    'worklet'  
    return {  
      opacity: `${1 - _transY.value / _popupHeight.value}`,  
      display: `${_transY.value !== _popupHeight.value ? 'flex' : 'none'}`,  
    }  
  })  
})  

function onAfterEnter() {  
  emit('afterEnter')  
}  

function onAfterLeave() {  
  emit('afterLeave')  
}  

watch(() => props.open, () => {  
  if (props.open) {  
    emit('enter')  
    _transY.value = worklet.timing(0, { duration: 200 }, () => {  
      'worklet'  

      worklet.runOnJS(onAfterEnter)()  
    })  
  }  
  else {  
    emit('leave')  
    _transY.value = worklet.timing(_popupHeight.value, { duration: 200 }, () => {  
      'worklet'  

      worklet.runOnJS(onAfterLeave)()  
    })  
  }  
})  
</script>  

<template>  
  <root-portal>  
    <view class="popup-mask absolute left-0 top-0 h-screen w-screen" @tap="onClose" />  
    <view class="popup-container absolute bottom-0 w-screen overflow-hidden bg-white" :class="[rounded && 'rounded-t-5', fullScreen ? 'h-screen' : 'h-70vh']">  
      <slot />  
    </view>  
  </root-portal>  
</template>  

<style>  
.popup-container {  
  z-index: 999;  
  transform: translateY(100%);  
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);  
}  

.popup-mask {  
  z-index: 998;  
  background-color: rgba(0, 0, 0, 0.5);  
  display: none;  
}  
</style>  

popup-drag-view.vue

<script lang="ts">  
export default {  
  options: {  
    virtualHost: true,  
  },  
  behaviors: [virtualHostClassBehavior],  
}  
</script>  

<script setup lang="ts">  
import { usePopupWorkletMethods } from './popup'  

const { handlePan } = usePopupWorkletMethods()  

const virtualHostClass = useVirtualHostClass()  

const mergedClass = virtualHostClass  
</script>  

<template>  
  <pan-gesture-handler :worklet:ongesture="handlePan.name">  
    <view :class="mergedClass">  
      <slot />  
    </view>  
  </pan-gesture-handler>  
</template>  

popup-scroll-view.vue

<script lang="ts">  
export default {  
  options: {  
    virtualHost: true,  
  },  
  behaviors: [virtualHostClassBehavior],  
}  
</script>  

<script setup lang="ts">  
import { usePopupWorkletMethods } from './popup'  

defineProps<{  
  type: string  
}>()  

defineEmits(['scrolltolower'])  

const { handlePan, shouldPanResponse, shouldScrollViewResponse, adjustDecelerationVelocity, handleScroll } = usePopupWorkletMethods()  

const virtualHostClass = useVirtualHostClass()  

const mergedClass = virtualHostClass  
</script>  

<template>  
  <pan-gesture-handler  
    tag="pan"  
    :worklet:should-response-on-move="shouldPanResponse.name"  
    :simultaneous-handlers="['scroll']"  
    :worklet:ongesture="handlePan.name"  
  >  
    <vertical-drag-gesture-handler  
      tag="scroll"  
      native-view="scroll-view"  
      :worklet:should-response-on-move="shouldScrollViewResponse.name"  
      :simultaneous-handlers="['pan']"  
    >  
      <scroll-view  
        :class="mergedClass"  
        scroll-y  
        :worklet:adjust-deceleration-velocity="adjustDecelerationVelocity.name"  
        :worklet:onscrollupdate="handleScroll.name"  
        type="list"  
        :show-scrollbar="false"  
        @scrolltolower="$emit('scrolltolower')"  
      >  
        <slot />  
      </scroll-view>  
    </vertical-drag-gesture-handler>  
  </pan-gesture-handler>  
</template>  

使用方式

<u-popup v-model:open="open">  
      <u-popup-drag-view v-if="!roomDetail" class="flex-1">  
        <u-loading />  
      </u-popup-drag-view>  
      <u-popup-scroll-view v-else class="flex-1" type="list">  
        <view class="py-4">  
          <view  
            v-for="player in roomDetail?.players"  
            :key="player.steam"  
            class="mb-2 flex-row items-center px-4"  
            @click="onRoomPlayer(player.steam)"  
          >  
            <view>  
              <u-avatar class="h-8 w-8" :src="player.avatar" />  
            </view>  
            <view class="ml-2 flex-1 truncate text-sm">  
              {{ player.name }}  
            </view>  
            <view class="ml-2 text-xs text-neutral-500 font-mono">  
              {{ player.elo }}  
            </view>  
            <view class="ml-2" />  
          </view>  
          <view class="h-[var(--safe-bottom)]" />  
        </view>  
      </u-popup-scroll-view>  
    </u-popup>

至此，便可以细粒度的调整popup的手势协商
在需要用到scroll-into-view的时候 slot中的元素无法被定位
便可以再次复用usePopupWorkletStore来再次实现定制化的popup-scroll-view

workletMethods的实现中，微信小程序会为具名worklet func 添加 _worklet_factory到包含他的object中 (非具名不会处理) 所以需要全部assgin到mpinstance上

我这边遇到的情况是图片资源命名错误， 图片从蓝湖导出的是由名字是xxx@2x.png使用时没有改名把@去掉就行了

4月12日凌晨2点，随着最后一条数据流的平稳迁移，语雀正式完成了至支付宝云开发的切换，翻开了业务发展的新篇章。这次迁移不仅是技术架构的升级，更是语雀在安全性和弹性伸缩能力方面的一次飞跃，为未来迎接更大的挑战做好了充足的准备。

一、迁移前景及背景分析

语雀当前用户达千万级，云函数的日调用量在 1kw 左右。过去，由于传统架构的局限，语雀面临着日益增长的安全及弹性挑战。高昂的维护成本、难以适应流量波动的扩容需求，以及不断升级的安全威胁，成为亟需解决的痛点。迁移至支付宝云开发，代表了对这些挑战的积极回应和预见性规划。

二、调研与规划阶段

在详尽的预期效益分析后，语雀选定了支付宝云开发平台，以期提高安全能力和云资源的弹性伸缩能力，同时降低成本。迁移前的准备工作包括对团队的培训和新环境的搭建，确保迁移过程的顺畅。

三、迁移实施和成果

利用语雀强大的文档管理能力，团队管理了整个迁移计划的文档和进度，确保每一步都有据可循。在搭建支付宝云开发环境后，逐一迁移了云函数，并实施了闭环的数据迁移与同步策略。经过严格的测试和验证，迁移成功切流。迁移完成后的语雀小程序，展现出了显著的改进与提升：

安全升级，护航文档创作

安全是任何线上平台的生命线，对于承载大量知识内容的语雀来说更是如此。

通过迁移至支付宝开发，语雀获得了更强大的安全防护能力。支付宝云开发提供了全面的安全解决方案，包括DDoS防护、WAF、漏洞扫描等，有效保障平台抵御各类安全威胁。同时，安全应急响应机制也得到了显著提升，保障用户数据安全和平台稳定运行。

弹性伸缩，资源高效利用

随着用户量和业务规模的增长，平台需要具备灵活的资源伸缩能力。

支付宝云开发的弹性伸缩功能，完美地解决了这一需求。语雀可以根据业务流量、资源使用率等指标，自动调整计算资源，实现资源的按需分配和高效利用。这种弹性伸缩能力不仅降低了机器成本，也大大缩短了扩缩容时间，保障平台稳定应对流量高峰。

易用性强，开发效率提升

支付宝云开发平台为开发者提供了简洁易用的开发环境和丰富的功能组件。

语雀团队通过使用云函数、云数据库等云开发产品，快速实现了业务逻辑的迁移和功能的迭代。云开发平台的低代码特性，降低了开发门槛，让开发者更专注于业务逻辑的实现，显著提升了开发效率。

优化成本，助力业务发展

语雀迁移至支付宝云开发平台后，不仅获得了更强的安全防护能力和弹性伸缩能力，也实现了成本最优控制的目标。资源的高效利用和开发效率的提升，为语雀节省了大量的运营成本，也为业务的快速发展提供了强有力的支持。

四、支付宝云开发：开发者的首选

语雀迁移支付宝云开发平台的成功案例，充分展现了云开发产品的易用性、稳定性和降本提效的优势。对于开发者而言，云开发是构建现代化应用的理想选择，它可以帮助开发者：

▪️ 专注于业务逻辑： 无需关注底层基础设施，专注于业务逻辑的实现。
▪️ 快速构建应用： 丰富的云端能力和完善的工具链，帮助开发者快速构建应用。
▪️ 降低开发成本： 免去服务器运维，降低开发和运维成本。

如果您正在寻找一个高效、稳定、安全的开发平台，支付宝云开发将是您的不二选择。