HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【npm,镜像地址】记录安装依赖代码

Vue
// 腾讯镜像  
http://mirrors.cloud.tencent.com/npm/  
// 中科大镜像  
https://registry.npmjs.org/  
// 淘宝镜像  
https://registry.npmmirror.com  
// 阿里云镜像  
https://npm.aliyun.com/
npm install --registry=https://registry.npmmirror.com

↓↓↓ 各位大佬点点赞

继续阅读 »
// 腾讯镜像  
http://mirrors.cloud.tencent.com/npm/  
// 中科大镜像  
https://registry.npmjs.org/  
// 淘宝镜像  
https://registry.npmmirror.com  
// 阿里云镜像  
https://npm.aliyun.com/
npm install --registry=https://registry.npmmirror.com

↓↓↓ 各位大佬点点赞

收起阅读 »

【解决】上传ipa到appstore报错:This bundle does not support one or more of the devices supported

ipa uniapp iOS打包 iOS

解决方法来源:某个提问文章的评论

报错:This bundle does not support one or more of the devices supported by the previous app version. Your app update must continue to support all devices previously supported. You declare supported devices in Xcode with the Targeted Device Family build setting.
百度翻译:此捆绑包不支持以前的应用程序版本支持的一个或多个设备。您的应用程序更新必须继续支持以前支持的所有设备。您在Xcode中使用目标设备系列生成设置声明支持的设备。

1、是使用hbuilderx的云打包,打包出来的ipa
2、解决方法:勾选之前有勾选的设备

↓↓↓ 各位大佬点点赞

继续阅读 »

解决方法来源:某个提问文章的评论

报错:This bundle does not support one or more of the devices supported by the previous app version. Your app update must continue to support all devices previously supported. You declare supported devices in Xcode with the Targeted Device Family build setting.
百度翻译:此捆绑包不支持以前的应用程序版本支持的一个或多个设备。您的应用程序更新必须继续支持以前支持的所有设备。您在Xcode中使用目标设备系列生成设置声明支持的设备。

1、是使用hbuilderx的云打包,打包出来的ipa
2、解决方法:勾选之前有勾选的设备

↓↓↓ 各位大佬点点赞

收起阅读 »

【解决】新建项目运行到H5,左上角有”取消“字眼

uniapp h5

来源:https://blog.csdn.net/qq_35713752/article/details/110442838

在项目根目录下的index.html,添加

<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />

如图:

↓↓↓ 各位大佬点点赞

继续阅读 »

来源:https://blog.csdn.net/qq_35713752/article/details/110442838

在项目根目录下的index.html,添加

<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />

如图:

↓↓↓ 各位大佬点点赞

收起阅读 »

input输入框选中文本时禁用移动端弹出默认的菜单(剪切、复制、全选、搜索)功能

input

功能需求:input输入框获取焦点后文本需要是选中状态
运行环境:安卓端微信打开网页应用
解决方案:
input监听focus,contextmenu事件
template的代码

<input type="digit" @focus="selectText()" @contextmenu="disableContextMenu()">

script的代码

methods:{  
         selectText() {  
        //选中文本  
            const input = event.currentTarget;  
        if(input.value){  
            input.select()  
        }  
    },  
       disableContextMenu(){  
            //阻止文本选中后弹出功能菜单  
           //方式一:使用preventDefault()  
        event.preventDefault()  
           //方式二:修改returnValue  
           event.returnValue=false  
      }  

}

参考资料:事件处理方法

继续阅读 »

功能需求:input输入框获取焦点后文本需要是选中状态
运行环境:安卓端微信打开网页应用
解决方案:
input监听focus,contextmenu事件
template的代码

<input type="digit" @focus="selectText()" @contextmenu="disableContextMenu()">

script的代码

