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 管理远程仓库和本地仓库中的代码了。

相关推荐
Kyle199410 分钟前
RollCode:高效低代码开发新体验
前端
这是个栗子10 分钟前
【Node.js安装注意事项】-安装路径不能有空格
前端·npm·node.js
源力祁老师12 分钟前
外部系统获取Odoo数据最便捷的方式
开发语言·前端·javascript
用户97141718142714 分钟前
picker-view选中框不居中
前端
YGY_Webgis糕手之路14 分钟前
Cesium 快速入门(十) JulianDate(儒略日期)详解
前端·gis·cesium
燕山石头1 小时前
解决 IntelliJ IDEA Build时 Lombok 不生效问题
java·前端·intellij-idea
chancygcx_1 小时前
前端核心技术Node.js(二)——path模块、HTTP与模块化
前端·http·node.js
YGY_Webgis糕手之路1 小时前
Cesium 快速入门(三)Viewer:三维场景的“外壳”
前端·gis·cesium
丘色果1 小时前
NPM打包时,报reason: getaddrinfo ENOTFOUND registry.nlark.com
前端·npm·node.js