第15次课 - 小程序进阶与uni-app开发

1

教学目标

掌握Vant Weapp组件库的使用
理解自定义组件的开发与通信
了解uni-app跨平台开发框架
能够使用uni-app创建跨平台项目
案例：案例7-1 自定义标签栏、案例7-2 电影列表、案例7-3 待办事项、案例8 uni-app 短视频

2

重点、难点与课时分配

◎

教学重点

Vant Weapp、自定义组件、uni-app跨平台

△

教学难点

自定义组件通信、uni-app与小程序差异

课时分配（共 3 学时）

理论 1 学时

实践 2 学时

组件库与 uni-app 讲解 1 学时，跨平台改造实操 2 学时

3

课件要点

Vant Weapp组件库

npm安装: npm i @vant/weapp -S --production

构建npm: 工具 → 构建npm

在page.json中usingComponents引入组件

常用组件: Button/Cell/Dialog/Toast/Tab/SwipeCell

主题定制: 修改CSS变量覆盖默认样式

自定义组件

组件创建: 右键新建Component(4个文件)

组件通信: properties(父→子) + triggerEvent(子→父)

数据监听: observers 监听properties/data变化

组件生命周期: created/attached/ready/detached

插槽slot: 匿名插槽/具名插槽

uni-app入门

uni-app: 使用Vue.js开发跨平台应用

一套代码 → 微信/支付宝/H5/App多端运行

HBuilderX编辑器: 官方推荐开发工具

语法: 与小程序类似, 但使用Vue模板语法

条件编译: #ifdef MP-WEIXIN ... #endif

案例7-1/7-2/7-3 与案例8 uni-app 短视频

案例7-1 自定义标签栏 — custom-tab-bar 目录 + tabBar.custom:true 接管底部导航

案例7-2 电影列表 — 自定义组件封装电影卡片，properties 传入、triggerEvent 回传

案例7-3 待办事项 — 组件内 observers 监听数据变化，slot 支持外部内容定制

案例8 uni-app 短视频 — 用 Vue 语法一套代码同时编译到微信小程序与 H5

对比总结：原生开发与 uni-app 的适用场景、性能差异与迁移成本

4

代码示例与讲解

Vant Weapp组件库

                vant-setup.js
                Vant Weapp 常用组件
              
1// 1. 安装 Vant Weapp
2// npm i @vant/weapp -S --production
3
4// 2. 构建 npm
5// 工具 → 构建 npm → 生成 miniprogram_npm
6
7// 3. app.json 配置 usingComponents
8{
9  usingComponents: {
10    "van-button": "@vant/weapp/button/index",
11    "van-cell": "@vant/weapp/cell/index",
12    "van-field": "@vant/weapp/field/index",
13    "van-tab": "@vant/weapp/tab/index",
14    "van-tabs": "@vant/weapp/tabs/index",
15    "van-toast": "@vant/weapp/toast/index"
16  }
17}
18
19<!-- 4. 使用组件 -->
20<van-button type="primary"
21  size="small">主要按钮</van-button>
22
23<van-button type="warning">警告按钮</van-button>
24
25<!-- Cell 单元格 -->
26<van-cell title="用户名" value="张三" />
27
28<!-- Field 输入框 -->
29<van-field label="手机号"
30  placeholder="请输入手机号" type="number" />
31
32<!-- Toast 轻提示 -->
33import Toast from '@vant/weapp/toast/toast'
34Toast.success('操作成功')
35
36// ⚠️ 使用注意
37// 1. 安装后必须点「构建 npm」
38// 2. usingComponents 路径要精确到 index
39// 3. project.config.json 设置 packNpmManually
40// 4. app.wxss 中可覆盖 CSS 变量定制主题

Vant Weapp 是轻量小程序 UI 组件库。使用步骤：npm install @vant/weapp 安装，在开发者工具中点构建 npm 生成 miniprogram_npm 目录，在 app.json 的 usingComponents 中注册组件，路径要精确到 index。常用组件：van-button 按钮、van-cell 单元格、van-field 输入框、van-tabs 标签页、Toast 轻提示。可在 app.wxss 中覆盖 CSS 变量定制主题色。

自定义组件

                custom-component.js
                自定义组件结构
              
1// 自定义组件：评分卡片 rate-card
2// components/rate-card/rate-card.js
3Component({
4  properties: {
5    title: { type: String, value: '' },
6    score: { type: Number, value: 0 },
7    image: { type: String, value: '' }
8  },
9
10  data: { innerScore: 0 },
11
12  observers: {
13    score: function(val) {
14      this.setData({ innerScore: val })
15    }
16  },
17
18  methods: {
19    onRate(e) {
20      const score = e.detail
21      this.triggerEvent('change', { score })
22    }
23  }
24})
25
26// components/rate-card/rate-card.wxml
27<view class="rate-card">
28  <image src="{{image}}" />
29  <text>{{title}}</text>
30  <view class="stars">
31    <slot></slot>
32  </view>
33</view>
34
35// 使用自定义组件
36{
37  usingComponents: {
38    "rate-card": "/components/rate-card/rate-card"
39  }
40}
41
42<rate-card title="菜品评分" score="{{4}}"
43  bind:change="onScoreChange">
44  <view>⭐⭐⭐⭐</view>
45</rate-card>
46
47// ⚠️ 组件关键点
48// properties: 外部传入的数据（类似 props）
49// data: 组件内部数据
50// observers: 数据监听器（类似 watch）
51// triggerEvent: 向父组件发送事件
52// slot: 插槽，允许父组件传入内容