methods:{  
         selectText() {  
        //选中文本  
            const input = event.currentTarget;  
        if(input.value){  
            input.select()  
        }  
    },  
       disableContextMenu(){  
            //阻止文本选中后弹出功能菜单  
           //方式一:使用preventDefault()  
        event.preventDefault()  
           //方式二:修改returnValue  
           event.returnValue=false  
      }  

}

参考资料:事件处理方法

收起阅读 »

看到很好用谷歌浏览器GoogleChrome跨域设置很好用,简单跨域

跨域请求 跨域

新版浏览器跨域设置(版本号49之后的跨域设置)
1、在电脑上新建一个目录(任意位置) 例如 C:\MyChromeDevUserData

2、右键点击谷歌浏览器,选择属性;

3、在目标输入框尾部加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData

    注意:  

            1.两个 -- 前面都是有空格的哦~  

             2. 如果目标地址原先有引号,那么 --disable-web-security --user-data-dir=C:\MyChromeDevUserData 要加在引号外面。  

————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。  

原文链接:https://blog.csdn.net/weixin_48594833/article/details/124345191

继续阅读 »

新版浏览器跨域设置(版本号49之后的跨域设置)
1、在电脑上新建一个目录(任意位置) 例如 C:\MyChromeDevUserData

2、右键点击谷歌浏览器,选择属性;

3、在目标输入框尾部加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData

    注意:  

            1.两个 -- 前面都是有空格的哦~  

             2. 如果目标地址原先有引号,那么 --disable-web-security --user-data-dir=C:\MyChromeDevUserData 要加在引号外面。  

————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。  

原文链接:https://blog.csdn.net/weixin_48594833/article/details/124345191

收起阅读 »

iOS马甲包, AB面,H5跳转包,开发上架

什么是马甲包
马甲包一般是主APP的分身或者克隆,也或者说是穿着马甲的一个APP,脱掉马甲,APP将呈现另一种样式,也就是常说的AB面APP。

  1. 马甲包、AB面、白包、h5跳转包

2.苹果开发者

什么是马甲包
马甲包一般是主APP的分身或者克隆,也或者说是穿着马甲的一个APP,脱掉马甲,APP将呈现另一种样式,也就是常说的AB面APP。

  1. 马甲包、AB面、白包、h5跳转包

2.苹果开发者

今天帮群友解决watch监听无效问题,这是个坑

uniapp

先看看问题

开启了首次监听但是打印出来的值都是undefined?


修改数据了居然watch一点反应都没有?

于是我就就好奇修改了数据居然监听不到,开始摸爬滚打找坑,自己用了对方的代码片段调试发现可以正常使用(请忽略报错与该问题不相关不影响)

最后发现他是在App.vue里使用的,于是我就也尝试了一下,发现确实会监听不到。也是在网上找了半天没找到该问题,看来应该是没什么人遇到过。后来他又说拉的老项目之前是可以的,所以有可能不适用于新版uniapp,具体的版本没测试过,就是发现这有个坑给大家避雷;

解决办法:不要在app.vue里使用watch监听,在其他页面里使用。

记录工作第二年的坑

继续阅读 »

先看看问题

开启了首次监听但是打印出来的值都是undefined?


修改数据了居然watch一点反应都没有?

于是我就就好奇修改了数据居然监听不到,开始摸爬滚打找坑,自己用了对方的代码片段调试发现可以正常使用(请忽略报错与该问题不相关不影响)

最后发现他是在App.vue里使用的,于是我就也尝试了一下,发现确实会监听不到。也是在网上找了半天没找到该问题,看来应该是没什么人遇到过。后来他又说拉的老项目之前是可以的,所以有可能不适用于新版uniapp,具体的版本没测试过,就是发现这有个坑给大家避雷;

解决办法:不要在app.vue里使用watch监听,在其他页面里使用。

记录工作第二年的坑

收起阅读 »

记一次使用支付宝云函数踩的坑:Error:用户函数代码语法或逻辑异常,日志错误信息“invalid ELF header”

