Uniapp设置title

我会带着你远行 2021-08-27 15:09 633阅读 0赞

> uniapp加载webview时导航title默认抓取页面title值，单页面不能设置独立title的问题；结合uni.postMessage以及plusMessage事件监听实现，如有更好的方案欢迎讨论。

1.pages.json配置

{
        "path": "pages/test/index/index",
    
        "style": {
    
            "navigationBarTitleText": "测试页面"
      }

2.动态设置

uni.setNavigationBarTitle({
      title: '测试首页'
    })

3.webview页面

*  有pages.json先显示
 *  被webview页面title覆盖  
    webview如果是单页面应用只在首次加载后显示index.html的<title/>,想要对应页面差异化显示对应title可以结合**uni.postMessage**实现。  
    webview页面需要引用<script src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>资源。在进入路由之前结合路由设置的title对用显示，如下：
 *  webview页面

router.beforeEach((to, from, next) => {
        if (to.meta.title) {
          uni.postMessage({
             data: {
               action: to.meta.title
             }
          });
        }
        next();
      });

*  uniapp页面 监听plusMessage事件

// #ifdef APP-PLUS
      plus.globalEvent.addEventListener('plusMessage', function(msg){  
        if(msg.data.args.data.name == 'postMessage'){
          uni.setNavigationBarTitle({ title: msg.data.args.data.arg.action})
        }  
      });
    // #endif

发表评论取消回复

表情：

评论列表（有 0 条评论，633人围观）

还没有评论，来说两句吧...

相关阅读

相关 nuxt.js 设置meta标签，动态设置title

全局设置meta在nuxt.config.js中在nuxt.config.js配置文件中,有个head属性可以设置全局的title,content和keywords等属性

妖狐艹你老母/ 2023年01月23日 14:49/ 0 赞/ 523 阅读

相关 uniapp关闭默认title

uniapp关闭默认title > 在pages.json 的 pages中, 找到对应的页面的style, 输入下边代码 "style" : {

- 日理万妓/ 2022年11月24日 11:21/ 0 赞/ 229 阅读

相关 Android Activity的title设置

1、改变标题内容：public void setTitle (CharSequence title) 2、隐藏标题：requestWindow

￡神魔★判官ぃ/ 2022年06月13日 13:44/ 0 赞/ 204 阅读

相关 vue设置title

路由配置页router/index.js routes: [ { / （首页）默认路由地址 / path: '/

àì夳堔傛蜴生んèń/ 2022年06月01日 02:06/ 0 赞/ 240 阅读

相关 Vue设置浏览器title-icon

vue项目如何设置浏览器title-icon呢？步骤如下：（1）、把icon图标存放在static目录下 ![70][] （2）、在index.html页面添加

雨点打透心脏的1/2处/ 2022年05月21日 23:15/ 0 赞/ 256 阅读

相关设置title网页图标

设置网页title图标 1.准备.ico的图片如果没有下面网站可以在线制作 [http://www.faviconico.org/][http_www.faviconi

迷南。/ 2022年05月18日 09:38/ 0 赞/ 263 阅读

相关 vue设置title

[https://blog.csdn.net/qq\_24147051/article/details/76997838][https_blog.csdn.net_qq_241

末蓝、/ 2021年11月14日 11:18/ 0 赞/ 319 阅读

相关 uni-app页面内设置title

JS部分代码 onLoad(e) { var that = this; uni.setNavigationBarTitle({

水深无声/ 2021年08月30日 22:14/ 0 赞/ 690 阅读

相关 Uniapp设置title

> uniapp加载webview时导航title默认抓取页面title值，单页面不能设置独立title的问题；结合uni.postMessage以及plusMessage事件

我会带着你远行/ 2021年08月27日 15:09/ 0 赞/ 634 阅读

相关 vue动态设置title,使用 vue-wechat-title

1.安装依赖 npm install vue-wechat-title --save 2.引用在main.js import VueWechatTitle

梦里梦外;/ 2021年08月26日 20:32/ 0 赞/ 621 阅读