小资电脑
小资电脑
  • 发布:2017-04-05 23:55
  • 更新:2017-04-05 23:55
  • 阅读:5623

[经验分享] mui.openWindowWithTitle 使用原生导航栏控件的一点体会

分类:MUI

以往,为了解决列表流畅滚动等问题,采用了双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 关注 分享
超人爷爷 shwanYu 鲸鱼风风

要回复文章请先登录注册

wayhbbeed

wayhbbeed

官方标注的这个方法以及废除,但是新方法里面有返回按钮添加的方法,请问怎么弄?
说明:老版本的 mui.openWindowWithTitle 已经废除。
2018-02-26 16:22
小资电脑

小资电脑 (作者)

更正一下,第三小节,demo里面不是about.html,打开的是info.html,我自己改的about.html 习惯了
2017-04-06 10:31
shwanYu

shwanYu

感谢
2017-04-06 09:31