HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

小程序分包引用分包 node_modules 中的依赖产物打包到分包中

uni_app x 体积优化 支付宝小程序 微信小程序 uniapp

前言

5.04 版本之前的 uniapp 和 uniappx,小程序端不支持分包引用的 node_modules 依赖打包到分包中,这对于很多备受小程序主包体积超出困扰的开发者来说,显然不是一个好消息。为了解决这一问题,5.04 版本开始,hx项目或者 cli 项目支持分包引用的 node_modules 依赖打包到分包中。下面介绍下具体的操作步骤,附件是示例项目。

分包优化

首先,需要在 mainfest.json 指定小程序节点下添加如下配置,例如:

{  
  "mp-weixin": {  
         "optimization": {  
            "subPackages": true  
          }  
   }  
}

筛选分包用的依赖

这一步尤为重要,要先梳理出哪些依赖是分包用到的,哪些是主包用到的,以及你期望的主包分包产物引用关系。

我们举一个简单的例子,主包用到了 lodash-esaddsubtract 函数,分包 sub 用到了 lodash-esmultiply 函数,这种分包用到的内容主包没用,就可以考虑使用这种策略,把 分包 sub 用到的 lodash-esmultiply 函数打包到 分包 sub 下,我们来看下 5.04 版本之前的效果

首先是项目结构,参考附件一

打包的产物体积,参考附件二

可以看到,用到的 lodash-es 的三个函数都被打包到了主包的 vendor.js 文件中。下面我们看下 5.04 如何解决这种问题

首先进入到分包的根目录,创建一个 package.json 文件,这里写分包需要用到的依赖,然后安装依赖,参考附件三。

然后重新打包即可。

可以看到 分包 sub 根目录下面多了 vendor.js 文件,里面就是 lodash-esmultiply 函数,打包效果参考附件四和附件五

注意事项

  • 该优化只对 vue3 项目生效
  • 支持 uniapp 和 uniappx 的小程序项目
  • 支持 hx 项目和 cli 项目,测试项目是 hx 项目,cli 项目同理
  • 仅支持 node_modules 中的 js 相关文件,不支持其他文件
  • 测试项目为附件六
  • 5.04 是指 hx 的版本号,uniapp 对应的依赖版本为 3.0.0-5000420260318001
继续阅读 »

前言

5.04 版本之前的 uniapp 和 uniappx,小程序端不支持分包引用的 node_modules 依赖打包到分包中,这对于很多备受小程序主包体积超出困扰的开发者来说,显然不是一个好消息。为了解决这一问题,5.04 版本开始,hx项目或者 cli 项目支持分包引用的 node_modules 依赖打包到分包中。下面介绍下具体的操作步骤,附件是示例项目。

分包优化

首先,需要在 mainfest.json 指定小程序节点下添加如下配置,例如:

{  
  "mp-weixin": {  
         "optimization": {  
            "subPackages": true  
          }  
   }  
}

筛选分包用的依赖

这一步尤为重要,要先梳理出哪些依赖是分包用到的,哪些是主包用到的,以及你期望的主包分包产物引用关系。

我们举一个简单的例子,主包用到了 lodash-esaddsubtract 函数,分包 sub 用到了 lodash-esmultiply 函数,这种分包用到的内容主包没用,就可以考虑使用这种策略,把 分包 sub 用到的 lodash-esmultiply 函数打包到 分包 sub 下,我们来看下 5.04 版本之前的效果

首先是项目结构,参考附件一

打包的产物体积,参考附件二

可以看到,用到的 lodash-es 的三个函数都被打包到了主包的 vendor.js 文件中。下面我们看下 5.04 如何解决这种问题

首先进入到分包的根目录,创建一个 package.json 文件,这里写分包需要用到的依赖,然后安装依赖,参考附件三。

然后重新打包即可。

可以看到 分包 sub 根目录下面多了 vendor.js 文件,里面就是 lodash-esmultiply 函数,打包效果参考附件四和附件五

注意事项

  • 该优化只对 vue3 项目生效
  • 支持 uniapp 和 uniappx 的小程序项目
  • 支持 hx 项目和 cli 项目,测试项目是 hx 项目,cli 项目同理
  • 仅支持 node_modules 中的 js 相关文件,不支持其他文件
  • 测试项目为附件六
  • 5.04 是指 hx 的版本号,uniapp 对应的依赖版本为 3.0.0-5000420260318001
收起阅读 »

You do not have required contracts to perform an operation (403)