云函数

在云函数使用了bcrypt包

const bcrypt = require("bcrypt");

本地调试没有任何问题,云端调试开始报错:

Error: [login]: 用户函数代码语法或逻辑异常

函数运行日志报错:

... node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node: invalid ELF header ...

解决:

询问ai:(粘贴整段报错)

您遇到的错误信息与Node.js应用程序中的bcrypt模块有关,这个模块通常用于密码的散列和加密。错误信息“invalid ELF header”表明模块尝试加载的二进制文件(bcrypt_lib.node)存在问题。这个问题可能由以下几个原因引起:
架构不兼容:二进制文件可能为与您运行系统不同的CPU架构编译。例如,如果二进制文件是为x64架构编译的,但在ARM架构的系统上运行,就会发生这个错误。
Node ABI版本不匹配:二进制文件的Node应用二进制接口(ABI)版本可能与您使用的Node.js运行时的ABI版本不匹配。这通常在切换Node.js版本后没有重新编译本地模块时发生。二进制文件损坏或不正确:二进制文件可能已损坏,或者可能不是适用于您系统的正确文件。

ai没有给出具体可行的方案,继续询问:“换一个架构兼容的包”,回答:

安装预编译的二进制版本:一些包提供了预编译的二进制版本,这些版本可以在不同的架构上运行。尝试使用这些预编译版本可能会解决问题。例如,对于bcrypt,您可以尝试安装bcryptjs,这是一个纯JavaScript实现的bcrypt替代品,不需要编译

更换为 bcryptjs 成功解决问题

const bcrypt = require("bcryptjs");
继续阅读 »

在云函数使用了bcrypt包

const bcrypt = require("bcrypt");

本地调试没有任何问题,云端调试开始报错:

Error: [login]: 用户函数代码语法或逻辑异常

函数运行日志报错:

... node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node: invalid ELF header ...

解决:

询问ai:(粘贴整段报错)

您遇到的错误信息与Node.js应用程序中的bcrypt模块有关,这个模块通常用于密码的散列和加密。错误信息“invalid ELF header”表明模块尝试加载的二进制文件(bcrypt_lib.node)存在问题。这个问题可能由以下几个原因引起:
架构不兼容:二进制文件可能为与您运行系统不同的CPU架构编译。例如,如果二进制文件是为x64架构编译的,但在ARM架构的系统上运行,就会发生这个错误。
Node ABI版本不匹配:二进制文件的Node应用二进制接口(ABI)版本可能与您使用的Node.js运行时的ABI版本不匹配。这通常在切换Node.js版本后没有重新编译本地模块时发生。二进制文件损坏或不正确:二进制文件可能已损坏,或者可能不是适用于您系统的正确文件。

ai没有给出具体可行的方案,继续询问:“换一个架构兼容的包”,回答:

安装预编译的二进制版本:一些包提供了预编译的二进制版本,这些版本可以在不同的架构上运行。尝试使用这些预编译版本可能会解决问题。例如,对于bcrypt,您可以尝试安装bcryptjs,这是一个纯JavaScript实现的bcrypt替代品,不需要编译

更换为 bcryptjs 成功解决问题

const bcrypt = require("bcryptjs");
收起阅读 »

uni-app+vue3手机版后台OA模板|vite5.x+uniapp后台解决方案

vue3 uniapp

原创研发uniapp+vue3手机端后台管理|vue3+uniapp+pinia跨端后台OA系统模板UniVue3Admin。实现了自定义手机OA栅格磁贴引擎、多屏滑动管理、自定义桌面小部件、辅助触控悬浮球等功能。支持编译到H5+小程序端+App端

vue3+uniapp+pinia跨端仿ios桌面OA管理系统

运行h5/小程序端/App端效果

img

使用HbuilderX4.15开发工具,采用vue3 setup语法。

img

img

