quasar v@2.16 ssr Meta插件 使用 title无法reactive的bug

Posted 2023-05-18 zjhgx

为了使自己的网站SEO更友好，在项目里启用了quasar的Meta插件。但实际使用下来发现文档里的描述不正确。为了动态的更新title和meta信息，文档https://quasar.dev/quasar-plugins/meta 里介绍

Reactive

In the section above, you noticed all of the meta props are “static”. But they can be dynamic (reactive) instead, should you wish. This is how you can manage them just as with a Vue computed property:

// some .vue file
import  useMeta  from \'quasar\'
import  ref  from \'vue\'

export default 
  setup () 
    const title = ref(\'Some title\') // we define the "title" prop

    // NOTICE the parameter here is a function
    // Under the hood, it is converted to a Vue computed prop for reactivity
    useMeta(() => 
      return 
        // whenever "title" from above changes, your meta will automatically update
        title: title.value
      
    )

    function setAnotherTitle () 
      title.value = \'Another title\' // will automatically trigger a Meta update due to the binding
    

    return 
      setAnotherTitle
    
  


但我使用下来，meta的tag信息是动态改变了（ssr模式返回的response里html的meta信息已经改成了相应detail页面的商品信息），但title信息却没有改变（ssr模式返回的response里的html的title没有改变成对应detai页面的商品信息）
代码如下：

  setup() 
    console.log(\'DetailPage setup\');
    const title = ref(
      \'好价党 各大电商今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息\'
    );
    const meta = reactive(
      description: 
        name: \'description\',
        content:
          \'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，手慢无，秒杀，京东低价，优惠信息\',
      ,
      keywords: 
        name: \'keywords\',
        content:
          \'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息\',
      ,
      ogtype: 
        property: \'og:type\',
        content: \'product\',
      ,
      ogurl: 
        property: \'og:url\',
        content: \'\',
      ,
      ogtitle: 
        property: \'og:title\',
        content:
          \'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息\',
      ,
      ogdescription: 
        property: \'og:description\',
        content:
          \'汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息\',
      ,
      ogimage: 
        property: \'og:image\',
        content: \'https://www.hjdang.com/hjd.png\',
      ,
      weibocreate: 
        name: \'weibo:webpage:create_at\',
        content: \'\',
      ,
      weiboupdate: 
        name: \'weibo:webpage:update_at\',
        content: \'\',
      ,
    );

    useMeta(() => 
      return 
        // whenever "title" from above changes, your meta will automatically update
        title: title.value,
        meta: meta,
      ;
    );

    function setAnotherTitle(value) 
      title.value = value; // will automatically trigger a Meta update due to the binding
    

    return 
      setAnotherTitle,
      meta,
    ;
  ,

  created() 
    console.log(\'Detail page created\');

    this.detail = this._detail;

    this.detailParts = this._detailParts;

    this.bigImages = this._bigImages;

    this.couponInfo = this._couponInfo;
    this.setAnotherTitle(this._detail.title);

    this.meta.description.content =
    this._detail.title + this.detail.emphsis + this.detail.detailBrief;
    let keywords = this.detail.mall;
    if (this._categoryInfo) 
      this._categoryInfo.slice(1).forEach((a) => (keywords += \',\' + a));
    
    this.meta.keywords.content = keywords;
    this.meta.ogtitle.content = this._detail.title;
    this.meta.ogurl.content = \'https://www.hjdang.com/item/detail/\' + this.$route.params.urlCode;
    this.meta.ogdescription.content = this.detail.emphsis + this.detail.detailBrief;
    this.meta.ogimage.content = this.detail.mainImageUrl;
    this.meta.weibocreate.content = new Date();
    this.meta.weiboupdate.content = new Date();

  ,

但从服务器返回的html里title并没有被改变，但meta.description是被改变了，虽然最终页面上通过Inspect看到的title也是动态改变了，但这个是在前端runtime改变的。为了让搜索引擎看到最终的信息，需要在返回的repsonse里就已经改变

title应该被改成商品的title：PEAK 匹克 。。。才对，但还是初始值
经过我的一番调查，在quasar的guihub上发现了两个帖子，
https://github.com/quasarframework/quasar/discussions/12178#discussioncomment-2046672
https://github.com/quasarframework/quasar/discussions/12388
他的问题和我相反，是title已经动态改变，但meta信息没变。注意到他的useMeta里返回的是title，不是title.value,而meta返回的是myDescription.value，和我的正好相反

import  useMeta  from "quasar";
import  ref  from "vue";
export default 
    setup() 
        const title = ref("First page"); 
        const myDescription = ref(
            name: "description",
            content: "First page quasar app",
        );
        useMeta(() => 
            return 
                title: title,
                titleTemplate: (title) => `$title.value`,
                meta: 
                    description: myDescription.value,
                ,
            ;
        );
        const setMetaContent = () => 
            title.value = "Title Changed";
            myDescription.value = 
                name: "description",
                content: "Hey I am changed",
            ;
        
        return 
            setMetaContent,
        ;
    ,
    serverPrefetch() 
        this.setMetaContent();
    ,
    mounted() 
        this.setMetaContent();
    ,
;

这是useMega里返回 

            return 
                title: title,
                titleTemplate: (title) => `$title.value`,
            ;

 可以，但返回

      return 
        // whenever "title" from above changes, your meta will automatically update
        title: title.value,
      ;

就不可以，也就是不能加 .value,果然改了之后就好了

  setup() 
    console.log(\'DetailPage setup\');
    const title = ref(
      \'好价党 各大电商今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息\'
    );
    const meta = reactive(
      description: 
        name: \'description\',
        content:
          \'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，手慢无，秒杀，京东低价，优惠信息\',
      ,
      keywords: 
        name: \'keywords\',
        content:
          \'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息\',
      ,
      ogtype: 
        property: \'og:type\',
        content: \'product\',
      ,
      ogurl: 
        property: \'og:url\',
        content: \'\',
      ,
      ogtitle: 
        property: \'og:title\',
        content:
          \'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息\',
      ,
      ogdescription: 
        property: \'og:description\',
        content:
          \'汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息\',
      ,
      ogimage: 
        property: \'og:image\',
        content: \'https://www.hjdang.com/hjd.png\',
      ,
      weibocreate: 
        name: \'weibo:webpage:create_at\',
        content: \'\',
      ,
      weiboupdate: 
        name: \'weibo:webpage:update_at\',
        content: \'\',
      ,
    );


    useMeta(() => 
      return 
        // whenever "title" from above changes, your meta will automatically update
        title: title,
        titleTemplate: (title) => `$title.value`,
        meta: meta,
      ;
    );

    function setAnotherTitle(value) 
      title.value = value; // will automatically trigger a Meta update due to the binding
    

    // setAnotherTitle(\'sdsdssds\');
    // console.log(\'title is\' + title.value);

    return 
      setAnotherTitle,
      meta,
    ;
  ,

这样就好了，可能是他们文档写的有问题。

喜欢艺术的码农

Quasar Cordova 谷歌地图插件

【中文标题】Quasar Cordova 谷歌地图插件

【英文标题】：Quasar Cordova Google Maps Plugin

【发布时间】：2019-12-18 02:02:00

【问题描述】：

我一直在尝试使用来自https://github.com/mapsplugin/cordova-plugin-googlemaps 的科尔多瓦谷歌地图插件，但还没有让它在我的安卓上顺利运行。

我找到了代码

我已经为谷歌地图尝试了其他几个 github 存储库，但仍然没有运气。

<q-page class="q-pa-xl">
    <h1>Hello, World!</h1>
    <div id="map_canvas">
      <button id="button">Click me!</button>
    </div>

</q-page>
</template>

<script>
export default 
  name: 'Map',
  created () 
    // Vuex get the map lat/lng
    document.addEventListener('deviceready', () => 
    var div = document.getElementById('map_canvas')

    // Create a Google Maps native view under the map_canvas div.
    //var map = plugin.google.maps.Map.getMap(div)
    var map = window.plugin.google.maps.Map.getMap(div)

    // If you click the button, do something...
    var button = document.getElementById('button')
    button.addEventListener('click', function () 
      // Move to the position with animation
      map.animateCamera(
        target: lat: 37.422359, lng: -122.084344,
        zoom: 17,
        tilt: 60,
        bearing: 140,
        duration: 5000
      )

      // Add a maker
      var marker = map.addMarker(
        position: lat: 37.422359, lng: -122.084344,
        title: 'Welecome to \n' +
                'Cordova GoogleMaps plugin for iOS and Android',
        snippet: 'This plugin is awesome!',
        animation: window.plugin.google.maps.Animation.BOUNCE
      )

      // Show the info window
      marker.showInfoWindow()
    )
    , false)
  

</script>

我也在 src-cordova 的 config.xml 文件中添加了<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="my api key" />。我试图在我的手机上测试该应用程序，但它卡在 Apache Cordova 设备已准备好闪烁。

【问题讨论】：

您遇到了什么错误，您的地图是什么样的？如果在浏览器平台上运行地图会加载吗？还要仔细检查您是否添加了有效的 API 密钥并为您的项目启用了 Maps API 和计费。

【参考方案1】：

首先，请确保您遵循了确切的说明并使用了插件latest documentation 中的完整代码。仔细检查您是否添加了有效的 API 密钥，并且您的项目中启用了 JS API。

我自己安装了这个插件并按照这些说明进行操作，当我在 Android Studio 中运行地图时，遇到了同样的问题，即地图未初始化并卡在“Cordova 设备已准备就绪”视图中。

所以我尝试使用文档中指示的命令cordova run android 并得到以下错误：

FAILURE：构建失败并出现异常。

其中：构建文件 '\platforms\android\app\build.gradle' 行：20

出了什么问题：评估项目 ':app' 时出现问题。

未能应用插件 [id 'com.android.application'] 支持的最低 Gradle 版本为 5.1.1。当前版本是 4.10.3。如果使用 gradle 包装器，请尝试将 \gradle\wrapper\gradle-wrapper.properties 中的 distributionUrl 编辑为 gradle-5.1.1-all.zip

所以我就这么做了；用 5.1.1 替换了 gradle 版本 4.10.3。

gradle.wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-5.1.1-all.zip

然后我重新运行应用程序并显示地图。希望这对你也有用。