# wx-mini-vant

**Repository Path**: MuZiWen521/wx-mini-vant

## Basic Information

- **Project Name**: wx-mini-vant
- **Description**: 基于vant ui组件的微信小程序脚手架
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-07-09
- **Last Updated**: 2024-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wx-mini-vant

#### 介绍
作为一个后端，不断摸索自己写了个微信小程序脚手架，基于官方的js版本的空白项目，引入vant组件，方便进行开发，也封装了一些常用的东西，全部开源供参考， 
有些设计可能不是最好，但是最适合自己就行，欢迎反馈和建议

#### 功能特点
- 引入vant-weapp的ui组件
- 封装请求，具体见api.js，支持加载中提醒
- 自动区分环境，具体见config.js
- 自定义tabBar，用vant的tabBar组件
- 20240522
  - 新增sass支持
  - 新增自定义隐私协议组件<app-privacy>
- 持续更新中...

#### 如何使用
1. 微信小程序开发工具导入项目
2. 根路径运行 `npm install`
3. 开发工具 上边 【工具】 -> 【构建 npm】
4. 开发工具 右边 【详情】 -> 【本地设置】 -> 【使用npm模块】、【不检验合法域名】
5. 根据自己需要修改config.js中的域名

#### 参考网址
- vant-weapp文档地址：https://vant-ui.github.io/vant-weapp/#/home
- 微信小程序账号信息：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html

#### 开发经验
- 空小程序npm引入vant的ui组件，微信开发者工具npm构建报错
    - https://mp.weixin.qq.com/s/zy7ZiuGxNiCfEsguhmOBIg
    - 注意，由于引入的vant的版本是新的，npm包的位置要注意下，"miniprogramNpmDistDir": "./"
- 自定义底部tabBar导航栏
    - 在app.json文件中，新增tabBar的配置，并且设定"custom": true,注意list也要设置，虽然不生效但是也得有。然后跟pages平级新建custom-tab-bar文件夹，新增index页面，引入vant的组件