2025微信小程序开发实战教程（二）

1. 使用第三方组件库

UI 设计对微信小程序开发非常重要。我们常说"颜值即正义"，大家都喜欢具有一定设计美感的东西。

关于微信小程序的 UI 组件库有很多，比如微信官方推出的 WeUI、有赞前端团队开源的 VantWeapp、蚂蚁金服团队推出的 AntDesignMobile 等等。

这里我个人比较推荐的是 VantWeapp。

VantWeapp 官网：

css 复制代码

https://vant-ui.github.io/vant-weapp/#/home

1.1 安装 VantWeapp

首先在小程序项目的根目录初始化 npm 环境

*css* 复制代码

npm init

你会看到在项目里面多出一个 package.json 文件，然后你就可以使用 npm 配置第三方库了。

接着安装 VantWeapp

css 复制代码

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

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

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

1.2 修改 app.json

删除 app.json 文件中的 style:v2 属性，因为新版小程序组件加了很多样式，这个属性会导致部分组件样式混乱。

1.3 构建 npm 包

点击工具 -> 构建 npm，构建完成后，就能引入组件。

1.4 注册使用 VantWeapp 的组件

这里以使用 Button 按钮为例：

注册组件分为全局注册和按需引入两种方式。

全局注册 : 在根目录 app.json 文件注册组件

按需引入：在需要使用页面的 json 文件中引入，例如在登录页面的 logon.json 文件中引入

接着我们就可以在页面中使用这个组件了：

css 复制代码

 <!-- 登录按钮 -->
 <van-button  class="login-button"    hairline  bind:tap="handleSubmit" color="#4e6ef2">登录</van-button>

1.5 使用 VantWeapp 完善登录页面

css 复制代码

<view class="container">
  <!-- 标题区域 -->
  <view class="header">
    <text class="title">知否技术</text>
  </view>
  <van-cell-group>
    <van-field
    model:value="{{ username }}"
    required
    clearable
    label="账号"
    placeholder="请输入账号"
  />

  <van-field
    model:value="{{ password }}"
    type="password"
    label="密码"
    placeholder="请输入密码"
    required
  />
</van-cell-group>
 <!-- 登录按钮 -->
 <van-button  class="login-button"  hairline  bind:tap="handleSubmit" color="#4e6ef2">登录</van-button>
</view>

1.5.1 简易双向绑定

小程序在基础库 2.9.3 以后开始支持简易双向绑定了。比如：

css 复制代码

 <input model:value="{{username}}"/>

当输入框变化时，this.data.username 将会自动更新，页面会自动渲染。‌‌

但是比较坑爹的是仅支持单一字段绑定，不支持对象路径，例如下面的例子就不支持

css 复制代码

 <input model:value="{{loginForm.username}}"/>

有了简易双向绑定之后，我们就不用再手动修改值了，例如下面的方法就可以省去了。

css 复制代码

  // 用户名输入事件
  onUsernameInput(e) {
    this.setData({
      username: e.detail.value
    });
  },

  // 密码输入事件
  onPasswordInput(e) {
    this.setData({
      password: e.detail.value
    });
  },

2. 上传代码到 Gitee

2.1 新建 Gitee 仓库

2.2 修改版本管理参数

在微信开发者工具中点击版本管理，接下来需要设置通用、网络和认证、远程的参数。

通用：账号名称要和 Gitee 保持一致
网络认证：填写 Gitee 账号和密码
远程：将 Gitee 的 Https 地址粘进去

配置好 Gitee 之后，我们就可以使用 Git 管理远程仓库和本地仓库中的代码了。