自定义组件用 Component 构造器创建。properties 定义外部传入属性，类似 Vue 的 props，支持类型校验和默认值；data 是组件内部数据；observers 数据监听器，当 properties 或 data 变化时触发，类似 Vue 的 watch；triggerEvent 向父组件发送自定义事件，父组件用 bind:事件名接收；slot 插槽允许父组件传入自定义内容到组件内部。

uni-app入门

                uniapp-intro.vue
                uni-app 跨平台开发
              
1<!-- uni-app 基于 Vue.js 跨平台框架 -->
2<!-- 一套代码 → 微信/支付宝/H5/App -->
3
4<!-- pages/index/index.vue -->
5<template>
6  <view class="container">
7    <text>{{title}}</text>
8    <button @click="handleClick">点击</button>
9    <!-- 条件编译：仅微信小程序 -->
10    <!-- #ifdef MP-WEIXIN -->
11    <button open-type="getUserInfo">微信登录</button>
12    <!-- #endif -->
13    <!-- 条件编译：仅H5 -->
14    <!-- #ifdef H5 -->
15    <a href="/login">网页登录</a>
16    <!-- #endif -->
17  </view>
18</template>
19
20<script>
21export default {
22  data() { return { title: 'Hello uni-app' } },
23  methods: {
24    handleClick() {
25      uni.showToast({ title: '点击了' })
26    }
27  }
28}
29</script>
30
31// 条件编译（JS中）
32// #ifdef MP-WEIXIN
33wx.getSystemInfoSync()
34// #endif
35
36// 条件编译（样式）
37/* #ifdef H5 */
38.container { max-width: 750rpx; }
39/* #endif */
40
41// ⚠️ uni-app vs 原生对比
42// wx.xxx → uni.xxx（API兼容层）
43// .wxml → .vue template
44// .wxss → .vue style（支持scss）
45// Page() → export default {}
46// rpx单位通用，750rpx = 屏幕宽度

uni-app 是基于 Vue.js 的跨平台框架，一套代码可编译到微信小程序、支付宝小程序、H5 和 App。条件编译是核心特性：用 #ifdef MP-WEIXIN 包裹仅微信小程序的代码，#ifdef H5 包裹仅网页的代码，编译时自动剔除其他平台代码。API 层面 wx.xxx 替换为 uni.xxx，兼容多端。开发工具用 HBuilderX，支持 .vue 单文件组件和 scss 预处理。

案例7-1自定义标签栏+案例7-3待办事项+案例8短视频

                cases.js
                三个案例效果
              
1// 案例7-1：自定义标签栏 custom-tabbar
2// components/custom-tabbar/custom-tabbar.js
3Component({
4  data: {
5    list: [
6      { pagePath: '/pages/index/index', text: '首页', icon: 'home' },
7      { pagePath: '/pages/menu/menu', text: '菜单', icon: 'menu' },
8      { pagePath: '/pages/mine/mine', text: '我的', icon: 'user' }
9    ],
10    active: 0
11  },
12
13  methods: {
14    switchTab(e) {
15      const { index, path } = e.currentTarget.dataset
16      this.setData({ active: index })
17      wx.switchTab({ url: path })
18    }
19  }
20})
21
22// 案例7-3：待办事项（uni-app）todo.vue
23<template>
24  <view class="todo-app">
25    <view class="input-bar">
26      <input v-model="newTodo" placeholder="输入待办" />
27      <button @click="addTodo">添加</button>
28    </view>
29    <view v-for="(item, i) in todos" :key="i"
30      class="todo-item {{item.done ? 'done' : ''}}">
31      <checkbox :checked="item.done" @click="toggle(i)" />
32      <text>{{item.text}}</text>
33      <text class="del" @click="remove(i)">删除</text>
34    </view>
35  </view>
36</template>
37
38<script>
39export default {
40  data() { return { newTodo: '', todos: [] } },
41  methods: {
42    addTodo() {
43      if (!this.newTodo.trim()) return
44      this.todos.push({ text: this.newTodo, done: false })
45      this.newTodo = ''
46    },
47    toggle(i) { this.todos[i].done = !this.todos[i].done },
48    remove(i) { this.todos.splice(i, 1) }
49  }
50}
51</script>
52
53// 案例8：短视频列表（核心：video组件）
54// <video src="{{item.url}}" autoplay loop />
55// 全屏竖屏滑动：swiper + video 组件
56// 监听 swiper change 暂停/播放视频

案例7-1自定义标签栏：用 Component 创建 custom-tabbar 组件，list 定义标签项，switchTab 方法切换页面并更新 active 状态。案例7-3待办事项（uni-app）：用 Vue.js 语法，v-model 双向绑定输入，v-for 渲染列表，点击 checkbox 切换 done 状态，splice 删除项。案例8短视频：核心是 swiper + video 组件，竖屏全屏滑动，监听 swiper 的 change 事件控制视频暂停和播放。

5

课件预览与下载