开箱即用的uniapp微信小程序开发模板

大家好，我是dyb-dev，今天给大家带来一款非常好用的uniapp微信小程序开发模板，该模板目前已开源，大家可放心使用！

话不多说先看实战效果，请用手机微信扫描下方的小程序码：

好了，实战效果相信大家都看到了，下面我将一一介绍一下该模板，模板源代码可前往github地址查看

模板简介：

该模板集成了前端众多最新的技术栈，由 Vue3 + TS + Scss + Vite5 + Pinia + nutui-uniapp + z-paging + VSCode 组成

1. 插件方面内置了 markdownlint + eslint + prettier + stylelint + husky + prettier-eslint + vue-tsc 等插件，能够让你保证良好的代码格式规范和极高的开发效率

2. 配置方面内置了 markdownlint + eslint + vscode + prettier + stylelint 等配置，无需自己手动配置规则，另外还额外内置了众多非常实用的vscode插件推荐，并且你无需手动配置对应插件的配置

3. 工具包方面内置了 @dcloudio/uni-app +  @dcloudio/uni-components + @dcloudio/uni-mp-weixin + @uni-helper/uni-network + @uni-helper/uni-promises + @vueuse/core + pinia-plugin-persistedstate + radash + dayjs + query-string 等工具包，能够让你在处理请求、组件封装、持久化状态储存、处理日期时间、处理URL上有优异的表现

4. 组件方面内置了通用的顶部导航栏、底部导航栏、用户授权相关等组件，相信大家都知道使用默认的顶部导航栏和底部导航栏在业务场景下会有一些限制，灵活性并不高，对于弹窗、对话框组件的提供了函数式调用等方式使用，并且内置了使用示例

5. 页面方面内置了通用的启动页，这对于跳转某个页面时，如果没登录需要先登录在跳转的场景下非常有用，还内置了通用的登录页，无需手动书写重定向逻辑，还内置了通用的 webview 页面，这在小程序内嵌h5时非常有用，并且你无需关注其实现，使用起来非常简单

6. 工具函数方面内置了 路径、页面、页面跳转、页面分享、小程序信息等相关工具函数，使用起来非常简单高效，并且支持完善的TS类型提示

该模板无需使用HBuilderX打包编译，通过VSCode便可实现，并且支持代码热更新、页面路由自动生成、组件自动导入、manifest.json自动生成、git提交格式验证等功能，最重要的是该模板统一在 .env 文件中进行配置，且配置简单，这代表着开发者无需注重代码环境，更专注于业务的开发，还等什么快快使用起来吧!

模板安装步骤：

1. 新建一个文件然后在终端中打开该文件，执行以下命令行：

// 如果你使用的是 npm 或者 yarn，那么只需把 pnpm 替换即可
pnpm create @dyb-dev/create-project@latest

2. 如果你能够看到以下界面就代表执行成功了

​

3. 接下来继续输入 `.` ，然后选择 uniapp-mp-wx-template 模板

4. 如果下载成功将会呈现以下结果：

好的到现在为止你已经讲模板拉取到你的本地了

 5. 这个时候只需执行一下命令便可运行起来了

// 初始化所有依赖包
pnpm install

// 本地运行
pnpm dev

 使用相关注意事项：

1. 在本地运行之前需要先将 .env 文件中的 VITE_MP_WX_APPID 选项改为你对应的微信小程序appid，否则在微信开发者工具中无法打开此项目

2. 在你需要上传之前，一定要先执行以下命令：

// 打包代码
pnpm build

这个命令的作用是将你的代码进行打包压缩，这个时候代码体积会比开发环境要小，可以看到 dist 目录中已经存在了 build 目录，这个时候利用微信开发者工具打开 build 目录中的 mp-weixin 目录，然后上传即可

3. 更多的相关事项只需查看 .env 文件中的注释即可

本文到这里就结束啦，希望能够帮助到大家！