技术栈

  • 编辑器:HbuilderX 4.15
  • 技术框架:uniapp+vue3+pinia2+vite5.x
  • UI组件库:uni-ui+uv-ui(uniapp vue3组件库)
  • 弹框组件:uv3-popup(基于uniapp+vue3自定义弹框组件)
  • 表格组件:uv3-table(基于uniapp+vue3增强版表格)
  • 图表组件:qiun-data-charts
  • 模拟数据:mockjs(用于自定义表格模拟数据)
  • 缓存技术:pinia-plugin-unistorage
  • 支持编译:h5+小程序端+app端

img

img

项目结构图

img

img

整个项目采用全新原创的栅格磁贴引擎系统。

img

img

App.vue模板

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

    const authState = authStore()  

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

        if(!authState.authorization) {  
            uni.redirectTo({  
                url: '/pages/auth/launch'  
            })  
        }  
        initSystemInfo()  
    })  

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

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

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

    // 获取系统设备信息  
    const initSystemInfo = () => {  
        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>

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  
    }  
}

采用全新的滑屏数字解锁模式。
img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

该项目前后开发了差不多一个月的时间,已经正式的完结了。

公共模板

<script setup>  
    import { ref } from 'vue'  
    import { appStore } from '@/pinia/modules/app'  

    const appState = appStore()  

    // #ifdef MP-WEIXIN  
    defineOptions({  
        /**  
         * 解决小程序class、id透传问题(vue3写法)  
         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效,组件外部传入的class没有挂到组件根节点上  
         * https://github.com/dcloudio/uni-ui/issues/753  
         */  
        options: { virtualHost: true }  
    })  
    // #endif  
    const props = defineProps({  
        showBackground: { type: [Boolean, String], default: true },  
    })  

    // 自定义变量(桌面图标)  
    const deskVariable = ref({  
        '--icon-radius': '15px', // 圆角  
        '--icon-size': '118rpx', // 图标尺寸  
        '--icon-gap-col': '25px', // 水平间距  
        '--icon-gap-row': '45px', // 垂直间距  
        '--icon-labelSize': '12px', // 标签文字大小  
        '--icon-labelColor': '#fff', // 标签颜色  
        '--icon-fit': 'contain', // 图标自适应模式  
    })  
</script>  

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

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

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

        <!-- 背景图(修复小程序不支持background背景图) -->  
        <image v-if="showBackground" class="fixwxbg" :src="appState.config.skin || '/static/skin/theme.png'" mode="scaleToFill" />  
    </view>  
</template>

桌面desk布局

img

<!-- 桌面模板 -->  
<script setup>  
    import { ref } from 'vue'  

    import Desk from './components/desk.vue'  
    import Dock from './components/dock.vue'  
    import Touch from './components/touch.vue'  
</script>  

<template>  
    <uv3-layout>  
        <!-- 桌面菜单 -->  
        <Desk />  

        <template #footer>  
            <!-- 底部导航 -->  
            <Dock />  
        </template>  
        <!-- 悬浮球(辅助触控) -->  
        <Touch />  
    </uv3-layout>  
</template>

栅格布局引擎

img

img

桌面图标配置

/**  
 * label 图标标题  
 * imgico 图标(本地或网络图片) 当type: 'icon'则为uni-icons图标名,当type: 'widget'则为自定义小部件标识名  
 * type 图标类型(icon | widget) icon为uni-icons图标、widget为自定义小部件  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * hideLabel 是否隐藏图标标题  
 * background 自定义图标背景色  
 * size 栅格磁贴布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4  
 * onClick 点击图标回调函数 * children 二级菜单  
 */
