uniapp app頭部漸變

在pages.json中配置：

{
    "pages": [ //pages數組中第一項表示應用啟動頁,
         {
            "path": "pages/login/login",
            "style": {
                "navigationBarTitleText": "登錄",
                "navigationBarBackgroundColor": "#ffffff",
                "app-plus": {
                    "titleNView": false,
                    "type": "transparent" //透明漸變導航欄 App-nvue 2.4.4+ 支持
                }
            }
        }, 
        // #ifdef APP-PLUS || MP-WEIXIN
        {
            "path": "pages/station/detail",
            "style": {
                "navigationBarTitleText": "電站詳情",
                "app-plus": {
                    "titleNView": {
                        "backgroundImage": "linear-gradient(to top, #abc837, #4fa23c)"
                    }
                },
                "enablePullDownRefresh": true, //設置為true表示當前頁面開啟下拉刷新
                "backgroundTextStyle": "dark" //下拉 loading 的樣式，僅支持 dark/light
                // ,
                // "app-plus": {
                //     "titleNView": {
                //         "titleText": "",
                //         "tags": [{
                //             "tag": "img",
                //             "src": "/static/img/sta/bja.png",
                //             "position": {
                //                 "right": "10px",
                //                 "top": "auto",
                //                 "width": "26px",
                //                 "height": "26px"
                //             }
                //         }],
                //         "buttons": [ //原生標題欄按鈕配置,
                //             {
                //                 "type": "none",
                //                 "text": "",
                //                 "float": "right"
                //             }
                //         ]
                //     }
                // }
            }
        },
        // #endif        
    ],
    "tabBar": {
        "color": "#7a7e83",
        "selectedColor": "#42b727",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "pages/main/main",
                "text": "首頁",
                "iconPath": "static/img/icon-index_n.png",
                "selectedIconPath": "static/img/icon-index_s.png"
            },
            {
                "pagePath": "pages/station/station",
                "text": "電站",
                "iconPath": "static/img/icon-dz_n.png",
                "selectedIconPath": "static/img/icon-dz_s.png"
            },
            {
                "pagePath": "pages/alarm/alarm",
                "text": "故障",
                "iconPath": "static/img/icon-gj_n.png",
                "selectedIconPath": "static/img/icon-gj_s.png"
            },
            {
                "pagePath": "pages/user-center/user-center",
                "text": "個人",
                "iconPath": "static/img/icon-ren_n.png",
                "selectedIconPath": "static/img/icon-ren_s.png"
            }
        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#4fa23c",
        "backgroundColor": "#fbf9fe"
    }
}

特別注意：需要用

// #ifdef APP-PLUS || MP-WEIXIN

// #endif 
包裹在路由頭部和尾部生成app才有效果
在"app-plus":對象中添加屬性設置：

"titleNView": {
   "backgroundImage": "linear-gradient(to top, #abc837, #4fa23c)"
}

展示一下實際效果：