ホームページ >WeChat アプレット >ミニプログラム開発 >ミニプログラムページのコンテンツを編集するにはどうすればよいですか?

ミニプログラムページのコンテンツを編集するにはどうすればよいですか?

coldplay.xixi
coldplay.xixiオリジナル
2020-07-22 11:21:078489ブラウズ

ミニ プログラム ページのコンテンツを編集する方法: まず、編集領域でページを右クリックし、[新しいディレクトリ] を選択してフォルダーを作成し、次にフォルダーを右クリックし、[新しいコンポーネント] を選択して、ファイル名; 最後に [app. json] ファイルを開いてナビゲーション バーを編集します。

ミニプログラムページのコンテンツを編集するにはどうすればよいですか?

ミニプログラムページのコンテンツ編集方法:

1. まず、ホームページに大きなページが何ページあるかを考慮する必要があります。ここでは、サンプルの参考として私の小さなデモを使用してみましょう。私のホームページは 3 つの大きなページに分かれているので、プロジェクト後のページも含めて、さらに 2 ページを作成しますインデックス インターフェイスがあり、合計 3 つのインターフェイスがあります

(PS (操作プロセス): ページを右クリックして [新しいディレクトリ] を選択してフォルダーを作成し、フォルダーを右クリックして [新規] を選択しますコンポーネントを選択し、ファイル名を入力します。もちろん、ここでの新しいコンポーネントには、js、json、wxml、wxss の 4 つのファイルがあります。この直接作成に加えて、ファイルを 1 つずつ手動で作成することもできます。ただし、js ファイルには const app = getApp(); と page({}) があります。そうでない場合は、エラーが報告されるか、app.js の一部のメソッドを呼び出すことができません。)

2.この時点で 、ホームページを編集します。ここにいます。ホームページには下部にナビゲーション バーがあるので、下を見てください。

app.json ファイルを開きます (追記:私のような初心者は、ミニ プログラムのコード構造についての公式の紹介を読む必要があります。):

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-配置

それを開いたら、ナビゲーション バーの編集を開始します。コードを見てください:

(注:使用する場合は、以下のコメントをすべて削除してください。app.json では使用できません。コメントがあります。コメントがないとエラーが報告されます。私のコメントは、皆様に理解していただくためのものです。エラーの理由はまったく予想外です。見つけるまでに何度か試みました。)

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/asset/asset",
    "pages/personal/personal"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",    "navigationStyle": "custom"      // 自定义头部导航时添加
  },
  "sitemapLocation": "sitemap.json",
  "tabBar": {  //这里的tabBar就是导航栏的编辑了
    "color": "red",    //tab 上的文字默认颜色
    "selectedColor": "#1469bc",  //tab 上的文字被选中时的颜色
    "backgroundColor": "#fff",  //背景颜色(背景颜色的值用#的写法来写即16进制,普通rgb、rgba写法不会生效,)
    "positon": "bottom",      //导航栏放在的位置,可以不写但默认会显示在底部,我这里是方便大家了解。放在上遍就改成top,至于左右么,我就没试过了,就交给各位大哥大了。
    "list": [
      {
        "pagePath": "pages/index/index",      //页面路径
        "text": "首页",                 //导航栏显示的文字
        "iconPath": "images/home1.png",       //默认展示的图片
        "selectedIconPath": "images/home2.png"   //被选中时展示的图片(我这里是为了有一个颜色差)
      },
      {
        "pagePath": "pages/asset/asset",
        "text": "资产",
        "iconPath": "images/asset1.png",
        "selectedIconPath": "images/asset2.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "我的",
        "iconPath": "images/my1.png",
        "selectedIconPath": "images/my2.png"
      }
    ]
  }
}

関連学習の推奨事項 :

WeChat ミニ プログラム開発チュートリアル

以上がミニプログラムページのコンテンツを編集するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。