Tutorial detallado sobre el mini programa WeChat: colección recomendada

El mini programa WeChat es una aplicación basada en la plataforma WeChat, que puede ejecutarse en el cliente WeChat y proporcionar funciones y experiencias similares a las aplicaciones nativas. A continuación se muestra un tutorial simple y detallado sobre el subprograma WeChat para ayudarlo a comprender cómo desarrollar un subprograma WeChat.

1. Preparación:

   • Descargue e instale las herramientas para desarrolladores de WeChat .
   • Registre una cuenta de desarrollador de WeChat.

2. Cree un nuevo proyecto de subprograma:

   • Abra las herramientas de desarrollo de WeChat y haga clic en el botón "Nuevo mini programa" en la esquina superior izquierda.
   • Ingrese el nombre del subprograma, AppID y ruta del proyecto, y haga clic en el botón "Aceptar".
   • Seleccione una plantilla de mini programa y haga clic en el botón "Siguiente".
   • Configure el AppID y el directorio del proyecto del mini programa y haga clic en el botón "Finalizar".

3. Página del mini programa de desarrollo:

   • En WeChat Developer Tools, puede ver una estructura de proyecto que contiene los archivos y carpetas del mini programa.
   • pagesCree una nueva carpeta debajo de la carpeta para almacenar los archivos relacionados de la nueva página .
   • index.jsCree archivos , index.wxmly en la nueva carpeta index.wxsspara escribir la lógica, la estructura y el estilo de la página respectivamente.
   • Registre la nueva página en app.jsonel archivo, agregando la ruta de la página a pagesla matriz.

4. Escribir lógica de página:

   • En index.jsel archivo, puede usar JavaScript para escribir el código lógico de la página.
   • Puede utilizar Page()funciones para definir un objeto de página y los métodos del objeto servirán como funciones de manejo de eventos para la página.
   • Puede utilizar setData()métodos para actualizar los datos de la página para representarla dinámicamente.

5. Escribir estructura de página:

   • En index.wxmlel archivo, puede usar WXML para escribir el código estructural de la página.
   • Puede utilizar { {}}la sintaxis para insertar datos dinámicos y utilizar comandos como wx:ify wx:forpara controlar la visualización y el bucle de elementos.

6. Escribir estilo de página:

   • En index.wxssel archivo, puede usar WXSS para escribir el código de estilo de la página.
   • A los elementos de la página se les puede aplicar estilo mediante selectores y atributos de estilo.

7. Subprograma de vista previa y depuración:

   • En las herramientas de desarrollo de WeChat, haga clic en el botón "Vista previa" en la esquina superior izquierda para obtener una vista previa del efecto del mini programa en el simulador.
   • Puede utilizar las herramientas de depuración y la consola proporcionadas por las herramientas de desarrollador para depurar el código del subprograma.

8. Publicar mini programa:

   • En las herramientas de desarrollo de WeChat, haga clic en el botón "Cargar" en la esquina superior izquierda para cargar el mini programa en la plataforma abierta de WeChat.
   • Complete el proceso de revisión y lanzamiento de miniprogramas en la plataforma abierta WeChat.

Ejemplo completo del código del subprograma WeChat

Incluyendo archivos de página, archivos de configuración y código lógico.

1. Archivo de página:

índice.js:

Page({
    
    
  data: {
    
    
    message: 'Hello, World!'
  },
  onLoad: function() {
    
    
    console.log('页面加载完成');
  },
  onTap: function() {
    
    
    console.log('点击了按钮');
  }
});

índice.wxml:

<view class="container">
  <text>{
   
   { message }}</text>
  <button bindtap="onTap">点击我</button>
</view>

índice.wxss：

.container {
    
    
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
    
    
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
}

2. Archivo de configuración:

aplicación.json:

{
    
    
  "pages": [
    "pages/index/index"
  ],
  "window": {
    
    
    "navigationBarTitleText": "微信小程序示例",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#007bff"
  }
}

3. Lógica del mini programa:

aplicación.js:

App({
    
    
  onLaunch: function() {
    
    
    console.log('小程序启动');
  }
});

Lo anterior es un ejemplo simple de subprograma WeChat, que incluye una página y un archivo de configuración global. Puede crear un nuevo proyecto de miniprograma en WeChat Developer Tools, copiar y pegar el código anterior en el archivo correspondiente y luego hacer clic en el botón de vista previa para obtener una vista previa y depurar.

