微信测试号底部菜单栏的创建以及按钮链接跳转的实现

首先,得先申请一个测试号,我之前已经在另外一篇博客写过,这里就不累赘,不懂申请的可以点击下面博客链接,看第二部分:

https://blog.youkuaiyun.com/weidong_y/article/details/81141868

自定义菜单的按钮类型介绍:

1、click:点击推事件用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互;
2、view:跳转URL用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息。
3、scancode_push:扫码推事件用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后显示扫描结果(如果是URL,将进入URL),且会将扫码的结果传给开发者,开发者可以下发消息。
4、scancode_waitmsg:扫码推事件且弹出“消息接收中”提示框用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后,将扫码的结果传给开发者,同时收起扫一扫工具,然后弹出“消息接收中”提示框,随后可能会收到开发者下发的消息。
5、pic_sysphoto:弹出系统拍照发图用户点击按钮后,微信客户端将调起系统相机,完成拍照操作后,会将拍摄的相片发送给开发者,并推送事件给开发者,同时收起系统相机,随后可能会收到开发者下发的消息。
6、pic_photo_or_album:弹出拍照或者相册发图用户点击按钮后,微信客户端将弹出选择器供用户选择“拍照”或者“从手机相册选择”。用户选择后即走其他两种流程。
7、pic_weixin:弹出微信相册发图器用户点击按钮后,微信客户端将调起微信相册,完成选择操作后,将选择的相片发送给开发者的服务器,并推送事件给开发者,同时收起相册,随后可能会收到开发者下发的消息。
8、location_select:弹出地理位置选择器用户点击按钮后,微信客户端将调起地理位置选择工具,完
### 微信小程序底部导航栏实现 以下是基于微信小程序官方文档和相关属性说明构建的一个完整的底部导航栏代码示例: #### 置 `app.json` 文件中的 `tabBar` ```json { "tabBar": { "color": "#999", // 未选择时的文字颜色 "selectedColor": "#007AFF", // 选中后的文字颜色 "borderStyle": "black", // 底部边框的颜色 "list": [ { "pagePath": "pages/index/index", // 对应页面的路径 "text": "首页", // 菜单项显示的文字 "iconPath": "images/home.png", // 默认状态下的图标路径 "selectedIconPath": "images/home-active.png" // 选中状态下的图标路径 }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "images/cart.png", "selectedIconPath": "images/cart-active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "images/user.png", "selectedIconPath": "images/user-active.png" } ] } } ``` 此代码片段展示了如何通过置 `tabBar` 属性来定义一个具有三个菜单项的底部导航栏。每个菜单项都指定了默认和选中状态下对应的图标以及跳转的目标页面路径[^1]。 #### 关键点解析 - **`color` 和 `selectedColor`**: 定义了未选中和选中状态下导航文字的颜色,增强了用户体验。 - **`borderStyle`**: 设置了底部导航栏的边框样式,默认支持 `"black"` 或 `"white"`。 - **`list` 数组**: 每一项代表一个导航按钮,其中包含了 `pagePath`, `text`, `iconPath`, 和 `selectedIconPath` 的具体设置[^2]。 #### 注意事项 为了使上述置生效,需确保项目目录下存在指定的图片文件(如 `home.png`, `cart.png` 等),并保证这些资源能够被正确加载到应用中。此外,目标页面路径也需要与实际创建的小程序页面相匹。 ```javascript // 示例:index.js 中的内容可以为空或者仅包含简单的初始化逻辑 Page({ data: {}, }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值