<template>  
    <swiper  
        class="uv3__deskmenu"  
        :indicator-dots="true"  
        indicator-color="rgba(255,255,255,.5)"  
        indicator-active-color="#fff"  
    >  
        <swiper-item v-for="(mitem, mindex) in deskMenu" :key="mindex">  
            <view class="uv3__gridwrap">  
                <view v-for="(item, index) in mitem.list" :key="index" class="uv3__gridwrap-item" @click="handleClickDeskMenu(item)">  
                    <!-- 图标 -->  
                    <view class="ico" :style="{'background': item.background}">  
                        <!-- 二级菜单 -->  
                        <template v-if="Array.isArray(item.children)">  
                            <view class="uv3__gridwrap-thumb">  
                                ...  
                            </view>  
                        </template>  
                        <template v-else>  
                            <template v-if="item.type == 'widget'">  
                                <!-- 自定义部件 -->  
                                <component :is="item.imgico" />  
                            </template>  
                            <template v-else>  
                                <!-- 自定义图标 -->  
                                ...  
                            </template>  
                        </template>  
                    </view>  
                    <!-- 标签 -->  
                    <view v-if="!item.hideLabel" class="label clamp2">{{item.label}}</view>  
                </view>  
            </view>  
        </swiper-item>  
    </swiper>  

    <!-- 桌面二级菜单弹窗 -->  
    <Popup v-model="deskPopupVisible">  
        <view class="uv3__deskpopup">  
            ...  
        </view>  
    </Popup>  

    ...  
</template>

Okay,综上就是uniapp+vue3实战开发手机端后台OA系统的一些知识分享,希望对大家有些帮助~

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

作者:xiaoyan2017
链接: https://segmentfault.com/a/1190000044899693
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

继续阅读 »

原创研发uniapp+vue3手机端后台管理|vue3+uniapp+pinia跨端后台OA系统模板UniVue3Admin。实现了自定义手机OA栅格磁贴引擎、多屏滑动管理、自定义桌面小部件、辅助触控悬浮球等功能。支持编译到H5+小程序端+App端

vue3+uniapp+pinia跨端仿ios桌面OA管理系统

运行h5/小程序端/App端效果

img

使用HbuilderX4.15开发工具,采用vue3 setup语法。

img

img

技术栈

  • 编辑器:HbuilderX 4.15
  • 技术框架:uniapp+vue3+pinia2+vite5.x
  • UI组件库:uni-ui+uv-ui(uniapp vue3组件库)
  • 弹框组件:uv3-popup(基于uniapp+vue3自定义弹框组件)
  • 表格组件:uv3-table(基于uniapp+vue3增强版表格)
  • 图表组件:qiun-data-charts
  • 模拟数据:mockjs(用于自定义表格模拟数据)
  • 缓存技术:pinia-plugin-unistorage
  • 支持编译:h5+小程序端+app端

img

img

项目结构图

img

img

整个项目采用全新原创的栅格磁贴引擎系统。

img

img

App.vue模板

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

    const authState = authStore()  

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

        if(!authState.authorization) {  
            uni.redirectTo({  
                url: '/pages/auth/launch'  
            })  
        }  
        initSystemInfo()  
    })  

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

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

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

    // 获取系统设备信息  
    const initSystemInfo = () => {  
        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>

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  
    }  
}

采用全新的滑屏数字解锁模式。
img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

该项目前后开发了差不多一个月的时间,已经正式的完结了。

公共模板

<script setup>  
    import { ref } from 'vue'  
    import { appStore } from '@/pinia/modules/app'  

    const appState = appStore()  

    // #ifdef MP-WEIXIN  
    defineOptions({  
        /**  
         * 解决小程序class、id透传问题(vue3写法)  
         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效,组件外部传入的class没有挂到组件根节点上  
         * https://github.com/dcloudio/uni-ui/issues/753  
         */  
        options: { virtualHost: true }  
    })  
    // #endif  
    const props = defineProps({  
        showBackground: { type: [Boolean, String], default: true },  
    })  

    // 自定义变量(桌面图标)  
    const deskVariable = ref({  
        '--icon-radius': '15px', // 圆角  
        '--icon-size': '118rpx', // 图标尺寸  
        '--icon-gap-col': '25px', // 水平间距  
        '--icon-gap-row': '45px', // 垂直间距  
        '--icon-labelSize': '12px', // 标签文字大小  
        '--icon-labelColor': '#fff', // 标签颜色  
        '--icon-fit': 'contain', // 图标自适应模式  
    })  
