집 > 기사 > 위챗 애플릿 > 미니 프로그램 페이지의 내용을 편집하는 방법은 무엇입니까?

미니 프로그램 페이지의 내용을 편집하는 방법은 무엇입니까?

coldplay.xixi원래의: 2020-07-22 11:21:078435검색

미니 프로그램 페이지의 내용을 편집하는 방법: 먼저 편집 영역에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 새 디렉터리를 선택하여 폴더를 만든 다음 폴더를 마우스 오른쪽 버튼으로 클릭하고 새 구성 요소를 선택한 다음 마지막으로 파일 이름을 입력합니다. [app.json] 파일을 열고 네비게이션 바를 편집하세요.

미니 프로그램 페이지의 내용을 편집하는 방법:

1 우선 홈페이지가 얼마나 큰 페이지가 될지 고려해야 합니다. 여기에서 제 작은 데모를 사용하세요. 샘플을 참고해보겠습니다. 제 홈페이지는 블록이 3개이므로 프로젝트 성공 후 인덱스 인터페이스를 포함하여 2개의 페이지를 더 만들어야 합니다. 인터페이스는 총 3개입니다

(PS(작업 프로세스): 마우스 오른쪽 버튼 클릭) 페이지를 클릭하고 새 디렉터리를 선택합니다. 폴더를 만든 다음 폴더를 마우스 오른쪽 버튼으로 클릭하고 새 구성 요소를 선택합니다. 물론 여기에는 새 구성 요소에 4개의 파일(js, json, wxml 및 wxss)이 있습니다. 이 직접 생성 외에도 파일을 하나씩 수동으로 생성할 수도 있지만 js 파일에 const app = getApp() 및 page({})가 있습니다. 그렇지 않으면 오류가 보고되거나 app.js에 일부 메소드가 있습니다. 호출할 수 없습니다)

2. 이제 홈페이지를 편집할 차례입니다. 여기 내 홈페이지에는 하단 탐색 표시줄이 있으므로 아래를 살펴보세요.

app.json 파일을 엽니다. (PS: 초보자는 권장합니다. 나처럼 여전히 읽고 있는 미니 프로그램의 공식 코드 구조를 소개하는 것이 더 좋습니다):

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"
      }
    ]
  }
}

미니 프로그램 페이지의 내용을 편집하는 방법은 무엇입니까?

관련 기사