苹果协议更新了,需要登录账号同意协议更新。

  1. https://appstoreconnect.apple.com/ 这个页面会有一个黄色的提示,提示协议需要更新,点击蓝色 查看 按钮进行跳转 到https://developer.apple.com/account
  2. 弹窗 协议点击 确定即可

分享原文来自:https://www.yunedit.com/article/requiredcontract

继续阅读 »

苹果协议更新了,需要登录账号同意协议更新。

  1. https://appstoreconnect.apple.com/ 这个页面会有一个黄色的提示,提示协议需要更新,点击蓝色 查看 按钮进行跳转 到https://developer.apple.com/account
  2. 弹窗 协议点击 确定即可

分享原文来自:https://www.yunedit.com/article/requiredcontract

收起阅读 »

HBuilderX5.03版本升级,自动提示特别慢

bug反馈

如何修复?是 bug 吗?

如何修复?是 bug 吗?

【苹果企业账号被冻结】你们是否出现过这种情况

因使用过云打包服务,我们公司使用的是苹果企业证书,仅使用过HbuildX上传过苹果企业证书。过了没多久,就收到苹果冻结企业账号的邮件,说我们证书泄漏。

几经交涉后,账号得到恢复,并且苹果给出了泄漏的证书所打包的APP。

继续阅读 »

因使用过云打包服务,我们公司使用的是苹果企业证书,仅使用过HbuildX上传过苹果企业证书。过了没多久,就收到苹果冻结企业账号的邮件,说我们证书泄漏。

几经交涉后,账号得到恢复,并且苹果给出了泄漏的证书所打包的APP。

收起阅读 »

发布ipa文件到开发者中心的最简方法

上架

假如是使用mac电脑,可以使用xcode上传。也可以使用xcode的命令行工具来上传,

但是windows电脑没有xcode这些工具,也没有windows版本的xcode。不过安装xcode比较大,也比较麻烦,mac电脑假如没空间,也可以使用下面windows的方法来上传。

windows电脑发布ipa文件到苹果开发者中心的构建版本,就不能使用xcode,windows发布ipa到构建版本,可使用香蕉云编来上传。

下面,是windows电脑上传ipa的方法:
(1)打开香蕉云编,进入后台,使用上传ipa到app store的功能,点击上传新文件

(2)进入密钥或密码填写界面

这里可以使用app store密钥上传或者专用密码上传,这里建议使用app store密钥上传,更加专业和可靠,因为密钥永远不会失效。

(3)设置app store密钥
假如是第一次上传,还没有app store密钥,就需要先去app store先设置密钥,上传界面有设计密钥或专用密码的教程。

(4)上传ipa
填写完所有资料,最后一步,就是上传ipa了,上传过程大概一两分钟,就可以看到上传成功了。上传成功半小时后,留意苹果的邮件,看看有没有成功进入构建版本。

继续阅读 »

假如是使用mac电脑,可以使用xcode上传。也可以使用xcode的命令行工具来上传,

但是windows电脑没有xcode这些工具,也没有windows版本的xcode。不过安装xcode比较大,也比较麻烦,mac电脑假如没空间,也可以使用下面windows的方法来上传。

windows电脑发布ipa文件到苹果开发者中心的构建版本,就不能使用xcode,windows发布ipa到构建版本,可使用香蕉云编来上传。

下面,是windows电脑上传ipa的方法:
(1)打开香蕉云编,进入后台,使用上传ipa到app store的功能,点击上传新文件

(2)进入密钥或密码填写界面

这里可以使用app store密钥上传或者专用密码上传,这里建议使用app store密钥上传,更加专业和可靠,因为密钥永远不会失效。

(3)设置app store密钥
假如是第一次上传,还没有app store密钥,就需要先去app store先设置密钥,上传界面有设计密钥或专用密码的教程。

(4)上传ipa
填写完所有资料,最后一步,就是上传ipa了,上传过程大概一两分钟,就可以看到上传成功了。上传成功半小时后,留意苹果的邮件,看看有没有成功进入构建版本。

收起阅读 »

【求内推,求职】前端岗位

求职

dcloud社区排名前20;
npm上传的某个插件超2k+下载;

使用uniapp上架过小程序,app,h5
小程序平台:微信小程序、支付宝小程序
app平台:华为、小米、oppo、vivo、荣耀、ios

熟练使用uview、element ui、uv-ui、echarts、vant、websocket...

要求自研、全职、双休、五险一金;
地方:深圳、广州、福建地区这几个最好

有的联系q:1814963581,备注来意

继续阅读 »

dcloud社区排名前20;
npm上传的某个插件超2k+下载;

