不设置最外层的父元素高度。更多详情，请参考：https://developers.weixin.qq.com/community/develop/article/doc/000a00e1fd0790488e6a034f156813?highline=uniapp%20%E4%BD%BF%E7%94%A8input%E8%BD%AF%E9%94%AE%E7%9B%98%E5%BC%B9%E5%87%BA%E6%97%B6%E5%B0%86input%E6%A1%86%E5%86%85%E5%AE%B9%E4%B8%8A%E7%A7%BB%E7%9A%84%E9%97%AE%E9%A2%98

　　基准测试结果表明，在页面加载时间方面，codeigniter 最快，其次是 laravel、symfony 和 zend framework。在数据库操作方面，codeigniter 最快，其次是 laravel、symfony 和 zend framework。在内存使用方面，codeigniter 最少，其次是 laravel、symfony 和 zend framework。实战案例表明，codeigniter 非常适合小型项目，而 laravel 和 symfony 适用于中型到大型项目，zend framework 适用于企业级应用，但性能较差。

　　PHP框架性能比较

　　在选择PHP框架时，性能是一个关键考虑因素。本文将比较常见的 PHP 框架的性能，并提供实战案例来展示其差异http://m.bokequ.com/moban/1252.html

　　比较的框架

　　Laravel: 一个流行的 MVC 框架，以其易用性和强大的特性而闻名。

　　Symfony: 一个广泛的框架，提供丰富的组件库和灵活的配置选项。

　　Zend Framework: 一个老牌的企业级框架，以其稳定性和安全性而闻名。

　　CodeIgniter: 一个轻量级的 MVC 框架，非常适合小型到中型的项目。

　　基准测试

　　我们使用以下基准测试来比较这些框架：

　　页面加载时间：加载一个简单页面的时间

　　数据库操作：执行数据库查询的速度

　　内存使用：框架运行时所需的内存量

　　实战案例

　　我们创建一个简单的博客应用程序，使用每个框架来显示一页包含 10 篇文章的帖子。我们使用 Apache Bench 进行基准测试，每秒发送 100 个请求持续 10 分钟。

　　结果

　　页面加载时间：Laravel

　　数据库操作：CodeIgniter

　　内存使用：CodeIgniter

　　结论

　　从基准测试和实战案例中可以看出，CodeIgniter 在性能方面表现出色，非常适合小型项目。 Laravel 和 Symfony 在性能和功能方面实现了良好的平衡，适用于中型到大型项目。 Zend Framework 是企业级应用程序的首选，提供卓越的稳定性和安全性，但它的性能也受到影响。

　　对于个人网站站注册比较少的，服务器配置不是很好的，没必要https,https跳转到http是要时间的，会影响网站打开的速度。免费的https每年都要更换。个人博客网站https有一段时间了，而且很多页面都有收录排名，现在已去掉https了，用户搜索从https进网站无法打开页面。去掉后https对面网站有一定的影响，所有这里就要实现访问https自动跳转到http

　　网站设置http跳转到https比较容易，如相反方向将https跳转到http，不是专搞程序的，有点难设置。网上文章也有很多"HTTPS重定向到HTTP的解决方法"。但很多都是没用的，都是转载别人没测试过，搞的网站打不开。

将以下代码放在你网站根目录下的.htaccess文件，没有.htaccess可以新建一个。域名换成你自己的域名，经测试有效

RewriteEngine On  
RewriteBase /  

RewriteCond %{HTTP_HOST} !^www\. [NC]  
RewriteRule ^ http://www.bokequ.com%{REQUEST_URI} [L,R=301,NE]  

RewriteCond %{HTTPS} on [OR]  
RewriteCond %{HTTP:X-Forwarded-Proto} https [OR]  
RewriteCond %{SERVER_PORT} ^443$  
RewriteRule ^ http://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]  

RewriteCond %{HTTP_REFERER} !^$  
RewriteCond %{HTTP_REFERER} !^http://(www\.)?bokequ.com/.*$ [NC]  
RewriteRule \.(gif|jpg|png|tif|js|css|xls|xlsx|zip|rar|pdf|ods|ots)$ - [F,NC]  