</script>  

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

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

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

        <!-- 背景图(修复小程序不支持background背景图) -->  
        <image v-if="showBackground" class="fixwxbg" :src="appState.config.skin || '/static/skin/theme.png'" mode="scaleToFill" />  
    </view>  
</template>

桌面desk布局

img

<!-- 桌面模板 -->  
<script setup>  
    import { ref } from 'vue'  

    import Desk from './components/desk.vue'  
    import Dock from './components/dock.vue'  
    import Touch from './components/touch.vue'  
</script>  

<template>  
    <uv3-layout>  
        <!-- 桌面菜单 -->  
        <Desk />  

        <template #footer>  
            <!-- 底部导航 -->  
            <Dock />  
        </template>  
        <!-- 悬浮球(辅助触控) -->  
        <Touch />  
    </uv3-layout>  
</template>

栅格布局引擎

img

img

桌面图标配置

/**  
 * label 图标标题  
 * imgico 图标(本地或网络图片) 当type: 'icon'则为uni-icons图标名,当type: 'widget'则为自定义小部件标识名  
 * type 图标类型(icon | widget) icon为uni-icons图标、widget为自定义小部件  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * hideLabel 是否隐藏图标标题  
 * background 自定义图标背景色  
 * size 栅格磁贴布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4  
 * onClick 点击图标回调函数 * children 二级菜单  
 */
<template>  
    <swiper  
        class="uv3__deskmenu"  
        :indicator-dots="true"  
        indicator-color="rgba(255,255,255,.5)"  
        indicator-active-color="#fff"  
    >  
        <swiper-item v-for="(mitem, mindex) in deskMenu" :key="mindex">  
            <view class="uv3__gridwrap">  
                <view v-for="(item, index) in mitem.list" :key="index" class="uv3__gridwrap-item" @click="handleClickDeskMenu(item)">  
                    <!-- 图标 -->  
                    <view class="ico" :style="{'background': item.background}">  
                        <!-- 二级菜单 -->  
                        <template v-if="Array.isArray(item.children)">  
                            <view class="uv3__gridwrap-thumb">  
                                ...  
                            </view>  
                        </template>  
                        <template v-else>  
                            <template v-if="item.type == 'widget'">  
                                <!-- 自定义部件 -->  
                                <component :is="item.imgico" />  
                            </template>  
                            <template v-else>  
                                <!-- 自定义图标 -->  
                                ...  
                            </template>  
                        </template>  
                    </view>  
                    <!-- 标签 -->  
                    <view v-if="!item.hideLabel" class="label clamp2">{{item.label}}</view>  
                </view>  
            </view>  
        </swiper-item>  
    </swiper>  

    <!-- 桌面二级菜单弹窗 -->  
    <Popup v-model="deskPopupVisible">  
        <view class="uv3__deskpopup">  
            ...  
        </view>  
    </Popup>  

    ...  
</template>

Okay,综上就是uniapp+vue3实战开发手机端后台OA系统的一些知识分享,希望对大家有些帮助~

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

作者:xiaoyan2017
链接: https://segmentfault.com/a/1190000044899693
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

收起阅读 »

uniapp打包Android源生(可视化过程)

uniapp原生插件

Android开发转uniapp开发的学习分享

Android证书主要是由Android studio生成,我使用的v2023.3.1的版本,当我们在Androidstudio创建项目之后,可先创建证书






Enter keystore password:  //输入证书文件密码,输入完成回车    
Re-enter new password:   //再次输入证书文件密码,输入完成回车    
What is your first and last name?    
  [Unknown]:  //输入名字和姓氏,输入完成回车    