使用uniapp上架过小程序,app,h5
小程序平台:微信小程序、支付宝小程序
app平台:华为、小米、oppo、vivo、荣耀、ios

熟练使用uview、element ui、uv-ui、echarts、vant、websocket...

要求自研、全职、双休、五险一金;
地方:深圳、广州、福建地区这几个最好

有的联系q:1814963581,备注来意

收起阅读 »

windows上架ios app详细经验分享

应用上架

在hbuilderx打包ios应用,ios应用最终编译和打包后,会产生一个ipa格式的压缩文件,是一个.ipa后缀的文件。这个文件在苹果商店里叫构建版本。

上架的时候,需要将这个ipa文件上传到app store的构建版本上,需要使用第三方上传工具来上传。

跨平台工具:香蕉云编

mac电脑工具:xcode或者transporter

由于这里需要兼顾windows和linux开发者,因此,这个教程主要是针对使用香蕉云编上传的教程。

(一)进入苹果开发者中心后台

在苹果开发者中心,点击登录图标登录,登录后就进入苹果开发者中心的后台,可以看到app store connect这个板块,这个板块里面有个App菜单,如下图所示:

点击App这个菜单,进入APP列表页面。

(二)新建App

进入App列表页面后,假如App还不存在,则需要新新建一个App才能正式上架。
新建的时候后,需要填写名称、主要语言、套装ID和SKU这些信息,其中套装ID一定要选对,这个跟你打包的APP的appId是对应的:

(三)填写资料

点击App列表页面的App名称,就可以填写APP资料上架了。

(四)上传构建版本

在页面下面,有一项是需要选择构建版本,也就是上传ipa文件到这里。
但在苹果开发者中心无法直接上传ipa文件,因为它需要做一些ipa文件完整性校验。需要使用第三方工具来上传。这里可以使用跨平台的香蕉云编这个工具来上传:

https://www.yunedit.com/ipasend

(五)在香蕉云编上传ipa到构建版本

登录香蕉云编,进入上传ipa到app store的功能菜单,点击上传后,出现这个界面:

在上传界面里,可以使用app store密钥或者专用密码两种方法上传,这里推荐使用app store密钥上传,因为专用密码有时候会失效,比如改了用户登录密码后,专用密码也会失效。

app store密钥的设置方法,可以参考上图红色字体的教程。

(六)等待苹果邮件

在香蕉云编上传成功后,还不一定能上传到构建版本里面去,因为你的APP还可能有问题,需要等半个小时,再查看苹果邮件,看看有没有报错信息。

(七)上架

受到苹果邮件后,假如提示上传成功,就可以在刚才选择构建版本的界面,点蓝色加号选择构建版本了。

选择完构建版本,填写完其他的资料,就可以上架啦,上架要等待苹果人工审核。

继续阅读 »

在hbuilderx打包ios应用,ios应用最终编译和打包后,会产生一个ipa格式的压缩文件,是一个.ipa后缀的文件。这个文件在苹果商店里叫构建版本。

上架的时候,需要将这个ipa文件上传到app store的构建版本上,需要使用第三方上传工具来上传。

跨平台工具:香蕉云编

mac电脑工具:xcode或者transporter

由于这里需要兼顾windows和linux开发者,因此,这个教程主要是针对使用香蕉云编上传的教程。

(一)进入苹果开发者中心后台

在苹果开发者中心,点击登录图标登录,登录后就进入苹果开发者中心的后台,可以看到app store connect这个板块,这个板块里面有个App菜单,如下图所示:

点击App这个菜单,进入APP列表页面。

(二)新建App

进入App列表页面后,假如App还不存在,则需要新新建一个App才能正式上架。
新建的时候后,需要填写名称、主要语言、套装ID和SKU这些信息,其中套装ID一定要选对,这个跟你打包的APP的appId是对应的:

(三)填写资料

点击App列表页面的App名称,就可以填写APP资料上架了。

(四)上传构建版本

在页面下面,有一项是需要选择构建版本,也就是上传ipa文件到这里。
但在苹果开发者中心无法直接上传ipa文件,因为它需要做一些ipa文件完整性校验。需要使用第三方工具来上传。这里可以使用跨平台的香蕉云编这个工具来上传:

https://www.yunedit.com/ipasend

(五)在香蕉云编上传ipa到构建版本

登录香蕉云编,进入上传ipa到app store的功能菜单,点击上传后,出现这个界面:

在上传界面里,可以使用app store密钥或者专用密码两种方法上传,这里推荐使用app store密钥上传,因为专用密码有时候会失效,比如改了用户登录密码后,专用密码也会失效。