RewriteCond %{REQUEST_FILENAME} !-f  
RewriteCond %{REQUEST_FILENAME} !-d  
RewriteCond %{REQUEST_FILENAME} !-l  
RewriteRule ^(.+)$ index.php/$1 [L]

从今年开始，直接一个断崖式下跌，搞得都想把插件下架了，一个月两块钱的窝囊费，还有无数人来问各种问题。

一个产品中漏扫出现了“未配置网络安全属性风险”。
初期查到官网有解决方案：https://uniapp.dcloud.net.cn/tutorial/app-sec-android.html
实践了一下，发现还是需要很多细节需要纠结。测试了几遍漏扫。留下以下资料供大家参考
新加目录结构和文件

/nativeResources  
--android  
----res  
------raw  
--------my_ca (文件是https证书的nginx的.key文件内容)  
------xml  
--------network_security_config.xml  
/AndroidManifest.xml  
/manifest.json (需要修改)

network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>  
<network-security-config>  
    <domain-config cleartextTrafficPermitted="false">  
        <domain includeSubdomains="true">你接口的域名</domain>  
        <trust-anchors>  
            <certificates src="@/raw/my_ca"/>  
        </trust-anchors>  
    </domain-config>  
</network-security-config>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>  
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"   
  package="包名">  
    <application android:networkSecurityConfig="@xml/network_security_config"></application>  
</manifest>

manifest.json

