实现效果

image.png

代码

配置

  1. "pages": [
  2.         {
  3.             "path": "pages/survey/index",
  4.             "style": {
  5.                 "navigationBarTitleText": "健康自测",
  6.                 "h5": {
  7.                     "titleNView": {
  8.                         "buttons": [ //原生标题栏按钮配置,
  9.                             {
  10.                                 "type": "back", 
  11.                 //点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
  12.                                 "float": "left"
  13.                             }
  14.                         ]
  15.                     }
  16.                 }
  17.             }
  18.         }
  19.   ]

js

  1.     onNavigationBarButtonTap(e) {
  2.       console.log(e)
  3.       try {
  4.         console.log("调用app方法");
  5.         console.log("平台", window.navigator.platform);
  6.         if (XxzhAppJs) {
  7.           XxzhAppJs.backToApp();
  8.         } else {
  9.           var params = { url: 'Call APP method "CallApp()"' };
  10.           window.webkit.messageHandlers.CallApp.postMessage(params);
  11.         }
  12.       } catch {}
  13.     },

打印对象

  1. {type: "back", float: "left", color: "#000", fontSize: "27px", fontWeight: "normal", …}
  4. color: "#000"
  5. float: "left"
  6. fontSize: "27px"
  7. fontWeight: "normal"
  8. index: 0
  9. type: "back"
  10. __proto__: Object

api文档

uni-app中使用webview加载网页，支持后退和关闭 - DCloud问答
https://ask.dcloud.net.cn/article/37714

NavBar导航栏，滑动透明，颜色渐变，支持V3、nvue - DCloud 插件市场
https://ext.dcloud.net.cn/plugin?id=813

pages.json - uni-app官网
https://uniapp.dcloud.net.cn/collocation/pages?id=h5

我的思考

添加对工作、生活的思考