Introducción

WeChat Mini Programs son aplicaciones ligeras que se ejecutan dentro de la plataforma WeChat, permitiendo funcionalidades similares a las aplicaciones nativas. En este artículo, exploraremos cómo desarrolar una aplicación sencilla que permita a los usuarios compartir contenido socialmente a través de WeChat. El enfoque se centra en los pasos técnicos esanciales, desde la configuración del entorno hasta la implementación de funciones de compartir.

Preparación del entorno

Para iniciar, es necesario instalar la herramienta de desarrollo oficial de WeChat, disponible en su sitio web. Una vez instalada, ábrela y selecciona la opción para crear un nuevo proyecto. Introduce el AppID proporcionado por WeChat y elige un directorio de trabajo para el proyecto.

Diseño de la interfaz

Utiliza WXML para definir la estructura de la página y WXSS para aplicar estilos. A continuación, un ejemplo modificado de código para la interfaz:

<!--main-screen.wxml-->
<view class="main-wrapper">
  <image class="user-photo" src="{{photoUrl}}"></image>
  <view class="display-name">{{userName}}</view>
  <button class="btn-compartir" bindtap="triggerShare">Compartir</button>
</view>

<!--main-screen.wxss-->
.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.user-photo {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
}
.display-name {
  margin-top: 30rpx;
  font-size: 30rpx;
  color: #333;
}
.btn-compartir {
  margin-top: 50rpx;
  padding: 20rpx 40rpx;
  background-color: #4CAF50;
  color: white;
  font-size: 28rpx;
  border-radius: 8rpx;
  border: none;
  cursor: pointer;
}

Vinculación de datos y manejo de eventos

En WeChat Mini Programs, los datos se vinculan a la enterfaz mediante la sintaxis {{}} y los eventos se manejan con directivas como bindtap. Modificamos el archivo JavaScript para actualizar los datos y responder a acciones del usuario:

//main-screen.js
Page({
  data: {
    photoUrl: '',
    userName: ''
  },
  initPage: function() {
    wx.getUserInfo({
      success: (response) => {
        this.setData({
          photoUrl: response.userInfo.avatarUrl,
          userName: response.userInfo.nickName
        });
      }
    });
  },
  triggerShare: function() {
    wx.shareAppMessage({
      title: 'Descubre esta aplicación',
      path: '/pages/main-screen',
      imageUrl: 'https://example.com/image.jpg'
    });
  }
});

Implementación de la función de compartir

Para habilitar el compartir social, invocamos el método wx.shareAppMessage dentro del controlador de eventos. Este método acepta parámetros como el título de la compartir, la ruta de la aplicación y una URL de imagen opcional. Asegúrate de configurar estos valores según las necesidades de tu aplicación.

Pruebas y previsualización

Utiliza la herramienta de desarrollo de WeChat para previsualizar la aplicación en modo de pruebas. Puedes escanear un código QR generado para probar la funcionalidad directamente en un dispositivo WeChat. Verifica que la interfaz se muestre correctamente y que la acción de compartir funcione como se espera.

Publicación de la aplicación

Una vez que la aplicación esté lista y probada, súbela a los servidores de WeChat mediante la herramienta de desarrollo. Esto generará una dirección en línea que los usuarios pueden acceder para usar la aplicación completa.