微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)

微信小程序开发进阶


一、自定义标签栏(TabBar)开发

知识点1:创建自定义组件

语法说明:

微信小程序允许开发者通过 Component() 构造器创建自定义组件。组件包含四个文件:.json(配置)、.wxml(结构)、.wxss(样式)、.js(逻辑)。

案例代码:创建一个自定义标签栏组件 custom-tabbar

custom-tabbar.json
json 复制代码
{
  "component": true,
  "usingComponents": {}
}
custom-tabbar.wxml
xml 复制代码
<!-- 自定义标签栏结构 -->
<view class="tabbar">
  <view 
    class="tabbar-item {{selected === index ? 'active' : ''}}" 
    wx:for="{{list}}" 
    wx:key="index"
    bindtap="switchTab"
    data-index="{{index}}"
  >
    <image src="{{item.iconPath}}" class="icon" />
    <text class="text">{{item.text}}</text>
  </view>
</view>
custom-tabbar.wxss
css 复制代码
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.tabbar-item.active {
  color: #07c160;
}

.icon {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}
custom-tabbar.js
javascript 复制代码
Component({
  properties: {
    // 接收父组件传入的 tab 列表
    list: {
      type: Array,
      value: []
    },
    // 当前选中项索引
    selected: {
      type: Number,
      value: 0
    }
  },
  methods: {
    // 切换 tab 时触发
    switchTab(e) {
      const index = e.currentTarget.dataset.index;
      this.setData({ selected: index });
      // 触发自定义事件通知父组件
      this.triggerEvent('tabchange', { index });
    }
  }
});

知识点2:使用自定义组件

语法说明:

在页面的 .json 文件中通过 usingComponents 引入组件,在 .wxml 中使用。

案例代码:在首页使用 custom-tabbar

pages/index/index.json
json 复制代码
{
  "usingComponents": {
    "custom-tabbar": "/components/custom-tabbar/custom-tabbar"
  }
}
pages/index/index.js
javascript 复制代码
Page({
  data: {
    tabList: [
      { text: '首页', iconPath: '/assets/home.png', selectedIconPath: '/assets/home-active.png' },
      { text: '电影', iconPath: '/assets/movie.png', selectedIconPath: '/assets/movie-active.png' },
      { text: '待办', iconPath: '/assets/todo.png', selectedIconPath: '/assets/todo-active.png' }
    ],
    activeTab: 0
  },
  onTabChange(e) {
    const { index } = e.detail;
    this.setData({ activeTab: index });
    // 跳转页面(需配合 navigator 或 wx.switchTab)
    wx.switchTab({ url: ['/pages/index/index', '/pages/movie/movie', '/pages/todo/todo'][index] });
  }
});
pages/index/index.wxml
xml 复制代码
<view class="container">
  <!-- 页面内容 -->
</view>

<!-- 自定义标签栏 -->
<custom-tabbar 
  list="{{tabList}}" 
  selected="{{activeTab}}" 
  bind:tabchange="onTabChange"
/>

知识点3:使用自定义组件渲染标签栏(替代原生 tabBar)

说明:

微信原生 tabBar 无法在非 tabBar 页面使用,因此使用自定义组件实现灵活标签栏。

注意:若使用自定义 tabbar,需关闭 app.json 中的 tabBar 配置,或仅在非 tabBar 页面使用。


知识点4:Vant Weapp 组件库

语法说明:

Vant Weapp 是有赞开源的微信小程序 UI 组件库,提供按钮、弹窗、列表等常用组件。

安装与使用:

  1. 下载 Vant Weapp
  2. dist 文件夹复制到项目 miniprogram_npm/@vant/weapp/
  3. 在页面 json 中引入组件

案例:使用 Vant 的 Button 和 Tab 组件

pages/movie/movie.json
json 复制代码
{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-tabs": "@vant/weapp/tabs/index",
    "van-tab": "@vant/weapp/tab/index"
  }
}
pages/movie/movie.wxml
xml 复制代码
<van-tabs active="{{activeTab}}" bind:change="onChange">
  <van-tab title="正在热映">热映列表</van-tab>
  <van-tab title="即将上映">即将上映</van-tab>
</van-tabs>

<van-button type="primary" bind:click="loadMore">加载更多</van-button>
pages/movie/movie.js
javascript 复制代码
Page({
  data: {
    activeTab: 0
  },
  onChange(event) {
    this.setData({ activeTab: event.detail.index });
  },
  loadMore() {
    wx.showToast({ title: '加载中...', icon: 'none' });
  }
});

二、电影列表页面开发

知识点1:WeUI 组件库

说明:

WeUI 是微信官方设计语言,提供基础样式。可直接引入 weui-miniprogram

使用方式(简略):

