Día 1 de desarrollo de proyectos del miniprograma WeChat

Si nunca ha estado expuesto a él, mire el video para aprender:

Tutorial de front-end de Qianfeng Education sobre el desarrollo y producción de miniprogramas WeChat. Es fácil comenzar sin conocimientos básicos y jugar con los miniprogramas de WeChat_bilibili_bilibili Tutorial de front-end de Qianfeng Education sobre el desarrollo y producción de miniprogramas de WeChat Es fácil comenzar sin conocimientos básicos y jugar con los miniprogramas de WeChat. Un total de 56 artículos Vídeos, que incluyen: Introducción a las preguntas frecuentes, 000-Jianghuren, 001-Conceptos básicos de los miniprogramas-Inicio, etc. Más videos interesantes del maestro UP, siga la cuenta UP. https://www.bilibili.com/video/BV1yf4y1E7MH Hoy acabo de ver este video y construí el proyecto.

Aprende P13

El maestro dijo que el componente más utilizado es TDesign y me pidió que lo aprendiera.

TDesign (tencent.com) https://tdesign.tencent.com/miniprogram/components/input

Entonces eché un vistazo a la documentación de desarrollo de TDesign.

1. Instalación y descarga

 Las variables de entorno configuradas automáticamente son las siguientes:

 

 

 La página app.json es la siguiente:

{
  "pages": [
    "pages/login/index",
    "pages/dashboard/index",
    "pages/setting/index",
    "pages/project/index/index",
    "pages/project/new/index",
    "pages/accessory/index",
    "pages/user/index",
    "pages/user/edit",
    "pages/user/new",
    "pages/accessory-request/index",
    "pages/contract/index",
    "pages/customer/index",
    "pages/design/index",
    "pages/finance/index",
    "pages/maintenance/index",
    "pages/accessory/new",
    "pages/accessory/edit",
    "pages/accessory/show"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "华商",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#8A8A8A",
    "selectedColor": "#28A1F9",
    "list": [
      {
        "pagePath": "pages/dashboard/index",
        "text": "工作台",
        "selectedIconPath": "/assets/selected-dashboard.png",
        "iconPath": "/assets/dashboard.png"
      },
      {
        "pagePath": "pages/project/index/index",
        "text": "项目",
        "selectedIconPath": "/assets/selected-project.png",
        "iconPath": "/assets/project.png"
      },
      {
        "pagePath": "pages/setting/index",
        "text": "设置",
        "selectedIconPath": "/assets/selected-setting.png",
        "iconPath": "/assets/setting.png"
      }
    ]
  },
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button",
    "t-input": "tdesign-miniprogram/input/input",
    "t-empty": "tdesign-miniprogram/empty/empty",
    "t-loading": "tdesign-miniprogram/loading/loading",
    "t-message": "tdesign-miniprogram/message/message",
    "t-toast": "tdesign-miniprogram/toast/toast",
    "t-divider": "tdesign-miniprogram/divider/divider",
    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-fab": "tdesign-miniprogram/fab/fab",
    "t-dialog": "tdesign-miniprogram/dialog/dialog",
    "t-image": "tdesign-miniprogram/image/image",
    "t-search": "tdesign-miniprogram/search/search",
    "t-sticky": "tdesign-miniprogram/sticky/sticky",
    "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
    "data-end": "/components/data-end/index",
    "data-empty": "/components/data-empty/index",
    "list-rack": "/components/list-rack/index"
  },
  "onReachBottomDistance": true,
  "sitemapLocation": "sitemap.json"
}

2. componente de entrada

TDesign aprende const{trigger} = e.detail_Blog-CSDN de Suxin Ruyueya const{trigger} = e.detail significa agregar el atributo e.detail. const{ trigger } define un activador con nombre constante. El atributo de activador incluido se asigna al activador que se acaba de definir. const{} es una constante definida. https://blog.csdn.net/m0_47010003/article/details/132759713