Nota: En el desarrollo real, es posible que deba realizar más configuraciones y escribir código de acuerdo con las necesidades específicas. Los ejemplos anteriores son solo de referencia y la implementación específica puede variar según las necesidades personales y los requisitos del proyecto.

Configuración detallada

En el subprograma WeChat, el archivo de configuración es app.json, que se utiliza para configurar los elementos de configuración global del subprograma, incluida la ruta de la página, el estilo de la ventana, el tiempo de espera de la red, etc. Aquí hay un ejemplo de app.json:

{
    
    
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/login/login"
  ],
  "window": {
    
    
    "navigationBarTitleText": "微信小程序示例",
    "navigationBarBackgroundColor": "#007bff",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#f5f5f5"
  },
  "networkTimeout": {
    
    
    "request": 5000,
    "downloadFile": 10000
  },
  "tabBar": {
    
    
    "color": "#333333",
    "selectedColor": "#007bff",
    "backgroundColor": "#ffffff",
    "list": [
      {
    
    
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-selected.png"
      },
      {
    
    
        "pagePath": "pages/detail/detail",
        "text": "详情",
        "iconPath": "images/detail.png",
        "selectedIconPath": "images/detail-selected.png"
      },
      {
    
    
        "pagePath": "pages/login/login",
        "text": "登录",
        "iconPath": "images/login.png",
        "selectedIconPath": "images/login-selected.png"
      }
    ]
  }
}

En el ejemplo anterior, configuramos tres páginas: índice, detalles e inicio de sesión, que corresponden a los tres directorios en la carpeta de páginas. También configuramos el estilo de la ventana, incluido el título, el color de fondo y el estilo del texto de la barra de navegación, así como el color de fondo.

Además, también configuramos tiempos de espera de red, incluidos tiempos de espera para solicitar y descargar archivos.

Finalmente, también configuramos la barra de navegación inferior, incluido el color del texto, el color de selección, el color de fondo y la ruta de la página, el texto, la ruta del icono, etc. de cada pestaña.

Ejemplo de código de encapsulación de solicitud simple para enviar solicitudes HTTP y procesar datos de respuesta:

// request.js

function request(url, method, data) {
    
    
  return new Promise((resolve, reject) => {
    
    
    wx.request({
    
    
      url: url,
      method: method,
      data: data,
      success: (res) => {
    
    
        if (res.statusCode === 200) {
    
    
          resolve(res.data);
        } else {
    
    
          reject(res.errMsg);
        }
      },
      fail: (err) => {
    
    
        reject(err.errMsg);
      }
    });
  });
}

module.exports = request;

En el código anterior, hemos definido una requestfunción llamada que se utiliza para enviar solicitudes HTTP. Esta función recibe tres parámetros: urlla dirección URL de la solicitud, methodel método de la solicitud (GET, POST, etc.) datay los datos de la solicitud.

Dentro de la función, utilizamos wx.requestmétodos para enviar solicitudes y manejar los resultados de las solicitudes a través de Promise. Si la solicitud tiene éxito (el código de estado es 200), los datos de respuesta se pasan a resolvela función; si la solicitud falla, la información del error se pasa a rejectla función.

Al encapsular la solicitud como una función, podemos llamar a la función en otro lugar para enviar la solicitud y manejar el resultado de la solicitud a través de Promise. Esto mejora la reutilización y legibilidad del código.

Ejemplo de uso de este código contenedor de solicitud:

// index.js

const request = require('../../utils/request.js');

Page({
    
    
  onLoad: function() {
    
    
    this.getData();
  },
  getData: function() {
    
    
    request('https://api.example.com/data', 'GET', {
    
    })
      .then((res) => {
    
    
        console.log('请求成功', res);
        // 处理请求成功的数据
      })
      .catch((err) => {
    
    
        console.log('请求失败', err);
        // 处理请求失败的错误信息
      });
  }
});

En el ejemplo anterior, onLoadllamamos getDataal método en el método de la página, que requestenvió una solicitud GET usando la función y procesó los resultados de la solicitud. Cuando la solicitud tiene éxito, podemos thenobtener los datos de respuesta a través del método y procesarlos; cuando la solicitud falla, podemos catchobtener la información del error a través del método y procesarla.