HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【避坑】使用css 属性column-count(实现瀑布流)不支持分页

css样式 css

使用css 属性column-count(实现瀑布流)不支持分页
使用css 属性column-count(实现瀑布流)不支持分页
使用css 属性column-count(实现瀑布流)不支持分页

↓↓↓ 各位大佬点点赞

使用css 属性column-count(实现瀑布流)不支持分页
使用css 属性column-count(实现瀑布流)不支持分页
使用css 属性column-count(实现瀑布流)不支持分页

↓↓↓ 各位大佬点点赞

HBuilder X底部打包状态不见了就是底部的提示栏

HBuilder X底部打包状态不见了就是底部的提示栏

其实这个底部提示栏叫,控制台,如果不见了,那还在你工程上右键,发行,第二个,查看云打包状态,点一下它就出来了。

继续阅读 »

HBuilder X底部打包状态不见了就是底部的提示栏

其实这个底部提示栏叫,控制台,如果不见了,那还在你工程上右键,发行,第二个,查看云打包状态,点一下它就出来了。

收起阅读 »

reportJSException >>>> instanceId:1, exception function:dc_checkappkey, exception: 解决经验

自定义基座 安卓

参考https://nativesupport.dcloud.net.cn/AppDocs/usesdk/appkey.html,确认appid+应用包名+签名sha1三者必须与申请填写的信息一致

我的是AS中打自定义基座,放到HB中。运行报错:reportJSException >>>> instanceId:1, exception function:dc_checkappkey, exception:

我的原因是有两个appid文件夹,就是\app\src\main\assets\apps下有两个文件夹(因为有两个不同的appid但是都是一套代码,想省事,没移除另一个)。需要在\app\src\main\assets\apps中保持且只能有一个文件夹__UNI__xxxxx

另,AS中打包自定义基座要把debug-server-release.aar添加到lib中,参考https://ask.dcloud.net.cn/article/35482

继续阅读 »

参考https://nativesupport.dcloud.net.cn/AppDocs/usesdk/appkey.html,确认appid+应用包名+签名sha1三者必须与申请填写的信息一致

我的是AS中打自定义基座,放到HB中。运行报错:reportJSException >>>> instanceId:1, exception function:dc_checkappkey, exception:

我的原因是有两个appid文件夹,就是\app\src\main\assets\apps下有两个文件夹(因为有两个不同的appid但是都是一套代码,想省事,没移除另一个)。需要在\app\src\main\assets\apps中保持且只能有一个文件夹__UNI__xxxxx

另,AS中打包自定义基座要把debug-server-release.aar添加到lib中,参考https://ask.dcloud.net.cn/article/35482

收起阅读 »

关于uniapp升级vue3项目后renderjs使用报错的一些个人经验

在写下这篇经验之前我的项目都是基于vue2的,这个过程中使用renderjs也没有报什么错;直到我在uniapp使用 vue3项目并将之前的项目迁移过来的时候;就发生了一堆魔幻的事情;当然大部分都在可控的范围内;但是其中有个别组件内部使用了 renderjs的文件就没那么幸运了,一直报什么找不到我定义的renderjs模块,
<span style="color:red;">uniapp-view-umd.js 巴拉巴拉的</span>
他只是给你提示这个错误的话,你是根本玩不转的,因为你只知道 这个错,但是根本就没有给你定位到具体的文件地方;起初我在想是不是在uniapp里面使用vue3是不对的;基于这个猜想我单独弄了一个demo也是vue3的,在里面写了一个组件;简单的使用了 renderjs来进行逻辑层和视图层之间的通信;发现是可以走的通的;那么就说明在uniapp使用vue3项目是可以正常使用renderjs的,那么这下问题排查就只能是代码写法和语法报错上去查找了;

然而找了一圈我发现自己写的代码没有问题;那么我在一想是不是第三方包的问题;果不其然我在控制台看到了一个错误;说是什么<span style="color:red">process is underined</span> 我的vue3是基于vite搭建的,默认 是不支持这个process的;所以报错;那么我在vite.config.js里面define里面定义了一下 ;具体定义方法可以在网上查找了一下;不过我是直接找到了最新下载的插件,直接把里面的判断给关掉了;不用procee去判断;此时再去运行项目发现就不再报错;

还有一点值得提的就是,如果在使用renderjs的组件内部有时候引用的插件也会导致这个错误;所以需要大家在使用rendrjs的地方一个注释引用的插件的方式去排查;

继续阅读 »