json 复制代码
{
  "usingComponents": {
    "mp-cell": "weui-miniprogram/cell/cell"
  }
}

知识点2:navigator 组件

语法说明:

<navigator> 用于页面跳转,支持 urlopen-type(如 navigate, redirect, switchTab)等属性。

案例代码:

xml 复制代码
<navigator url="/pages/detail/detail?id=123" open-type="navigate">
  <view class="movie-item">
    <text>肖申克的救赎</text>
  </view>
</navigator>
传递参数接收(detail 页面):
javascript 复制代码
Page({
  onLoad(options) {
    console.log('电影ID:', options.id); // 输出: 123
  }
});

三、待办事项(uni-app 跨平台开发)

知识点1:uni-app 框架概述

  • 基于 Vue.js,一套代码可编译到微信小程序、H5、App 等平台。
  • 使用 .vue 单文件组件。

知识点2-6:HBuilder X、项目结构、配置等

案例:uni-app 待办事项

pages/todo/todo.vue
vue 复制代码
<template>
  <view class="container">
    <input 
      v-model="newTodo" 
      @confirm="addTodo" 
      placeholder="输入新任务" 
      class="input"
    />
    
    <view class="todo-list">
      <view 
        v-for="(item, index) in todos" 
        :key="index" 
        class="todo-item"
        @tap="toggleDone(index)"
      >
        <text :class="{ done: item.done }">{{ item.text }}</text>
        <button @tap.stop="removeTodo(index)" size="mini">删除</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: uni.getStorageSync('todos') || []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ text: this.newTodo, done: false });
        this.saveTodos();
        this.newTodo = '';
      }
    },
    toggleDone(index) {
      this.todos[index].done = !this.todos[index].done;
      this.saveTodos();
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
      this.saveTodos();
    },
    saveTodos() {
      uni.setStorageSync('todos', this.todos);
    }
  }
};
</script>

<style>
.input {
  padding: 10px;
  border: 1px solid #ddd;
  margin: 10px;
}
.todo-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.done {
  text-decoration: line-through;
  color: #999;
}
</style>
manifest.json(全局配置)
json 复制代码
{
  "name": "MyTodoApp",
  "appid": "",
  "description": "",
  "versionName": "1.0.0",
  "versionCode": "100",
  "app-plus": { /* App 配置 */ },
  "mp-weixin": {
    "appid": "你的小程序appid",
    "setting": {
      "urlCheck": false
    }
  }
}

使用 HBuilder X 编译后,可直接运行到微信开发者工具。


四、综合性案例:电影+待办+自定义标签栏整合

场景描述:

  • 底部自定义标签栏(首页、电影、待办)
  • 首页展示欢迎语
  • 电影页使用 Vant Tabs + navigator 跳转详情
  • 待办页使用 uni-app 开发(或纯小程序写法)

整合关键点:

  1. app.json 配置页面路径(不使用原生 tabBar)
json 复制代码
{
  "pages": [
    "pages/index/index",
    "pages/movie/movie",
    "pages/todo/todo",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#07c160",
    "navigationBarTitleText": "小程序进阶",
    "navigationBarTextStyle": "white"
  }
}
  1. 每个页面引入 custom-tabbar
  2. 电影详情页接收参数并展示
  3. 待办事项使用本地缓存持久化

总结

模块 核心知识点 技术要点
自定义标签栏 Component 构造器、props、自定义事件 替代原生 tabBar,灵活控制
电影列表 navigator 跳转、Vant Weapp、WeUI 页面传参、UI 组件库使用
待办事项 uni-app、Vue 语法、本地存储 跨平台开发、数据持久化
综合项目 多页面协调、组件复用、状态管理 工程化思维、模块解耦

以上内容覆盖了你提供章节中的全部知识点,并通过可运行的代码示例详细注释帮助理解。建议在微信开发者工具中逐个实践,加深掌握。

相关推荐
又是忙碌的一天3 小时前
java学习:四大排序
java·学习·排序算法
Aurora-silas3 小时前
RAG技术全栈指南学习笔记------基于Datawhale all-in-rag开源项目
笔记·学习
sophie旭4 小时前
一道面试题,开始性能优化之旅(8)-- 构建工具和性能
前端·面试·性能优化
市民中心的蟋蟀4 小时前
第三章 钩入React 【上】
前端·react.js·架构
悠哉悠哉愿意4 小时前
【ROS2学习笔记】rqt 模块化可视化工具
笔记·学习·机器人·ros2
2501_915909064 小时前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
Holin_浩霖4 小时前
为什么typeof null 返回 "object" ?
前端
PanZonghui5 小时前
Zustand 实战指南:从基础到高级,构建类型安全的状态管理
前端·react.js
PanZonghui5 小时前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite