以往,为了解决列表流畅滚动等问题,采用了双webview模式等方案。HBuilder8.0.1版新增原生导航栏控件,并推荐优先使用,并建议非必要不使用双webview模式的webview title,而改用原生title。我阅读官网文档并实际做了测试,来代替原先的双webview方案,总结出来的几点经验分享一下,免得有像我一样的菜鸟困惑。
1、要使用openWindowWithTitle,第一步请先修改manifest.json文件,特别要提醒的是,要在代码视图中修改,图形界面是没有的,这一点,官网文档并未提及,只说要修改manifest.json文件。
plus->launchwebview->navigationbar
"plus": {
"launchwebview": {
"navigationbar": {
"backgroundcolor": "#f7f7f7",
"titletext": "首页",
"titlecolor": "#ff461f"
}
}
}
2、原先使用双webview方案的时候,打开新页面并没有等待的菊花图显示,实际感觉打开新页面的速度并不慢。
mui的demo中使用的openWindowWithTitle打开新页面总是显示等待的菊花图,感觉要花更多的时间来打开新页面,让我这个强迫症十分不爽。经过仔细查阅文档,加用waiting参数可以不再显示等待的菊花图。例:
mui.openWindowWithTitle({
url:href,
id:href,
styles:webview_style,
show:{
event:"loaded",
extras:extras
},
waiting:{
autoShow: false
}
},{
title:{
text:fire_data.headertitle
},
back:{
image:{ ........................................... 后面的代码略
如果有人觉得显示等待的菊花图会更人性化,此节可以忽略。
3、mui的demo里 不管是老版本,还是新增base64编码的image数据,右上角“关于”的那个图标,点击后打开about.html文件,
这个图标中间的 "i" 符号过于呆板,建议使用plus的demo中提供的image数据,“i” 为斜体展示
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK6wAACusBgosNWgAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAADkUlEQVR4nO2b63HTQBRGTxj+EyrAVBAzWwBKBYQO0kHcAU4HTgehApwKUArYwa4ApwJwBeGHNuAY2URaSfczuWcmk3jH+xid7N596ej+/h5HhxfWDXAe40LEcCFiuBAxXIgYLkQMFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEeGndgKbEGEdAkX7GwMmOry6BBVAC8xDCz/5bl8/RodztjTEWwAT40LKIG2AWQii7alMfyAuJMY6BGfC+oyJvgamqGGkhMcYZcNFT8VchhElPZbdGUkiM8Zhq7N8VH7piCRRK8UVulpWGqJL+ZZDqWKQ6JZDqIalnLIA3GcUs0+8mQmV6iloPKWkv4zPwOoQwDiGMgVNg/cS8J6luc2R6SGYAvw0hFDVlzmk2TTYP9BI9JK0xcmZTsx3pq4blXFjHEwkhwLSncs9a5NkldxDMh6zUO75mFvMoKKfJwTXtV/WnVgtHhb2sLsbsE2AVY1ykz7mr+glGQd60h6T/5B9mDdjP2xDCauhKrWNImzF+KAqLSq2FFMb176OwqNRaSFdTzDvgkmqYOaJaFOZiMv21Duq5+1VrYBJCuN5MDCGUMcbMogfZS/sL6x6SwyUw2pYBvycLB8khCllTrROmwPGOh18M2qIOOUQh58AorTm+Uz/WF0M2qEusY0gbvmx+2LGiLgZpSQ8cYg/Z5HY7IQ1hJgG5C6yFLP/9lb0satKKzDIfyG1bK6yF1D3QJpQ1aV2t/nPb1gprIWUP+YvMMveV3TuHLGS5fQaebjXmnMdvMu+onEaYCkm7qTcts5c1aaONv6+oztnbcGN14cG6h0D7E7qyJm1F2tOiOoVsux9ldmpofmIIEGMsaX6otPO8Ip2Lz2k3fNVemBgKlYXhBPjWJEOdjLQGmQCfMtoyzcibjUQPgVbXgD6GEOYp7zHVlsqEvKBufg1IRghA2p966ip7zZ+1Qhc345fpgp0pCkF9k4Knr5BfUYnoQsYdIvtfUkLSVPOc6gENxRI4U7jXC2JD1gPP+XUESSEPPMcXdqSGrG3SAzulZps9g1vgnaIMEO8hm/hLn6Kk+HJGs9eiS4tbiG04OCH/O9Ix5DniQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEcCFiuBAxfgHyQw1G9FJgWwAAAABJRU5ErkJggg=="
3 个评论
要回复文章请先登录或注册
wayhbbeed
小资电脑 (作者)
shwanYu