在写下这篇经验之前我的项目都是基于vue2的,这个过程中使用renderjs也没有报什么错;直到我在uniapp使用 vue3项目并将之前的项目迁移过来的时候;就发生了一堆魔幻的事情;当然大部分都在可控的范围内;但是其中有个别组件内部使用了 renderjs的文件就没那么幸运了,一直报什么找不到我定义的renderjs模块,
<span style="color:red;">uniapp-view-umd.js 巴拉巴拉的</span>
他只是给你提示这个错误的话,你是根本玩不转的,因为你只知道 这个错,但是根本就没有给你定位到具体的文件地方;起初我在想是不是在uniapp里面使用vue3是不对的;基于这个猜想我单独弄了一个demo也是vue3的,在里面写了一个组件;简单的使用了 renderjs来进行逻辑层和视图层之间的通信;发现是可以走的通的;那么就说明在uniapp使用vue3项目是可以正常使用renderjs的,那么这下问题排查就只能是代码写法和语法报错上去查找了;

然而找了一圈我发现自己写的代码没有问题;那么我在一想是不是第三方包的问题;果不其然我在控制台看到了一个错误;说是什么<span style="color:red">process is underined</span> 我的vue3是基于vite搭建的,默认 是不支持这个process的;所以报错;那么我在vite.config.js里面define里面定义了一下 ;具体定义方法可以在网上查找了一下;不过我是直接找到了最新下载的插件,直接把里面的判断给关掉了;不用procee去判断;此时再去运行项目发现就不再报错;

还有一点值得提的就是,如果在使用renderjs的组件内部有时候引用的插件也会导致这个错误;所以需要大家在使用rendrjs的地方一个注释引用的插件的方式去排查;

收起阅读 »

#插件需求# 建议组件实现一个类似android compose的ui组件

ui框架

建议组件实现一个类似android compose的ui组件

建议组件实现一个类似android compose的ui组件

购买的插件默认给出的包名是错误的,和实际打包的包名不一致,怎么更换

uniapp插件

购买的插件默认给出的包名是错误的,和实际打包的包名不一致,怎么更换?

购买的插件默认给出的包名是错误的,和实际打包的包名不一致,怎么更换?

vue3.5+tauri2.0+arco桌面版OS系统|vite6.0+tauri2仿macos/windows桌面

vite vue3

经过了三周的爆肝研发,我的又一款原创跨平台重磅新作tauri2.1+vite6+vue3 setup+pinia2+arco.design桌面客户端OS管理系统Tauri2Vue3OS,正式宣告完结了。支持macoswindows两种桌面风格。

Tauri2.0-Vue3-MacOS桌面端os平台|tauri2+vite6.0+arco电脑版OS管理系统

img

img

vue3-tauri2-os系统提供macos和windows11桌面风格、自研拖拽式栅格桌面引擎、封装tauri2多窗口管理、自定义json配置桌面/Dock菜单。

img

img

实现技术

  • 技术框架:vite^6.0.3+vue^3.5.13+vue-router^4.5.0
  • 跨平台框架:tauri^2.1.1
  • 组件库:@arco-design/web-vue^2.56.3 (字节桌面版vue3组件库)
  • 状态管理:pinia^2.3.0
  • 拖拽插件:sortablejs^1.15.6
  • 滑屏组件:swiper^11.1.15
  • 图表组件:echarts^5.5.1
  • markdown编辑器:md-editor-v3^5.1.1
  • 模拟数据:mockjs^1.1.0

img

img

tauri2.0-vue3os已经正式发布到我的原创作品集,感兴趣的可以去看看。

https://gf.bilibili.com/item/detail/1107621011

项目框架目录结构

使用最新版tauri2.0跨平台框架技术,整合vite6构建工具。
img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

tauri2.0-vue3os布局模板

img

<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 flexbox" :style="{'--themeSkin': appstate.config.skin}">  
    <component :is="DeskLayout[appstate.config.layout]" />  
  </div>  
</template>

img

img

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

  import Titlebar from '@/layouts/components/titlebar/index.vue'  
  import Desk from '@/layouts/components/mac/desk.vue'  
  import Dock from '@/layouts/components/mac/dock.vue'  

  const appstate = appState()  
</script>  

<template>  
  <div class="vu__layout flexbox flex-col">  
    <div class="vu__layout-header">  
      <Titlebar />  
    </div>  
    <div class="vu__layout-body flex1 flexbox">  
      <Desk />  
    </div>  
    <div class="vu__layout-footer">  
      <Dock v-if="appstate.config.dockEnable" />  
    </div>  
  </div>  
