更新记录

1.0.0(2022-01-24)

features

  • 添加转换函数

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

tob-hook-wrap

可以将通用的 uniapp-api 转换为 composition-api 的工具



动机 🐗

在开发过程中,uniapp-api 的回调形式在 vue3 可以用更加简洁的方式来表达,同时赋予更灵活的操作。



规则 🦕

只要需要 success, fail, completeuniapp-api 就可以转换为更简单的 composition-api

  • success 的结果会被设置到 result.value
  • fail 的结果会被设置到 error.value
  • 函数的执行加载状态将被设置到 loading.vue

例如 uni.request

// 原生
uni.request({
    url: '...',
    data: {
        name: '张三',
        age: 18
    },
    success(data) {
        console.log(data) // 数据
    },
    fail(error) {
        console.log(error) // 错误
    },
    complete() {
        console.log(false) // loading 结束
    }
})

// 现在
const { result, error, loading } = useRequest({
    url: '...',
    data: {
        name: '张三',
        age: 18
    }
})



例子 🐸

1. useRequest

// composables/request.js
import { $U } from "@/uni_modules/tob-use-wrap/index.js"

export const useRequest = $U(uni.request)
<!-- 页面中 -->
<template>
    <view>
       <view>数据结果: {{result}}</view>
       <view>加载状态: {{loading}}</view>
       <view>错误信息: {{error}}</view>
    </view>
</template>

<script>
import { useRequest } from "@/composables/request.js"
export default {
    setup() {
        const { result, loading, error } = useRequest({
            url: '...',
            data: {
                age: 18,
                name: '张三'
            }
        })

        return {
            result, // 数据结果
            error, // 错误信息
            loading // 加载状态
        }
    }
}
</script>


2. useUploadFile

// composables/uploadFile.js
import { watch } from "vue"
import { $U } from "@/uni_modules/tob-use-wrap/index.js"

export const useUploadFile = $U(uni.uploadFile)
<!-- 页面中 -->
<template>
    <view>
       <view>上传结果: {{result}}</view>
       <view>加载状态: {{loading}}</view>
       <view>错误信息: {{error}}</view>
    </view>
</template>

<script>
import { useUploadFile } from "@/composables/uploadFile.js"
export default {
    setup() {
        const { result, loading, error } = useUploadFile({
            url: '...',
            filePath: '...'
        })

        return {
            result, // 上传结果
            error, // 错误信息
            loading // 加载状态
        }
    }
}
</script>



组织 🦔

欢迎关注 帝莎编程



License

Made with markthree

Published under MIT License.


隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问