微信小程序开发入门实战 （一）准备阶段与vant-ui使用

下载与创建

首先，根据地址下载开发工具：微信开发者工具。

下来根据图文进行创建操作：（这里我起的名字是new-miniprogram）

新建 创建

创建结束：

创建结束

使用npm（第三方包）

初始化npm：在你所建项目的根目录下，使用npm init -y，初始化一下

执行npm init

开启“使用npm模块”(右上角详情-本地设置-勾选使用npm模块)

使用npm模块

根目录下新建 node_modules 文件夹: mkdir node_modules

cd node_modules 进入新建的 node_modules，执行下面命令：

npm install miniprogram-datepicker --production

miniprogram-datepicker

点开左上角工具->选中构建npm

点开左上角工具->选中构建npm

完成构建

完成构建

成功后会在目录中生成一个miniprogram_npm目录。

这时候你就可以使用诸如：vant-weapp等的小程序第三方库了。

我们可以根据vant-weapp的快速入门来尝试一下。

注：每当你通过 npm 安装一个第三方库时，记得别忘记重新构建一下（点开左上角工具->选中构建npm）

引用vant-ui

如果你不需要使用vant-ui，请跳过后面内容

npm/yarn安装（必需）：需要注意的是 package.json 和 node_modules 必须在 miniprogram 目录下

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

构建 npm 包（必需）：打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

构建npm 包

修改app.json（必需）：将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

修改 tsconfig.json（非必需）：如果你使用 typescript 开发小程序，需要在 tsconfig.json 中增加如下配置，防止 npm 构建后 tsc 编译报错
请将path/to/node_modules/@vant/weapp修改为项目中 @vant/weapp 所在的目录

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    }
  }
}

vant-ui使用

以 Button 组件为例：只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}

// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}

引用如图：

引用如图

引入组件后，可以在 wxml 中直接使用组件：

<van-button type="primary">按钮</van-button>

使用组件如图：

van-button使用

结语

提示：后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。