</template>

tauri2+vue3栅格布局

img

img

栅格桌面菜单支持如下参数配置:

/**  
 * label 图标标题  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * hideLabel 是否隐藏图标标题  
 * filter 是否禁用拖拽  
 * background 自定义图标背景色  
 * color 自定义图标颜色  
 * size 栅格磁贴布局 1x1 ... 12x12  
 * padding 内边距  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

支持children配置二级菜单。
img

img

img

tauri2.0+vue3自定义底部Dock菜单

img

Dock菜单配置参数:

/**  
 * label 图标tooltip提示  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * filter 是否禁用拖拽  
 * color 自定义图标颜色  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

另外系统托盘采用tauri2+vue3自定义弹窗实现系统托盘右键功能。
img

OK,综上就是Tauri2.0+Vue3+Arco实战桌面端os管理系统的一些知识分享。

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

继续阅读 »

经过了三周的爆肝研发,我的又一款原创跨平台重磅新作tauri2.1+vite6+vue3 setup+pinia2+arco.design桌面客户端OS管理系统Tauri2Vue3OS,正式宣告完结了。支持macoswindows两种桌面风格。

Tauri2.0-Vue3-MacOS桌面端os平台|tauri2+vite6.0+arco电脑版OS管理系统

img

img

vue3-tauri2-os系统提供macos和windows11桌面风格、自研拖拽式栅格桌面引擎、封装tauri2多窗口管理、自定义json配置桌面/Dock菜单。

img

img

实现技术

  • 技术框架:vite^6.0.3+vue^3.5.13+vue-router^4.5.0
  • 跨平台框架:tauri^2.1.1
  • 组件库:@arco-design/web-vue^2.56.3 (字节桌面版vue3组件库)
  • 状态管理:pinia^2.3.0
  • 拖拽插件:sortablejs^1.15.6
  • 滑屏组件:swiper^11.1.15
  • 图表组件:echarts^5.5.1
  • markdown编辑器:md-editor-v3^5.1.1
  • 模拟数据:mockjs^1.1.0

img

img

tauri2.0-vue3os已经正式发布到我的原创作品集,感兴趣的可以去看看。

https://gf.bilibili.com/item/detail/1107621011

项目框架目录结构

使用最新版tauri2.0跨平台框架技术,整合vite6构建工具。
img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

tauri2.0-vue3os布局模板

img

<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 flexbox" :style="{'--themeSkin': appstate.config.skin}">  
    <component :is="DeskLayout[appstate.config.layout]" />  
  </div>  
</template>

img

img

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

  import Titlebar from '@/layouts/components/titlebar/index.vue'  
  import Desk from '@/layouts/components/mac/desk.vue'  
  import Dock from '@/layouts/components/mac/dock.vue'  

  const appstate = appState()  
</script>  

<template>  
  <div class="vu__layout flexbox flex-col">  
    <div class="vu__layout-header">  
      <Titlebar />  
    </div>  
    <div class="vu__layout-body flex1 flexbox">  
      <Desk />  
    </div>  
    <div class="vu__layout-footer">  
      <Dock v-if="appstate.config.dockEnable" />  
    </div>  
  </div>  
</template>

tauri2+vue3栅格布局

img

img

栅格桌面菜单支持如下参数配置:

/**  
 * label 图标标题  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * hideLabel 是否隐藏图标标题  
 * filter 是否禁用拖拽  
 * background 自定义图标背景色  
 * color 自定义图标颜色  
 * size 栅格磁贴布局 1x1 ... 12x12  
 * padding 内边距  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

支持children配置二级菜单。
img

img

img

tauri2.0+vue3自定义底部Dock菜单

img

Dock菜单配置参数:

/**  
 * label 图标tooltip提示  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * filter 是否禁用拖拽  
 * color 自定义图标颜色  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

另外系统托盘采用tauri2+vue3自定义弹窗实现系统托盘右键功能。
img

OK,综上就是Tauri2.0+Vue3+Arco实战桌面端os管理系统的一些知识分享。

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

收起阅读 »

分享一款自研的图片存储APP,有建议可互相交流

app分享

PHPDisk MyFile 外链存储分享系统 是一套针对网站资源,如音视频、图片、文档,压缩包等一切的信息化资源进行管理的基础系统

适用于网店电商,跨境电商(外贸),音频,长短视频,婚纱照片,建筑图片,广告图片等场合的文件存储外链分享解决方案。

如果经营数个网店或数个网站,可以用一个私有平台管理你N个网站上的文件资源,实现资源统一管理,资源重复使用。

网站存储系统:
http://demo.phpdisk.com/mf/

APP截图:

扫码可以下载APP测试一下(未上架应用中心):

继续阅读 »

PHPDisk MyFile 外链存储分享系统 是一套针对网站资源,如音视频、图片、文档,压缩包等一切的信息化资源进行管理的基础系统

适用于网店电商,跨境电商(外贸),音频,长短视频,婚纱照片,建筑图片,广告图片等场合的文件存储外链分享解决方案。

如果经营数个网店或数个网站,可以用一个私有平台管理你N个网站上的文件资源,实现资源统一管理,资源重复使用。

网站存储系统:
http://demo.phpdisk.com/mf/

APP截图:

扫码可以下载APP测试一下(未上架应用中心):

收起阅读 »

编辑器什么时间被现在的ai编程支持啊

编辑器什么时间被现在的ai编程支持啊!现在感觉不支持就快淘汰的感觉了!

编辑器什么时间被现在的ai编程支持啊!现在感觉不支持就快淘汰的感觉了!

uniapp的h5端实现动态设置页面的下拉刷新是否开启

首先定义个方法

// enable 是否可以下拉刷新  
tooglePullDownRefresh(enable) {  
    const page = getCurrentPages().at(-1)  
    // 当且仅当在pages里初始化设置了下拉刷新时才生效  
    if (!page.$page.meta.pullToRefresh.support) return  
    page.$page.meta.enablePullDownRefresh = enable        
}

然后就实现了,但是会出现禁用之后再开启不会出现下拉动效,这就需要去修改 hbuilderx安装路径\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5\dist\uni-h5.es.js中,搜索到usePageRefresh方法之后,在此方法中的onMounted hooks的后面加上

watch(  
      () => pageMeta.enablePullDownRefresh,  
      (enablePullDownRefresh) => {  
        enablePullDownRefresh && nextTick(initElement);  
      }  
  );

如图

然后在需要禁用和开启的页面调用tooglePullDownRefresh(false|true)来开启或关闭就可实现在h5上开启或关闭下拉刷新了!当然,如果官方能给个方法那就更好了

继续阅读 »

首先定义个方法

// enable 是否可以下拉刷新  
tooglePullDownRefresh(enable) {  
    const page = getCurrentPages().at(-1)  
    // 当且仅当在pages里初始化设置了下拉刷新时才生效  
    if (!page.$page.meta.pullToRefresh.support) return  
    page.$page.meta.enablePullDownRefresh = enable        
}

然后就实现了,但是会出现禁用之后再开启不会出现下拉动效,这就需要去修改 hbuilderx安装路径\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5\dist\uni-h5.es.js中,搜索到usePageRefresh方法之后,在此方法中的onMounted hooks的后面加上

watch(  
      () => pageMeta.enablePullDownRefresh,  
      (enablePullDownRefresh) => {  
        enablePullDownRefresh && nextTick(initElement);  
      }  
  );

如图

然后在需要禁用和开启的页面调用tooglePullDownRefresh(false|true)来开启或关闭就可实现在h5上开启或关闭下拉刷新了!当然,如果官方能给个方法那就更好了

收起阅读 »

使用高德地图,转跳页面滚动后报错:Error: Invalid Object: Pixel(NaN, NaN)

uniapp 高德地图

在当前页面直接使用高德地图,标记、弹层、滚动都没问题。

如图:

但是,如果在当前地图页面,转跳到另外页面,【滚动页面就会报错】
如图:

Uncaught Error: Invalid Object: Pixel(NaN, NaN)

找了好几个相关问题的解决方案,最后这个解决了问题:

【将下面3D,改成2D】

map = new AMap.Map("container", {
// 设置地图容器id
iewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [latitude,longitude], //初始化地图中心点位置
});

参考文件:
https://juejin.cn/post/7424045557067841577
https://github.com/uiwjs/react-amap/issues/121

继续阅读 »

在当前页面直接使用高德地图,标记、弹层、滚动都没问题。

如图:

但是,如果在当前地图页面,转跳到另外页面,【滚动页面就会报错】
如图:

Uncaught Error: Invalid Object: Pixel(NaN, NaN)

找了好几个相关问题的解决方案,最后这个解决了问题:

【将下面3D,改成2D】

map = new AMap.Map("container", {
// 设置地图容器id
iewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [latitude,longitude], //初始化地图中心点位置
});

参考文件:
https://juejin.cn/post/7424045557067841577
https://github.com/uiwjs/react-amap/issues/121

收起阅读 »