这是我个人开发【小鲸写字】小程序后的心得整理，欢迎各位水友一起交流小程序开发经验，如需探讨问题可添加博主 QQ：752746873。

也可关注同名公众号 / 小程序【小鲸写字】，查看小程序的实际上线效果～或者查看本专栏的第一篇博文，里面有部分的操作效果动态图。

目录

1. 前言

2. 创建一个uniapp项目

2.1 Unibest 项目模版

2.2 行命令下载 Unibest 项目

2.3 通过命令行工具运行项目

2.4 导入微信开发者工具

3. 小结

1. 前言

文中所有分享都基于我的真实经验与个人观点，核心目的不是提供标准答案，而是希望能为有需要的小伙伴带来一些参考和启发。

这篇是想给有 Uniapp 开发需求的朋友，分享一款能直接上手的快速开发模板。不用从零搭建项目框架，借助这个模板就能省去大量的基础配置、组件封装的时间，使你更快进入核心功能开发环节。

建议你耐心看完，或许其中某段踩坑经历、某个解决方案，就能帮你在开发路上少走一段弯路～

具体的效果可以查看第一篇博文：「小鲸写字」小程序整体效果展示，或者请搜索 小程序「小鲸写字」，本小程序已上线...欢迎预览查看效果。

2. 创建一个uniapp项目

2.1 Unibest 项目模版

推荐一个uniapp的模版项目，unibest（gitee地址：https://gitee.com/feige996/unibest），由 uniapp + Vue3 + Ts + Vite5 + UnoCss + wot-ui + z-paging 构成，使用了最新的前端技术栈，无需依靠 HBuilderX，通过命令行方式运行 web、小程序 和 App（编辑器推荐 VSCode，可选 webstorm）。

2.2 行命令下载 Unibest 项目

想获取 Unibest 项目很简单，直接通过命令就能完成下载，无需复杂操作：打开终端（或命令行工具），输入对应的项目下载命令即可

git clone https://gitee.com/feige996/unibest.git

下载完成后，用 HBuilderX 或 vscode 打开项目，下载好项目后，接着打开终端（或命令行工具），进入 Unibest 项目的根目录，执行以下命令安装所需依赖即可：

pnpm install

执行命令后，工具会自动下载并配置项目运行所需的依赖包，耐心等待安装完成（进度条走完即可），就可以正式启动项目。注意：如果没有安装pnpm工具的话，强烈推荐安装。

当终端中出现类似上述截图的提示（比如显示 “added xxx packages”“installation completed”，或进度条 100% 后无报错信息），就说明 Unibest 模板的依赖已经全部安装完成了。

2.3 通过命令行工具运行项目

由因为我们选择用 vscode（博主用的 trae）进行开发，所以无需通过 HBuilderX 启动项目，直接用终端命令即可，运行的命令在package.json中都有记载

执行命令

npm run dev:mp-weixin

如果执行启动命令后，微信开发者工具没有自动弹出并加载项目，那么需要手动导入，导入方式如下

2.4 导入微信开发者工具

打开微信开发者工具，点击左上角的“导入”按钮

在本地 Unibest 项目的代码文件夹中，依次展开 dist → dev → mp-weixin，选中这个mp-weixin文件夹，点击「确认」，就能成功导入到微信开发者工具中了。

成功打开，并看到如下图的界面，就代表打开成功

3. 小结

Uniapp 的核心优势集中在 跨端兼容性强，一套代码覆盖多平台小程序、H5 及 App，省去重复开发；二是门槛低，无缝衔接 Vue 生态，熟 Vue 开发者可快速上手；三是开发效率高，能复用丰富社区组件，大幅减少开发工作量，很适合追求多端落地的项目。