What is the name of your organizational unit?    
  [Unknown]:  //输入组织单位名称,输入完成回车    
What is the name of your organization?    
  [Unknown]:  //输入组织名称,输入完成回车    
What is the name of your City or Locality?    
  [Unknown]:  //输入城市或区域名称,输入完成回车    
What is the name of your State or Province?    
  [Unknown]:  //输入省/市/自治区名称,输入完成回车    
What is the two-letter country code for this unit?    
  [Unknown]:  //输入国家/地区代号(两个字母),中国为CN,输入完成回车    
Is CN=XX, OU=XX, O=XX, L=XX, ST=XX, C=XX correct?    
  [no]:  //确认上面输入的内容是否正确,输入y,回车  

完成上述即可创建证书,当然也可以根据官方指导。
查看证书信息:

keytool -list -v -keystore test.keystore    
Enter keystore password: //输入密码,回车

这里对应的test.keystore指的是你证书的完整目录。

继续阅读 »

Android开发转uniapp开发的学习分享

Android证书主要是由Android studio生成,我使用的v2023.3.1的版本,当我们在Androidstudio创建项目之后,可先创建证书






Enter keystore password:  //输入证书文件密码,输入完成回车    
Re-enter new password:   //再次输入证书文件密码,输入完成回车    
What is your first and last name?    
  [Unknown]:  //输入名字和姓氏,输入完成回车    
What is the name of your organizational unit?    
  [Unknown]:  //输入组织单位名称,输入完成回车    
What is the name of your organization?    
  [Unknown]:  //输入组织名称,输入完成回车    
What is the name of your City or Locality?    
  [Unknown]:  //输入城市或区域名称,输入完成回车    
What is the name of your State or Province?    
  [Unknown]:  //输入省/市/自治区名称,输入完成回车    
What is the two-letter country code for this unit?    
  [Unknown]:  //输入国家/地区代号(两个字母),中国为CN,输入完成回车    
Is CN=XX, OU=XX, O=XX, L=XX, ST=XX, C=XX correct?    
  [no]:  //确认上面输入的内容是否正确,输入y,回车  

完成上述即可创建证书,当然也可以根据官方指导。
查看证书信息:

keytool -list -v -keystore test.keystore    
Enter keystore password: //输入密码,回车

这里对应的test.keystore指的是你证书的完整目录。

收起阅读 »

APP没有上架应用市场,微信商户怎么才能快速开通APP

uni_app 5 App开发 5+App开发 移动APP

     在移动互联网时代,APP作为企业与用户之间的重要桥梁,其支付功能的完善与否直接关系到用户体验和企业的营收。然而,有些企业可能面临APP尚未上架应用市场的情况,这时如何开通微信APP支付功能呢?(需要超快捷高效开通的,可以联系小编)本文将为您详细解答。


一、了解微信APP支付 微信APP支付是微信支付为商户提供的移动应用内支付功能,用户可以在商户APP中完成支付流程。与公众号支付、扫码支付等不同,APP支付更加适合那些拥有独立APP的商户。
二、开通微信APP支付的前提条件 虽然APP未上架应用市场,但开通微信APP支付仍需要满足一些基本条件: 拥有一个微信支付的商户号; 提交相关资质证明,如营业执照、法人身份证等; 在微信支付商户平台完成APP支付功能的申请和配置。
三、开通微信APP支付的步骤 1、登录微信支付商户平台,选择“产品中心”-“APP支付”,点击“申请开通”; 2、填写APP的基本信息,包括APP名称、APP简介、APP下载链接(若已上架应用市场)等; 3、提交相关资质证明,并等待微信支付的审核; 4、审核通过后,按照微信支付提供的开发文档,完成APP支付功能的开发和测试; 5、在APP中集成微信支付SDK,确保支付流程的安全和顺畅。 四、注意事项 在申请开通APP支付时,务必确保提交的资料真实、准确、完整; 在开发和测试过程中,要严格按照微信支付的开发文档进行操作,确保支付功能的安全性和稳定性; 在APP中集成微信支付SDK时,要注意保护用户的隐私和支付安全; 若在开通或使用过程中遇到问题,可及时联系微信支付客服进行咨询和解决。 总之,即使APP未上架应用市场,企业仍可以通过微信商户平台轻松开通APP支付功能。只要满足基本条件并按照步骤操作,就能让用户在您的APP中享受到便捷、安全的支付体验。
继续阅读 »

     在移动互联网时代,APP作为企业与用户之间的重要桥梁,其支付功能的完善与否直接关系到用户体验和企业的营收。然而,有些企业可能面临APP尚未上架应用市场的情况,这时如何开通微信APP支付功能呢?(需要超快捷高效开通的,可以联系小编)本文将为您详细解答。


