下载与创建
首先，根据地址下载开发工具：微信开发者工具。
下来根据图文进行创建操作：（这里我起的名字是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前端。如有意见可以进行评论，每一条评论我都会认真对待。
网友评论