艾碼匯微信小程序如何設置小程序導航菜單

上一次寫了艾碼匯 WordPress 小程序插件使用教程(三),插件的主要設置功能基本上就講完了,但是,還有一個重要的功能沒有說,因為這個功能的設置不是在插件設置里,而是在外觀-菜單設置里。今天就介紹小程序導航菜單如何設置。

最開始設計的導航是采用手動添加代碼形式,通過 add_fliter 的方式增加導航鏈接,這種方法的好處是寫法簡單,不好的地方是插件升級不方便,每次升級插件都需要手動改動插件源代碼。這種方法其實也是可以手動把導航做一個插件形式,這樣無論插件怎么升級,都不受影響。后來我就想,如果不另外增加一個導航插件,那么升級會很不方便,每次都要改動插件源代碼的導航設置。假如再增加一個導航插件的話,那么為什么不直接用 WordPress 的菜單功能?于是就把導航功能加入到了菜單設置選項。好處是每次插件升級,都不需要再手動更改插件導航設置,而且手動設置導航項目位置也極方便,只是,還是有一個不便利的地方,那就是初次設置還有一點點麻煩。下面就講講如何設置小程序的導航。

菜單設置方法:

1. 創建導航菜單

點擊網站后臺 - 外觀 - 菜單

創建菜單:菜單名稱根據個人需要填寫,比如 Minapp , 然后保存菜單,如下圖:

小程序導航菜單

從上面的圖可見,我已經把相關的內容都加入菜單中。但是具體應該怎么設置?接著下面來說。

2. 點擊右上角 - 顯示選項

顯示高級菜單屬性

在 顯示高級菜單屬性 中勾選 CSS 類,鏈接關系,圖像描述。

3. 文章/頁面/分類目錄加入菜單

文章/頁面/分類目錄加入菜單

把文章/頁面/分類目錄加入菜單只需要設置兩個項:導航標簽,即出現在小程序的導航標題;CSS 類,如果使用的是圖形字體圖標庫,比如 fa-home ,即出現在小程序導航標題前面,或者自已開發的小程序的導航圖標;圖像描述,如果不使用圖形字體圖標庫,則 CSS 類留空,在圖像描述處填寫導航圖標地址,比如在小程序 images 目錄里對應的 icon 圖標,可以使用 ../../images/home.png ,也可以使用網絡地址,如:https://www.abc.com/uploads/icon/home.png。鏈接關系留空即可。

4. 把小程序內鏈加入菜單

比如,我想要把我的新動態頁面地址:/pages/forum/forum 加入到導航菜單,應該如何設置?

小程序內鏈加入菜單

小程序內部的頁面鏈接與網站文章/頁面/分類的鏈接不一樣,除了設置導航標簽,CSS 類或者圖像描述之外,還需要填寫 URL 和鏈接關系。其實,小程序內部頁面的鏈接屬于是自定義鏈接,所以需要填寫 URL 。URL 的地址就是頁面的路徑,如上圖所示。至于鏈接關系,則固定填寫 page ,表示的是頁面鏈接導航。

5. 把網站域名加入菜單

比如,我想要把一個網站的地址或者文章頁加入菜單,這個文章頁又不屬于小程序網站內部的。如下圖:

把網站域名加入菜單

根據上圖可以看到,外部域名鏈接的設置和小程序內部的頁面鏈接設置其實基本上一樣的,需要設置 URL ,CSS 類或者圖像描述,導航標簽,鏈接關系。但是,鏈接關系和上面的小程序內部頁面鏈接是有區別的,采用的鏈接關系為 site ,表示的是網站導航鏈接。

6. 在導航菜單中加入在線客服

如果想要在導航鏈接菜單中加入一個點擊按鈕即可打開在線客服對話框,又應該怎么做呢?如下圖:

導航菜單中加入在線客服

根據上圖可以看到,在線客服的設置好像和小程序內部頁面鏈接相似,URL 填寫了內部頁面地址。其實,這里的 URL 是隨便填寫的,因為在線客服對話框是不需要頁面地址的。但是,鏈接關系必須為 contact ,表示的是客服導航鏈接。

7. 在導航菜單中加入小程序跳轉

如果想要在導航鏈接菜單中加入點擊跳轉小程序鏈接,那又應該如何做?

首先,必須把需要跳轉的小程序 appid 加入到 app.json 的配置中,具體的配置內容,可以參考微信官方開發文檔,這里不詳述。

導航菜單中加入小程序跳轉

根據上圖可以看到,小程序跳轉設置的 URL 變了,變成了 http://appid ,其實 http:// 是 WordPress 自動添加的。添加自定義鏈接的時候,只是在 URL 上填寫 appid 的,然而,保存后,就會自動出現 http:// ,不過,沒什么關系,影響不大。需要注意的是鏈接關系,微信小程序跳轉的鏈接關系為 weapp ,QQ 小程序跳轉的鏈接關系為 tencent , 百度智能小程序跳轉的鏈接關系為 baidu ,字節跳動(今日頭條)小程序跳轉的鏈接關系為 toutiao。

8. 在導航菜單中加入拔打電話

如果想要在小程序的導航菜單中點擊打拔電話,添加自定義鏈接的時候,在 URL 上填寫電話號碼,然后鏈接關系為 tel 。

從上數下來,可以看到,小程序導航菜單支持文章/頁面/分類鏈接,小程序內部頁面鏈接,網站外部鏈接(需要把域名加入業務域名內),客服咨詢,小程序跳轉。而每個設置都可以在后臺設置,支持排序,隨時調整,極大的方便小程序的應用,而不是之前開發的開源版小程序那樣,每一個設置都需要在小程序源碼里進行配置,一旦提交審核后,每次修改都需要重新提交代碼。個人覺得這是非常實用的設計!

封面圖:FirmBee 出處:Pixabay 授權

相關推薦

發表評論

微信掃一掃

微信掃一掃

微信掃一掃,分享到朋友圈

艾碼匯微信小程序如何設置小程序導航菜單
返回頂部

顯示

忘記密碼?

顯示

顯示

獲取驗證碼

Close
3d组六技巧