一、了解微信APP支付 微信APP支付是微信支付为商户提供的移动应用内支付功能,用户可以在商户APP中完成支付流程。与公众号支付、扫码支付等不同,APP支付更加适合那些拥有独立APP的商户。
二、开通微信APP支付的前提条件 虽然APP未上架应用市场,但开通微信APP支付仍需要满足一些基本条件: 拥有一个微信支付的商户号; 提交相关资质证明,如营业执照、法人身份证等; 在微信支付商户平台完成APP支付功能的申请和配置。
三、开通微信APP支付的步骤 1、登录微信支付商户平台,选择“产品中心”-“APP支付”,点击“申请开通”; 2、填写APP的基本信息,包括APP名称、APP简介、APP下载链接(若已上架应用市场)等; 3、提交相关资质证明,并等待微信支付的审核; 4、审核通过后,按照微信支付提供的开发文档,完成APP支付功能的开发和测试; 5、在APP中集成微信支付SDK,确保支付流程的安全和顺畅。 四、注意事项 在申请开通APP支付时,务必确保提交的资料真实、准确、完整; 在开发和测试过程中,要严格按照微信支付的开发文档进行操作,确保支付功能的安全性和稳定性; 在APP中集成微信支付SDK时,要注意保护用户的隐私和支付安全; 若在开通或使用过程中遇到问题,可及时联系微信支付客服进行咨询和解决。 总之,即使APP未上架应用市场,企业仍可以通过微信商户平台轻松开通APP支付功能。只要满足基本条件并按照步骤操作,就能让用户在您的APP中享受到便捷、安全的支付体验。
收起阅读 »

apicloud倒闭了大家怎么看?

APICloud

APICloud平台停服公告
尊敬的APICloud用户:

基于APICloud平台2023年5月所发布的《APICloud平台迁移公告》,自2023年9月16日0时起,APICloud平台的移动应用开发所有服务已停止运营(包括但不限于:应用开发服务、应用创建与编译服务、Studio3开发工具的使用,应用的mam版本更新与云修复,应用的推送与统计等);对于需要继续使用移动应用开发的APICloud用户,欢迎前往用友开发者中心继续体验高性能的移动开发服务。

由于个人原因未能及时迁移的用户,我们表示十分遗憾,您可扫描文末二维码联络运营人员,协助您解决相关账号问题

继续阅读 »

APICloud平台停服公告
尊敬的APICloud用户:

基于APICloud平台2023年5月所发布的《APICloud平台迁移公告》,自2023年9月16日0时起,APICloud平台的移动应用开发所有服务已停止运营(包括但不限于:应用开发服务、应用创建与编译服务、Studio3开发工具的使用,应用的mam版本更新与云修复,应用的推送与统计等);对于需要继续使用移动应用开发的APICloud用户,欢迎前往用友开发者中心继续体验高性能的移动开发服务。

由于个人原因未能及时迁移的用户,我们表示十分遗憾,您可扫描文末二维码联络运营人员,协助您解决相关账号问题

收起阅读 »