app store密钥的设置方法,可以参考上图红色字体的教程。

(六)等待苹果邮件

在香蕉云编上传成功后,还不一定能上传到构建版本里面去,因为你的APP还可能有问题,需要等半个小时,再查看苹果邮件,看看有没有报错信息。

(七)上架

受到苹果邮件后,假如提示上传成功,就可以在刚才选择构建版本的界面,点蓝色加号选择构建版本了。

选择完构建版本,填写完其他的资料,就可以上架啦,上架要等待苹果人工审核。

收起阅读 »

基于vue3.5+tauri2.10+deepseek-v3.2+openai搭建客户端ai智能问答系统

ai markdown OpenAI vite vue3

vite7-tauri2-deepseek:基于vue3.5+vite7.2+tauri2.10+arco+markdown+hljs+openai深度接入deepseek-v3.2聊天大模型。支持暗黑+浅色主题、深度思考、代码高亮、复制代码、katex公式、mermaid图表等功能。

使用技术

  • 跨平台框架:tauri^2.10
  • 前端框架:vite^7.3.1+vue^3.5.29+vue-router^5.0.3
  • ai大模型:deepseek-v3.2 + openai
  • 组件库:arco-design^2.57.0
  • 状态管理:pinia^3.0.4
  • 本地存储:pinia-plugin-persistedstate^4.7.1
  • markdown解析:markdown-it^14.1.0
  • katex公式渲染:@mdit/plugin-katex^0.25.0

如上图:vue3-deepseek-tauriai支持latex数学公式、mermaid图表渲染。

项目结构框架

deepseek-tauri-ai客户端ai对话项目已经发布到我的原创作品集,欢迎下载使用~
tauri2.10+vue3+deepseek客户端智能ai对话系统

如果对项目具体的实现感兴趣,可以看看下面这篇文章。
tauri2.10+deepseek+vite7客户端ai系统|Tauri2+Vue3.5桌面AI程序Exe

热文推荐

uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板
Vite7+DeepSeek网页版Ai助手|vue3+arco网页web流式生成ai聊天问答系统
electron39-vue3ai电脑端AI模板|electron39+deepseek+vite7聊天ai应用
vite7+deepseek流式ai模板|vue3.5+deepseek3.2+markdown打字输出ai助手
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板
Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序
Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统
uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈

继续阅读 »

vite7-tauri2-deepseek:基于vue3.5+vite7.2+tauri2.10+arco+markdown+hljs+openai深度接入deepseek-v3.2聊天大模型。支持暗黑+浅色主题、深度思考、代码高亮、复制代码、katex公式、mermaid图表等功能。

使用技术

  • 跨平台框架:tauri^2.10
  • 前端框架:vite^7.3.1+vue^3.5.29+vue-router^5.0.3
  • ai大模型:deepseek-v3.2 + openai
  • 组件库:arco-design^2.57.0
  • 状态管理:pinia^3.0.4
  • 本地存储:pinia-plugin-persistedstate^4.7.1
  • markdown解析:markdown-it^14.1.0
  • katex公式渲染:@mdit/plugin-katex^0.25.0

如上图:vue3-deepseek-tauriai支持latex数学公式、mermaid图表渲染。

项目结构框架

deepseek-tauri-ai客户端ai对话项目已经发布到我的原创作品集,欢迎下载使用~
tauri2.10+vue3+deepseek客户端智能ai对话系统

如果对项目具体的实现感兴趣,可以看看下面这篇文章。
tauri2.10+deepseek+vite7客户端ai系统|Tauri2+Vue3.5桌面AI程序Exe

热文推荐

uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板
Vite7+DeepSeek网页版Ai助手|vue3+arco网页web流式生成ai聊天问答系统
electron39-vue3ai电脑端AI模板|electron39+deepseek+vite7聊天ai应用
vite7+deepseek流式ai模板|vue3.5+deepseek3.2+markdown打字输出ai助手
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板
Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序
Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统
uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈

收起阅读 »

uniapp 分享

uniapp

uniapp

uniapp

关于uni.showToast被原生界面遮挡,无法穿透

分享插件

问题:

在使用原生模块,或者插件时,想使用Toast弹出信息,但是却被原生界面遮挡,无法看到

解决:

可使用插件市场的 Ba-Toast 原生插件,可完美穿透原生界面

原生Toast弹窗提示(穿透所有界面、穿透原生;自定义颜色、图标)Ba-Toast

Ba-Toast 是一款可穿透所有界面(包括所有原生插件的界面),也可在系统页面显示的原生Toast弹窗提示插件。调用方法参照uniapp自带showToast风格,接入简单,功能强大。


