微信小程序开发进阶
一、自定义标签栏(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 组件库,提供按钮、弹窗、列表等常用组件。
安装与使用:
- 下载 Vant Weapp
- 将
dist
文件夹复制到项目miniprogram_npm/@vant/weapp/
- 在页面 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>
用于页面跳转,支持 url
、open-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 开发(或纯小程序写法)
整合关键点:
- 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"
}
}
- 每个页面引入 custom-tabbar
- 电影详情页接收参数并展示
- 待办事项使用本地缓存持久化
总结
模块 | 核心知识点 | 技术要点 |
---|---|---|
自定义标签栏 | Component 构造器、props、自定义事件 | 替代原生 tabBar,灵活控制 |
电影列表 | navigator 跳转、Vant Weapp、WeUI | 页面传参、UI 组件库使用 |
待办事项 | uni-app、Vue 语法、本地存储 | 跨平台开发、数据持久化 |
综合项目 | 多页面协调、组件复用、状态管理 | 工程化思维、模块解耦 |
以上内容覆盖了你提供章节中的全部知识点,并通过可运行的代码示例 和详细注释帮助理解。建议在微信开发者工具中逐个实践,加深掌握。