最近在寫微信小程序(原生),頁面tabbar之前使用得是在app.json文件中配置得,但是由於業務需求,點擊tabbar按鈕之前需要校驗用戶是否登錄了,所以整個tabbar都要重新自定義,好在微信小程序在app.json文件中提供了一個custom得屬性,將custom設置為true后,稍作修改就可以使用了;不過在使用過程中,由於自己的粗心 導致遇到了一些問題。
微信官方文檔鏈接:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
一、配置信息
1、在 app.json
中的 tabBar
項指定 custom
字段
2、所有 tab 頁的 json 里需聲明 usingComponents
項,也可以在 app.json
全局開啟。(注:usingComponents
直接賦值為空對象即可)
二、新增tabbar文件
在代碼根目錄下添加入口文件: (與pages同級的目錄下新增custom-tab-bar文件夾,並生成index的文件(直接在微信開發者工具的編輯器里得custom-tab-bar文件夾下右擊->新建component->輸入index即可))
三、添加tabbar文件代碼
1、custom-tab-bar/index.js文件
2、custom-tab-bar/index.wxml文件
3、custom-tab-bar/index.wxss文件
4、custom-tab-bar/index.josn文件
四、需要用到tabbar頁面需要添加得代碼
js文件(selected:點擊第幾個 就在對應得頁面中配置下 並賦值與其對應得index)
注意:如果在app.json文件中沒有添加( "usingComponents":{}),則需要在json文件中新增添加 "usingComponents":{} (千萬不能忘記了哦 )