👤 作者介绍

作者: 三杯五岳(q:2579546054)

专注于 UniApp 原生插件、UTS插件开发,包括安卓、苹果、鸿蒙,致力于为开发者提供高质量、易用的原生插件解决方案。

主要方向:

  • UniApp 原生插件开发
  • UniApp UTS插件开发
  • Android、iOS、Harmony原生项目开发
  • 移动端跨平台项目开发
  • 微信小程序
  • PC前端

> 💡 提示: 如需定制开发、技术支持或有其他需求,欢迎通过QQ或留言咨询!


⭐ 如果这些插件对您有帮助,欢迎点赞、收藏、分享!⭐

感谢支持!

继续阅读 »

问题:

在使用原生模块,或者插件时,想使用Toast弹出信息,但是却被原生界面遮挡,无法看到

解决:

可使用插件市场的 Ba-Toast 原生插件,可完美穿透原生界面

原生Toast弹窗提示(穿透所有界面、穿透原生;自定义颜色、图标)Ba-Toast

Ba-Toast 是一款可穿透所有界面(包括所有原生插件的界面),也可在系统页面显示的原生Toast弹窗提示插件。调用方法参照uniapp自带showToast风格,接入简单,功能强大。


👤 作者介绍

作者: 三杯五岳(q:2579546054)

专注于 UniApp 原生插件、UTS插件开发,包括安卓、苹果、鸿蒙,致力于为开发者提供高质量、易用的原生插件解决方案。

主要方向:

  • UniApp 原生插件开发
  • UniApp UTS插件开发
  • Android、iOS、Harmony原生项目开发
  • 移动端跨平台项目开发
  • 微信小程序
  • PC前端

> 💡 提示: 如需定制开发、技术支持或有其他需求,欢迎通过QQ或留言咨询!


⭐ 如果这些插件对您有帮助,欢迎点赞、收藏、分享!⭐

感谢支持!

收起阅读 »

基于vue3.5+vite7+vant4+pinia3实战仿微信界面聊天模板

vite vue3

vite7-vue3-chatroom:基于vue3.5+vite7+pinia3+vant4.x手搓微信app界面聊天实例。包含聊天/通讯录/我的模块,支持图文消息/gif动图、图片/视频预览、红包/朋友圈等功能。

运用技术

  • 技术框架:Vite7.x+Vue3.5+Pinia3+Vue-Router4
  • 组件库:Vant-UI4.x (有赞移动端Vue3组件库)
  • 弹层组件:V3Popup(基于vue3.0自定义弹窗组件)
  • iconfont图标:阿里字体图标库
  • 自定义顶部导航条+底部tabBar

项目框架目录

整个项目使用vite7构建,采用vue3 setup语法糖编码开发。

vite7-wechat聊天室项目已经正式发布到我的原创小店作品集,感谢支持!
Vue3+Vite7+Pinia3+Vant4移动端仿微信聊天室模板

更多详细的项目介绍,可以去看看下面的这篇分享文章。

Vite-Chat聊天室|vue3.5+vite7+pinia3+Vant4移动端仿微信聊天模板

往期推荐

原创uniapp+vue3+deepseek+uv-ui跨端实战仿deepseek/豆包流式ai聊天对话助手。
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板
Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板
Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序
Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板

继续阅读 »

vite7-vue3-chatroom:基于vue3.5+vite7+pinia3+vant4.x手搓微信app界面聊天实例。包含聊天/通讯录/我的模块,支持图文消息/gif动图、图片/视频预览、红包/朋友圈等功能。

运用技术

  • 技术框架:Vite7.x+Vue3.5+Pinia3+Vue-Router4
  • 组件库:Vant-UI4.x (有赞移动端Vue3组件库)
  • 弹层组件:V3Popup(基于vue3.0自定义弹窗组件)
  • iconfont图标:阿里字体图标库
  • 自定义顶部导航条+底部tabBar

项目框架目录

整个项目使用vite7构建,采用vue3 setup语法糖编码开发。

vite7-wechat聊天室项目已经正式发布到我的原创小店作品集,感谢支持!
Vue3+Vite7+Pinia3+Vant4移动端仿微信聊天室模板

更多详细的项目介绍,可以去看看下面的这篇分享文章。

Vite-Chat聊天室|vue3.5+vite7+pinia3+Vant4移动端仿微信聊天模板

往期推荐

原创uniapp+vue3+deepseek+uv-ui跨端实战仿deepseek/豆包流式ai聊天对话助手。
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板
Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板
Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序
Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板

收起阅读 »