起步

熟悉小程序的创建方式，可以跳过 起步 部分

根据自己情况选择，不同的模板。

  1. 目录自定义
  2. AppID：选择你自己的
  3. 选择 不使用云服务 （对初学者友好，没有太多文件）
  4. 根据需要选中 TS + Scss 模板

image-20230629202305598

选择你自己的 UI 组件库（或者原生写小程序，不采取第三方UI）

UI 组件库的选择

优先采取 Vant Weapps （如果不用组件库，可跳过）

官网：前往 Vant 组件库

  • 安装 npm 包
1
yarn add @vant/weapp --production
  • 删除新版小程序样式

app.json 文件中删除 “style”: “v2”

image-20230629203241718

  • 手动索引到正确的 npm 依赖位置
1
2
3
4
5
6
7
8
9
10
11
12
13
{
  //其他信息...
  "setting": {
    //其他配置...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

image-20230629210334688

  • 构建 npm

这一步至关重要，需要从远程安装包。

具体步骤：选中“工具”-“构建npm”,等待构建完成

image-20230629210559834

构建完成，应该能够看到已经成功下载 vant

image-20230629210753331

开始使用

完成前面2个步骤，就按照 vant 文档写吧

  1. 基本使用

在页面的 json文件 中添加组件

1
2
3
4
5
6
{
  "usingComponents": {
    // 普通按钮
    "van-button": "@vant/weapp/button/index"
  }
}
  1. 添加 json 后，在 wxml 中使用组件
1
<van-button type="primary">按钮</van-button>
  1. 效果图

image-20230629211438057

其他组件：Button 按钮及其其他组件