...  
"distribute" : {  
            /* android打包配置 */  
            "android" : {  
                "networkSecurityConfig" : "xml/network_security_config.xml", //新加入的行  

...

Vue2版本不清楚，但至少在Vue3版本上
钉钉小程序对props的支持很低
所以建议把所有props接到的参数都在页面上重新定义，赋值。

组件尽量少写，官方组价也是一样的，uni-icons这种基础组件也有同样问题，经常消失，不显示，估计也是我说的问题导致的

在manifest.json直接写死，编译进去，具体看附件或代码

{  
    "name": "test",  
    "appid": "__UNI__9E404E0",  
    "description": "",  
    "versionName": "1.0.0",  
    "versionCode": "100",  
    "transformPx": false,  
    "app-plus": {  
        /* 5+App特有相关 */  
        "usingComponents": true,  
        "nvueCompiler": "uni-app",  
        "nvueStyleCompiler": "uni-app",  
        "splashscreen": {  
            "alwaysShowBeforeRender": true,  
            "waiting": true,  
            "autoclose": true,  
            "delay": 0  
        },  
        "modules": {},  
        /* 模块配置 */  
        "distribute": {  
            /* 应用发布信息 */  
            "android": {  
                /* android打包配置 */  
                "permissions": [  
                ]  
            },  
            "ios": {},  
            /* ios打包配置 */  
            "sdkConfigs": {}  
        }  
    },  
    /* SDK配置 */  
    "quickapp": {},  
    /* 快应用特有相关 */  
    "mp-weixin": {  
        /* 小程序特有相关 */  
        "appid": "",  
        "setting": {  
            "urlCheck": false  
        },  
        "usingComponents": {  
            "uni-link": "/uni_modules/uni-link/components/uni-link/uni-link"  
        },  
        "componentPlaceholder": {  
            "uni-link": "view"  
        }  
    },  
    "vueVersion": "3"  
}

做过安卓开发的同学们都知道，安卓的安装是比较简单的，可以直接在android手机上安装，不需要通过在线商店安装。

但是iphone和ipad这些ios系统的手机不一样，假如你是使用普通苹果账号打包的app store类型的ipa包，是无法直接安装在ios手机的，需要上架到app store苹果商店才能安装。

不过，ios想直接安装，还是有办法的，就是注册苹果企业开发者账号，通过企业开发者账号，生成in house类型的证书和描述文件（证书profile文件），通过in house类型的证书和描述文件打包出来的ipa文件，可以上传到像香蕉云编这种应用内测的平台，生成二维码安装。

注册企业账号和生成企业证书的过程比较麻烦，假如需要，可参考下面这个教程：

https://blog.csdn.net/weixin_48914851/article/details/140758473

当你form表单使用switch进行操作时，
<switch @change="binddata('itExistDimension', $event.detail.value)" :checked="formData.itExistDimension"></switch>
可以这样使用，但是无法更新formData的itExistDimension的值，必须重构binddata方法进行手动绑定才行
binddata(name,value){
this.formData[name]=value
this.$refs.form.setValue(name,value)
},
否则如果你使用v-if=“itExistDimension”必然无效

vue3-webos一款基于最新前端技术vite5.x+vue3+pinia2+arco-design+sortablejs搭建的网页版os管理系统。内置macos和windows两种桌面、支持自定义桌面栅格布局引擎、可拖拽式桌面菜单/程序坞菜单等功能。

原创自研vite5+vue3+arco-design仿macOS网页版os桌面管理系统

vue3-webos使用vite.js搭建项目模板，采用arco.design组件库。

运用技术

• 编辑器：Vscode
• 技术框架：vite5.3.3+vue3.4.31+vue-router4.4+pinia2
• UI组件库：arco-design^2.55.3 (字节桌面版vue3组件库)
• 状态管理：pinia^2.1.7
• 图表插件：echarts^5.5.1
• 拖拽组件：sortablejs^1.15.2
• 富文本编辑器：wangeditor^4.7.15
• 模拟数据：mockjs^1.1.0
• 样式编译：sass^1.77.8
• 构建工具：vite^5.3.3

前段时间有分享一款vite5+vue3原创网页版聊天实例。感兴趣的可以去看看。
https://ask.dcloud.net.cn/article/41153

项目结构目录

目前整个vue3-macos项目已经托管到我的原创作品集，有需要的可以去瞅瞅。
https://gf.bilibili.com/item/detail/1106413011

main.js配置

import { createApp } from 'vue'  
import './style.scss'  
import App from './App.vue'  

// 引入arco.design组件库  
import ArcoDesign from '@arco-design/web-vue'  
import '@arco-design/web-vue/dist/arco.css'  
// 额外引入图标库  
import ArcoIcon from '@arco-design/web-vue/es/icon'  
import VEPlus from 've-plus'  
import 've-plus/dist/ve-plus.css'  

// 引入路由及状态管理  
import Router from './router'  
import Pinia from './pinia'  

const app = createApp(App)  

app  
.use(ArcoDesign)  
.use(ArcoIcon)  
.use(VEPlus)  
.use(Router)  
.use(Pinia)  
.mount('#app')

vue3批量路由配置

使用vite.js提供的import.meta.glob批量导入路由配置。

/**  
 * 路由管理Router  
 * @author andy  
 */  

import { createRouter, createWebHashHistory } from 'vue-router'  
import { authState } from '@/pinia/modules/auth'  

import Layout from '@/layouts/index.vue'  

// 批量导入路由  
const modules = import.meta.glob('./modules/*.js', { eager: true })  
console.log(modules)  
const patchRouters = Object.keys(modules).map(key => modules[key].default).flat()  
console.log(patchRouters)  

/**  
 * meta配置  
 * @param meta.requireAuth 需登录验证页面  
 */  
const routes = [  
  {  
    path: '/',  
    redirect: '/desktop',  
  },  
  ...patchRouters,  
  // 错误模块  
  {  
    path: '/:pathMatch(.*)*',  
    redirect: '/404',  
    component: Layout,  
    meta: {  
      title: '404error',  
    },  
    children: [  
      {  
        path: '404',  
        component: () => import('@/views/error/404.vue'),  
      }  
    ]  
  },  
]  

const router = createRouter({  
  history: createWebHashHistory(),  
  routes,  
})  

// 全局路由钩子拦截  
router.beforeEach((to, from) => {  
  const authstate = authState()  
  // 登录验证  
  if(to?.meta?.requireAuth && !authstate.authorization) {  
    console.log('你还未登录!')  
    return {  
      path: '/login'  
    }  
  }  
})  

router.afterEach(() => {  
  // ...  
})  

router.onError(error => {  
  console.warn('[Router Error]', error)  
})

桌面公共布局模板

vite-osx内置了macos和windows两种桌面。

<script setup>  
  import { appState } from '@/pinia/modules/app'  

  // 引入布局模板  
  import MacosLayout from './template/macos.vue'  
  import WindowsLayout from './template/windows.vue'  

  const appstate = appState()  

  const DeskLayout = {  
    macos: MacosLayout,  
    windows: WindowsLayout  
  }  
</script>  

<template>  
  <div  
    class="vu__container desktop flexbox flex-alignc flex-justifyc"  
    :style="{'--themeSkin': appstate.config.skin}"  
    @contextmenu.prevent  
  >  
    <component :is="DeskLayout[appstate.config.layout]" />  
  </div>  
</template>

<template>  
  <div class="vu__layout flexbox flex-col">  
    <div class="vu__layout-header">  
      <Toolbar />  
    </div>  
    <div class="vu__layout-body flex1 flexbox">  
      <Desk />  
    </div>  
    <div class="vu__layout-footer">  
      <Dock />  
    </div>  
    <!-- 悬浮球(辅助触控) -->  
    <Touch />  
  </div>  
</template>

vue3栅格布局桌面

// 自定义变量(桌面图标)  
const deskVariable = ref({  
  '--icon-radius': '8px', // 圆角  
  '--icon-size': '60px', // 图标尺寸(设置rpx自定义手机设备)  
  '--icon-gap-col': '30px', // 水平间距  
  '--icon-gap-row': '30px', // 垂直间距  
  '--icon-labelSize': '12px', // 标签文字大小  
  '--icon-labelColor': '#fff', // 标签颜色  
  '--icon-fit': 'contain', // 图标自适应模式  
})

/*  
 * 桌面菜单json配置项 by Andy  Q：282310962  
 */  

const deskMenu = [  
  {  
    pid: 20240507001,  
    list: [  
      {imgico: markRaw(Today), size: '2x2'},  
      {label: '便签', imgico: markRaw(NoteBook), size: '4x2'},  
      ...  
    ]  
  },  
  {  
    pid: 20240509002,  
    list: [  
      {label: 'Appstore', imgico: '/static/mac/appstore.png'},  
      {label: '地图', imgico: '/static/mac/maps.png'},  
      ...  
    ]  
  },  
  {  
    pid: 20240510001,  
    list: [  
      {label: 'Github', imgico: '/static/svg/github.svg', link: 'https://github.com/', background: '#607d8b',},  
      ...  
    ]  
  },  
  {  
    uid: 'd141f210-207e-1e8e-9950-9deefac27e48',  
    list: [  
      {label: 'Vite^5.3.3', imgico: 'https://vitejs.dev/logo.svg', link: 'https://vitejs.dev/'},  
      ...  
      {  
        label: '组件',  
        children: [  
          {label: '表格', imgico: '/static/svg/table.svg', path: '/components/table/all'},  
          {label: '自定义表格', imgico: '/static/svg/table.svg', path: '/components/table/custom'},  
          ...  
        ]  
      },  
      {label: 'ChatGPT', imgico: '/static/svg/chatgpt.svg', link: 'https://openai.com/chatgpt/', background: '#15A17F',},  
      {label: 'Bilibili', imgico: '/static/svg/bilibili.svg', link: 'https://www.bilibili.com/', background: '#ff6899',},  
      {  
        label: '个人中心',  
        children: [  
          {label: '主页', imgico: '/static/svg/my.svg', path: '/setting'},  
          ...  
        ]  
      },  
      {  
        label: '设置',  
        children: [  
          {label: '网站设置', imgico: '/static/svg/settings.svg', path: '/setting/system/website'},  
          {label: '邮件服务', imgico: '/static/mac/mail.png', path: '/setting/system/mail'},  
        ]  
      },  
      {  
        label: '公众号', imgico: markRaw(IconWechat), color: '#07c160',  
        onClick: () => {  
          ...  
        }  
      },  
    ]  
  }  
]

以上就是vue3+pinia2+arco.design实战仿macos和windows桌面os系统的一些分享知识。

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

是不是手动下载插件后，解压都不成功？
是不是手动创建文件夹都需要再次确认一下？
没有权限，去更改文件夹的权限