MUI、HTML5+、HBuilder實現透明漸變導航欄+自定義按鈕（右上角分享按鈕）
先上效果圖：
js程式碼：
mui.plusReady(function() { var ws = plus.webview.currentWebview(); ws.setStyle({ "titleNView":{ backgroundColor: '#f7f7f7',//導航欄背景色 titleText: '透明漸變(native模式)',//導航欄標題 titleColor: '#000000',//文字顏色 type:'transparent',//透明漸變樣式 buttons:[{ text:'', float:'right', type:'share', onclick:"javascript:plus.webview.currentWebview().evalJS('shareHref();')" }], autoBackButton: true,//自動繪製返回箭頭 splitLine:{//底部分割線 color:'#cccccc' } } }) })
html程式碼：
<body> <div class="mui-content"> <!--頂部banner圖 開始--> <div id="kr-article-banner" class="kr-article-banner"> <div id="kr-article-cover" class="kr-article-cover"> <img width="100%" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBE00AN0001NOS.jpg"> </div> <h2 id="kr-article-title" class="kr-article-title">首對“海歸”大熊貓雙胞胎回到中國</h2> </div> <!--頂部banner圖 結束--> <div class="kr-article-content"> <!-- 文章作者、釋出時間等資訊 --> <div class="kr-article-meta"> <div id="kr-article-author" class="kr-article-author">中國新聞網</div> <div class="kr-article-text">發表於</div> <div id="kr-article-time" class="kr-article-time">2018-12-05 04:22</div> </div> <!--文章詳細內容--> <div id="kr-article-article" class="kr-article-article" v-html="content"> <p> 12月4日，旅奧大熊貓龍鳳胎“福鳳”“福伴”順利回到中國大熊貓保護研究中心，入住臥龍神樹坪基地隔離檢疫區，成為首對“海歸”大熊貓雙胞胎。大熊貓“福鳳”“福伴”於2016年8月7日在奧地利美泉宮動物園出生。大熊貓“福鳳”為雌性，體重60kg，愛吃竹筍和紅薯，比較貪玩。 大熊貓“福伴”為雄性，體重55kg，喜歡攀爬、玩雪，對一切新鮮的事物都充滿好奇心，社交能力強。（來源：中國新聞網）</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBF00AN0001NOS.jpg"><br> <p> 工作人員卸下裝有大熊貓的籠舍。（來源：中國新聞網）</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBG00AN0001NOS.jpg"><br> <p> 工作人員引誘大熊貓出籠。（來源：中國新聞網）</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBH00AN0001NOS.jpg"><br> <p> 大熊貓“福鳳”在保護研究中心都神樹坪基地開始熟悉環境。（來源：中國新聞網）</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBI00AN0001NOS.jpg"><br> <p> 大熊貓“福鳳”“福伴”在在保護研究中心神樹坪基地。（來源：中國新聞網）</p><p></p> </div> </div> </div> </body>
引數：
視窗標題欄自定義按鈕樣式
屬性：
- type: (String 型別 )按鈕樣式
執行環境中內建按鈕樣式直接使用，內建樣式忽略fontSrc和text屬性。 可取值： "forward" - 前進按鈕； "back" - 後退按鈕； "share" - 分享按鈕； "favorite" - 收藏按鈕； "home" - 主頁按鈕； "menu" - 選單按鈕； "close" - 關閉按鈕； "none" - 無樣式。 預設值為無樣式（"none"），需通過text屬性設定按鈕上顯示的內容、通過fontSrc屬性設定使用的字型庫。
- color: (String 型別 )按鈕上文字顏色
可取值： "#RRGGBB"格式字串，如"#FF0000"表示繪製紅色返回鍵； "rgba(R,G,B,A)"，其中R/G/B分別代表紅色值/綠色值/藍色值，正整數型別，取值範圍為0-255，A為透明度，浮點數型別，取值範圍為0-1（0為全透明，1為不透明），如"rgba(255,0,0,0.5)"，表示紅色半透明。 預設值為視窗標題欄控制元件的標題文字顏色。
- colorPressed: (String 型別 )按下狀態按鈕文字顏色
可取值： "#RRGGBB"格式字串，如"#FF0000"表示繪製紅色返回鍵； "rgba(R,G,B,A)"，其中R/G/B分別代表紅色值/綠色值/藍色值，正整數型別，取值範圍為0-255，A為透明度，浮點數型別，取值範圍為0-1（0為全透明，1為不透明），如"rgba(255,0,0,0.5)"，表示紅色半透明。 預設值為color屬性值自動調整透明度為0.3。
- float: (String 型別 )按鈕在標題欄上的顯示位置
可取值： "right" - 在標題欄中靠右排列顯示； "left" - 在標題欄中靠左側排列顯示（在返回鍵後）。 預設值為"right"。
- fontWeight: (String 型別 )按鈕上文字的粗細
可取值： "normal" - 標準字型； "bold" - 加粗字型。 預設值為"normal"。
- fontSize: (String 型別 )按鈕上文字大小
可取值：字型高度畫素值，數字加"px"格式字串，如"22px"。 視窗標題欄為透明樣式（type="transparent"）時，預設值為"22px"； 視窗標題欄為預設樣式（type="default"）時，預設值為"27px"。
- fontSrc: (String 型別 )按鈕上文字使用的字型檔案路徑
字型檔案路徑支援以下型別： 相對路徑 - 相對於當前頁面的host位置，如"a.ttf"，注意當前頁面為網路地址則不支援； 絕對路徑 - 系統絕對路徑，如Android平臺"/sdcard/a.ttf"，此類路徑通常通過其它5+ API獲取的； 擴充套件相對路徑URL(RelativeURL) - 以"_"開頭的相對路徑，如"_www/a.ttf"； 本地路徑URL - 以“file://”開頭，後面跟隨系統絕對路徑。
- onclick: (WebviewCustomButtonCallback 型別 )按鈕點選後觸發的回撥函式
回撥函式中將返回此JSON物件。
- text: (String 型別 )按鈕上顯示的文字
推薦使用一個字元，超過一個字元可能無法正常顯示，使用字型圖示時unicode字元表示必須'\u'開頭，如"\ue123"（注意不能寫成"\e123"）。
官方參考文件：http://ask.dcloud.net.cn/article/1246
http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles