uniapp設定メタが有効にならない問題の解決方法

Uniapp は、Vue.js に基づいたクロスプラットフォーム アプリケーション開発フレームワークです。開発が簡単で、使いやすいです。iOS、Android、H5 ページをすばやく構築でき、モバイル アプリケーション開発の重要なツールの 1 つとなっています。今日。ただし、クロスプラットフォーム アプリケーションの開発にはいくつかの問題も伴います。たとえば、この記事では、uniapp ページ構成メタが有効にならないという問題を解決します。読者の参考になれば幸いです。

問題の説明

最近、一部の開発者は、uniapp を使用して構築された H5 ページでは、ブラウザーで Web サイトのソース コードを表示すると、設定されたメタ タグが有効にならないと報告しています。 、対応するメタが見つかりません。ラベル。ただし、開発ツールのプレビューや携帯電話の閲覧ページでは正常に表示されます。

問題解決

1. メタ コンテンツが正しいかどうかを確認する

まず、メタ タグのコンテンツが正しいことを確認し、設定する必要があります。 uniapp の page.json 内:

"meta": {
  "viewport": "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
  "keywords": "uniapp, meta, 问题, 解决",
  "description": "uniapp 配置 meta 不生效的解决方法",
  "apple-mobile-web-app-capable": "yes",
  "apple-mobile-web-app-status-bar-style": "black",
  "format-detection": "telephone=no,email=no,address=no"
}

このうち、ビューポート、キーワード、説明は必須のメタ タグであり、その他のメタ タグを追加してパーソナライズされた構成を行うことができます。

2. index.html にメタ タグを追加します。

page.json でメタを構成した後、対応するタグがページのソース コードに存在しない場合は、それを追加する必要があります。 uniapp プロジェクト内で、index.html にメタ タグを手動で追加します。たとえば、head タグにビューポートのメタ タグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

他のメタ タグを追加する必要がある場合は、手順 1 の設定を参照してください。

3. uniapp パッケージ構成の確認

最初の 2 つの手順で問題を解決できない場合は、主に次の 2 つの側面を含む uniapp パッケージ構成を確認する必要があります。 :

• パッケージ化パスがuniappのmanifest.jsonで構成されているかどうか

manifest.jsonはuniappによって構築された構成ファイルであり、パッケージ化パスを設定する必要があります。 。具体的には、manifest.json の weex > appboard > src 属性または h5 > router >ages 属性にパッケージ化するページのパスを追加する必要があります。

// weex > appboard > src 示例
"weex": {
  "appName": "UniApp",
  "appBoard": "/index.vue",
  "pages": [
    "pages/tabbar/index/index",
    "pages/tabbar/quick-work/quick-work",
    "pages/tabbar/find/find",
    "pages/tabbar/mine/mine"
  ]
}

// h5 > router > pages 示例
"h5": {
  "custom": {
    "titleNView": true,
    "scrollIndicator": "none"
  },
  "router": {
    "mode": "hash",
    "pages": [
      {
        "path": "/",
        "style": {
          "navigationBarTitleText": "首页"
        },
        "query": "",
        "meta": {
          "viewport": "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
          "keywords": "uniapp, h5, 打包配置, manifest.json",
          "description": "uniapp 配置 meta 不生效的解决方法",
          "apple-mobile-web-app-capable": "yes",
          "apple-mobile-web-app-status-bar-style": "black",
          "format-detection": "telephone=no,email=no,address=no"
        }
      }
    ]
  }
}

• uniapp の vue.config.js でパッケージ化パスが設定されているかどうか

manifest.json でパッケージ化パスを設定するだけでなく、パッケージ化パスを設定することもできますuniapp プロジェクトのルート ディレクトリの vue.config.js ファイルの設定、主に OutputDir 属性とページ属性:

module.exports = {
  outputDir: 'dist/h5',
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  }
}

上記はサンプル コードの一部です。詳細については、公式を参照してください。ドキュメント作成や開発プロセス中のデバッグ。

結論

uniapp でメタ タグを設定した後、対応するタグがページのソース コードに存在しない場合は、index.html に手動でタグを追加する必要があります。それでも存在しない場合は、index.html に手動で追加する必要があります。パッケージ化後に有効になるには、manifest.json と vue.config.js の設定が正しいかどうかを確認する必要があります。この記事があなたの問題を解決することを願っています。また、uniapp がますます完璧になり、より安定して使いやすい開発ツールになることを願っています。

以上がuniapp設定メタが有効にならない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。