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

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

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

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

技术栈

• 编辑器：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端

项目结构图

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

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

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

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

公共模板

<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布局

<!-- 桌面模板 -->  
<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>

栅格布局引擎

桌面图标配置

/**  
 * 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
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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尚未上架应用市场的情况，这时如何开通微信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平台2023年5月所发布的《APICloud平台迁移公告》，自2023年9月16日0时起，APICloud平台的移动应用开发所有服务已停止运营（包括但不限于：应用开发服务、应用创建与编译服务、Studio3开发工具的使用，应用的mam版本更新与云修复，应用的推送与统计等）；对于需要继续使用移动应用开发的APICloud用户，欢迎前往用友开发者中心继续体验高性能的移动开发服务。

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

精通uniapp全栈，包括css、vue、unicloud、和各官方出品的插件。。。。3年以上
q：2237167069

项目介绍

旅拍路书：旅行爱好者的专属记录伙伴，基于uniCloud + vue3的全栈项目，包括用户登录，更新个人信息，富文本编辑，分类管理以及智能助手等功能的项目。

预览

h5端扫码预览：

小程序扫码预览：

微信小程序提交审核未通过（你的小程序涉及用户自行生成内容（文字、图片、音/）的记录、分享，属社交-笔记范畴，为个人主体小程序未开放类目，建议申请企业主体小程序。）目前只有体验版，扫码申请体验权限，秒通过

直接链接访问，移动端项目需打开控制台调至移动端模式预览：

• <https://env-00jxgo74vwaq-static.normal.cloudstatic.cn/index.html#/>

技术栈

• vite
• vue3
• ts
• uniCloud
• wotDesignUni
• sp-editor

环境要求

• node > 16.20.0
• npm > 8.19.4
• HBuilder X > 4.07

部署

• Serverless 服务
• 云原生容器平台

部分截图

源码地址 免费开源哦！！！

https://ext.dcloud.net.cn/plugin?id=18177#detail

// 抖音火山引擎语音合成  
function makerDouyinVoice(content) {  

    const host = "https://openspeech.bytedance.com/api/v1/tts"  
    const header = {  
        "Authorization": "Bearer;Uwn******************iw0V4"  // 换成自己的 token  
    }  

    const requestBody = {  
        "app": {  
            "appid": "123456", //换成自己的 抖音火山引擎账号 id  
            "token": "Uwn******************iw0V4", // 换成自己的 token  
            "cluster": "****", //换成自己的 cluster  
        },  
        "user": {  
            "uid": content.uid  
        },  
        "audio": {  
            "voice_type": "BV027_streaming",  // 角色   
            "encoding": "mp3",  
            "compression_rate": 1,  
            "rate": 24000,  
            "speed_ratio": 0.8,  // 语速  
            "volume_ratio": 1.0,  
            "pitch_ratio": 1.0,  
            "emotion": "happy",  
            "language": "en"  // 这里切换中英文  
        },  
        "request": {  
            "reqid": content.sentenceId,  
            "text": content.text,  
            "text_type": "plain",  
            "operation": "query",  
            "silence_duration": "125",  
            "with_frontend": "1",  
            "frontend_type": "unitTson",  
            "pure_english_opt": "1"  
        }  
    }  

    return uniCloud.httpclient.request(host, {  
        method: 'POST',  
        headers: header,  
        data: requestBody,  
        contentType: 'json',  
        dataType:'text', // 注意这个参数，要以字符串形式返回  
        timeout: 60000  
    })  
}

//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

// 云对象调用
async makeVoiceByDouyin(content) {
const voiceRes = await makerDouyinVoice(content)
console.log(voiceRes)
if (voiceRes.status == 200) {

        // 火山引擎返回的数据是字符串 要转换成json对象  
        const voiceData = JSON.parse(voiceRes.data)  
        if(voiceData.code == 3000){  
            // 火山引擎返回的音频数据 base64 要转换成 Buffer  
            const voiceBuffer = Buffer.from(voiceData.data,'base64')  
            // 上传到云存储  
            const res = await uniCloud.uploadFile({  
                cloudPath: `${content.sentenceId}.mp3`,  
                fileContent: voiceBuffer  
            })  
            return res  
        }  
        return {  
            errCode:1,  
            errMsg:'语音合成失败'  
        }  

    }  
    return {  
        errCode:1,  
        errMsg: '合成失败'  
    }  

}    

一年一度，相约福州。5月23日至27日，第七届数字中国建设峰会系列活动将在福州隆重举行。本届峰会以“释放数据要素价值，发展新质生产力”为主题，由国家发展改革委、国家数据局、国家网信办、科技部、国务院国资委、福建省人民政府共同主办，福州市人民政府和相关单位承办。

本届峰会是国家数据工作体系优化调整后首次举办的数字中国建设峰会，释放出数字强国的积极信号。数据智能领跑企业每日互动（个推）已连续多年参加数字中国建设峰会。今年，每日互动也应邀参加数字中国建设峰会，将作为数据要素代表企业在峰会现场体验区（展位号：6号馆 6D07）展示其数据智能创新成果。

多年来，每日互动（股票代码：300766）将深厚的数据能力与行业“Know-How”有机结合，为政府部门及行业客户提供丰富的数据智能产品、服务与解决方案。

例如，在智慧政务领域，每日互动推出大数据精准宣防服务，可通过大数据定向镇街级受众人群，智能匹配反诈信息、文旅广告等内容，帮助政府宣传从原来的“大水漫灌”变为“精准滴灌”，让政府相关部门更好地进行普法教育、城市宣传等；此外，每日互动还基于大模型、RAG等前沿技术打造惠企政策智配大模型，实现政策和企业之间的精准高效匹配，帮助政府部门更有效地推广和落地惠企政策，也让企业不再错过好政策。

而在智慧交通领域，每日互动则联合生态企业云通数达打造数智绿波，基于每日互动大数据和智能算法建模，将来自交通管理部门、道路实况以及互联网流量感知数据等多方动态数据融合计算，同时最大程度利用存量交通基础设施，帮助交管部门快速形成城市绿波方案，有效提升城市交通管理智慧水平和运行效率，改善市民出行体验。

此外，每日互动也面向互联网、营销增长等商业领域提供相应的服务。每日互动的数据智能产品和解决方案也将作为相关领域的数字化科技成果在本届数字中国建设峰会现场体验区（展位号：6号馆 6D07）重点展示，敬请期待！

作为国家级重要展会，本次数字中国建设峰会将有400多名权威专家学者、数字经济领军企业代表等参会。峰会包括开幕式、主论坛、分论坛和数字中国创新大赛，并设现场体验区，同期举办特色活动和专业工作会议等。正如本次峰会的主题“释放数据要素价值，发展新质生产力”，每日互动作为专业的数据智能服务商，也正积极推动数据要素在各产业落地并释放价值，加速新质生产力发展，为数字强国建设持续贡献自身力量。

5月23日-27日

让我们相约“有福之州“

一起探寻峰会更多精彩瞬间！

希望官方可以出一个关于查询当前unicloud账号下云短信账号余额，以及模版列表，签名列表，申请签名，申请短信模板，以及充值短信账号条数等的功能的接口

这样就可以在自己的项目的管理后台进行操作，申请短信模板，签名，充值余额啥的，这样方便交给客户之后 不懂技术的客户 好操作

其他模块最好也能出一下相关接口
就像微信开放文档这样

在存量时代，精细化运营成为移动互联网企业提升运营效率和效果、实现商业增长的重要手段。为了给用户提供全方位的优质服务，很多企业布局了APP、小程序、H5、快应用、Web等多个渠道，企业的数据来源容易分散，同时在较多情况下由于各平台之间彼此独立运营，数据无法互通，从而形成“数据孤岛”。企业运营人员也因此无法进行全局的用户洞察和数据分析，难以高效地完成投放、转化、归因等精细化运营环节。针对这一现象，个推将自身大数据能力与卓信ID深度融合，打造了OneID，帮助企业实现跨端数据互通，让企业用户运营更有效、商业增长更高效。

图：个推OneID增能APP精细化运营

卓信ID是中国信通院发布的移动互联网新一代匿名标识体系，具有匿名、可变、去标识化等特点，支持跨域数据合规流转，可实现跨APP、小程序、H5平台运营数据打通。OneID作为个推大数据能力与卓信ID融合的“集大成者”，一方面能够在安全、合规的前提下打通APP、小程序（包括微信、支付宝、抖音等平台）、H5、快应用等多端数据，帮助企业识别目标设备；另一方面配合个推用户运营平台的其他能力，也能帮助企业在更多维度地刻画用户画像，深入洞察用户的线上兴趣偏好，有效识别用户线下场景特征，帮助企业做好用户精细化运营。

在具体应用中，个推OneID在APP用户运营、商业变现、业务风控等场景中都能发挥出重要作用。

在用户运营场景下，企业要提升用户生命周期价值，需要优化其在获客、激活、留存、传播、转化等各环节的效率和效果。其中，在获客环节，由于流量红利消失以及“数据孤岛”难题，企业往往面临着拉新成本高、流量归因难的问题。OneID可以帮助企业识别设备来源、判断渠道质量，以优化投放策略、降低拉新成本。而在留存环节，企业则面临着数据维度不够丰富、用户画像不够全面立体的痛点。在个推OneID的能力加持下，企业能够打通设备在各渠道的数据，分析用户旅程中的特征变迁，及时捕获用户行为偏好和需求变化，帮助企业更针对性地进行用户精细化运营，让用户对企业的服务更加“欲罢不能”。

除了用户运营场景，个推OneID还能帮助移动互联网企业加速其商业化变现。具体而言，以往因为设备信息识别率不高，企业流量变现的效率往往较低。在使用个推OneID方案后，企业能够更好地识别设备真实来源，APP、小程序等流量和媒体平台也能够有效完成广告投放归因，高效进行流量变现，促进企业商业化变现升级。

自3月底发布以来，个推OneID已凭借着打通率高、数据能力强、安全保障好等能力优势，与来自工具、影音视频、新闻资讯、旅游出行等领域的20余家头部APP客户开启了价值共创，共同在精细化运营、商业化变现等方面探索落地应用。未来，个推还将持续发挥数据和技术的力量，不断推动OneID产品升级、深化应用场景，携手更多的行业伙伴，推动移动互联网行业健康绿色发展。

目前云打包按20元一次收费，这样的设计其实一点都不科学！
为什么不科学，因为UniAPP的打包并不会像微信开发者工具一样，自动滚动版本号，开发人员经常打完包才发现TMD版本号忘记了修改，然后我改个版本号又要再付20，这不傻了吗？

可以把免费的和付费的用户分开，适当提速，这样你们的营收也会增加。

我想支援你们点钱，但看到20一次，简直把我当傻瓜。

可承接：
uniapp + dcloud 云端一体 app 和小程序开发
uni-admin + 云空间 管理后台开发
laravel + php+mysql 网站和管理后台开发

欢迎加V详聊 shijian15978