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

微信小程序开发进阶

---

一、自定义标签栏（TabBar）开发

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

语法说明：

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

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

custom-tabbar.json

{"component": true,"usingComponents": {}
}

custom-tabbar.wxml

<!-- 自定义标签栏结构 -->
<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

.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

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

{"usingComponents": {"custom-tabbar": "/components/custom-tabbar/custom-tabbar"}
}

pages/index/index.js

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

<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

{"usingComponents": {"van-button": "@vant/weapp/button/index","van-tabs": "@vant/weapp/tabs/index","van-tab": "@vant/weapp/tab/index"}
}

pages/movie/movie.wxml

<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

Page({data: {activeTab: 0},onChange(event) {this.setData({ activeTab: event.detail.index });},loadMore() {wx.showToast({ title: '加载中...', icon: 'none' });}
});

---

二、电影列表页面开发

知识点1：WeUI 组件库

说明：

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

使用方式（简略）：

{"usingComponents": {"mp-cell": "weui-miniprogram/cell/cell"}
}

---

知识点2：navigator 组件

语法说明：

<navigator> 用于页面跳转，支持 url、open-type（如 navigate, redirect, switchTab）等属性。

案例代码：

<navigator url="/pages/detail/detail?id=123" open-type="navigate"><view class="movie-item"><text>肖申克的救赎</text></view>
</navigator>

传递参数接收（detail 页面）：

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

<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（全局配置）

{"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）

{"pages": ["pages/index/index","pages/movie/movie","pages/todo/todo","pages/detail/detail"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#07c160","navigationBarTitleText": "小程序进阶","navigationBarTextStyle": "white"}
}

2. 每个页面引入 custom-tabbar
3. 电影详情页接收参数并展示
4. 待办事项使用本地缓存持久化

---

总结

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

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