您好,登錄后才能下訂單哦!
前期準備 :注冊,填材料,驗證等等:https://mp.weixin.qq.com
1.瀏覽一遍簡易教程,下載相應的開發工具
寫一個小例子
點擊左側的 “編輯”-》點擊右側代碼里的 app.json 修改為
{ "pages":[ "pages/fightings/home", "pages/publish/home", "pages/mine/home" ], "tabBar": { "list": [ { "pagePath": "pages/fightings/home", "text": "挑戰" }, { "pagePath": "pages/publish/home", "text": "發布" }, { "pagePath": "pages/mine/home", "text": "我" } ] }, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "i挑戰", "navigationBarTextStyle":"black" } }
說明
這個樣子太丑了 我們先來美化一下這個tab
{ "pages":[ "pages/home/home", "pages/fightings/home", "pages/mine/home" ], "tabBar": { "color":"#666666", "selectedColor":"#f10b2e", "list": [ { "pagePath": "pages/home/home", "text": "大廳", "iconPath": "./res/icon_tab_home.png", "selectedIconPath": "./res/icon_tab_home_hl.png" }, { "pagePath": "pages/fightings/home", "text": "挑戰", "iconPath":"./res/icon_tab_fighting.png", "selectedIconPath":"./res/icon_tab_fighting_hl.png" }, { "pagePath": "pages/mine/home", "text": "我", "iconPath": "./res/icon_tab_me.png", "selectedIconPath": "./res/icon_tab_me_hl.png" } ] }, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "i挑戰", "navigationBarTextStyle":"black" } }
說明
字段都比較簡單就不詳細說了 其中 “iconPath”: “./res/icon_tab_me.png”是圖片的路徑
自己在項目里創建一個res文件夾,然后放入需要的圖片
tab 好看一點了吧
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。