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

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

coldplay.xixi

リリース： 2020-07-22 11:21:07

オリジナル

8482 人が閲覧しました

ミニプログラムページのコンテンツを編集する方法: まず、編集領域でページを右クリックし、[新しいディレクトリ] を選択してフォルダーを作成し、次にフォルダーを右クリックし、[新しいコンポーネント] を選択して、ファイル名; 最後に [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"
      }
    ]
  }
}

ログイン後にコピー