1. Configuración del entorno de desarrollo de la "Guía de desarrollo del programa WeChat Mini"

1.1 Introducción a los miniprogramas de WeChat

WeChat Mini Program es una forma completamente nueva de conectar usuarios y servicios. Se puede obtener y difundir fácilmente en WeChat, y tiene una excelente experiencia de usuario.

Pensando: ¿Por qué los Mini Programas de WeChat son tan populares?

• En primer lugar, para una empresa de nueva creación, con el fin de verificar la viabilidad de un determinado modelo de negocio en la etapa inicial, el equipo estándar de I+D es relativamente caro, al menos:
  • Uno para el desarrollo de iOS, uno para el desarrollo de Android, uno para el diseñador de UI, uno para el administrador de productos y otro para el desarrollo de back-end
• Para desarrollar un applet de WeChat, solo necesita:
  • Un desarrollo de applet de WeChat front-end, un diseñador de interfaz de usuario, un administrador de productos y un desarrollo de back-end
• Por supuesto, a la larga, si desea volverse más grande y más fuerte, es mejor utilizar un equipo de I + D estándar para desarrollar aplicaciones nativas, que pueden proporcionar funciones más potentes sin varias restricciones.
• Los applets de WeChat no solo son multiplataforma, sino que tampoco necesitan considerar la adaptabilidad de varios modelos de Android y dispositivos de diferentes tamaños.
• Los applets de WeChat tienen una mejor experiencia de usuario que los navegadores móviles para ver sitios web/utilizar aplicaciones H5 y están más cerca de la experiencia de usuario de la aplicación nativa.
• Sentado en más de mil millones de usuarios de WeChat, se puede compartir y reenviar fácilmente para su uso, sin descarga, actualización en caliente y mejor seguridad.

1.2 Registro del programa WeChat Mini

Antes de comenzar, debe preparar una dirección de correo electrónico que no haya registrado una cuenta oficial de WeChat

• Si no tiene una cuenta de correo electrónico adecuada a la mano, puede ir al buzón 163 para registrar una
• PD: Elogie mucho el buzón 163, es muy conveniente solicitar el registro.

Abra la página de registro del programa WeChat Mini y complete la información requerida para registrarse.

PD: Después de hacer clic en "Registrarse" y abrir su correo electrónico, encontrará un enlace de activación, haga clic para abrir y activar con éxito.

1.3 Inicie sesión en el fondo del subprograma WeChat para configurar

Después de iniciar sesión en https://mp.weixin.qq.com , puede ver el AppID de nuestro applet en el menú "Configuración" - "Desarrollo-Gestión de desarrollo-Configuración", donde se debe generar la clave AppSecret para el primera vez.

Aquí: Asegúrese de anotar el AppID (ID de programa pequeño) y AppSecret (clave de programa pequeño), que son necesarios para el desarrollo de back-end.

• El fondo del subprograma WeChat ha iterado muchas versiones, y se puede ver en la configuración y la configuración de desarrollo en los primeros días.
  

1.4 Si un trabajador quiere hacer un buen trabajo, primero debe afilar sus herramientas

Habiendo dicho tanto, ¿cómo desarrollar applets de WeChat?

WeChat proporciona oficialmente herramientas de desarrollo oficiales para pequeños programas

Después de abrir la dirección de descarga, puede ver que hay varios tipos de descarga y, en general, se recomienda descargar la versión estable.

1.6 Crear un nuevo subprograma WeChat Hello World

• Después de que el software se haya instalado correctamente, la primera apertura puede ser una interfaz de este tipo, seleccionamos el subprograma en el proyecto de subprograma.
• Luego complete el nombre del proyecto, la ruta donde se guarda el proyecto y otra información a su vez
• Vale la pena señalar que solo estamos desarrollando y aprendiendo aquí, y podemos verificar y usar el número de prueba aquí.
  • En el futuro, si desea que otros usen el applet que desarrollamos, puede usar nuestra AppID.
• En el modo de desarrollo, hay dos opciones, applet y plug-in, debemos elegir applet aquí.
• Opciones de servicio back-end, aquí elegimos no usar servicios en la nube, porque elegimos esto por el momento por el bien del aprendizaje.
• Para la opción de plantilla, se recomienda elegir la versión básica de JavaScript para aprender y luego elegir la plantilla básica de TypeScript o usar otras plantillas avanzadas para la enseñanza avanzada.
  
  Después de abrir el proyecto, puede ver un directorio de archivos similar al siguiente:
  
  Para un mejor aprendizaje y comprensión, ahora planeamos convertir la salida Hola mundo en ¡Hola mundo, un pequeño programa!

Solo necesitamos cambiar la cadena vinculada al lema en index.js.

El código modificado completo se ve así:

// index.js
// 获取应用实例
const app = getApp()

Page({
    
    
  data: {
    
    
    motto: 'Hello World,小程序',
    userInfo: {
    
    },
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    
    
    wx.navigateTo({
    
    
      url: '../logs/logs'
    })
  },
  onLoad() {
    
    
    if (wx.getUserProfile) {
    
    
      this.setData({
    
    
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    
    
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
    
    
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
    
    
        console.log(res)
        this.setData({
    
    
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    
    
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
    
    
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

Luego, haga clic en compilar y luego haga clic en depuración de máquina real

Aquí hay un lugar para quejarse:

• Si se modifica el código, haga clic en la máquina real para depurar directamente, y el resultado sigue siendo el código antes de la modificación, primero debe hacer clic para compilar. . .
• No sé cuándo WeChat oficial solucionará este error.

Luego aparecerá un código QR, escanéelo con WeChat para abrir una interfaz similar a la siguiente:

Aquí encontrará que el efecto es diferente de la vista previa. . .

Por lo general, debería tener el mismo efecto que la vista previa, solo cargue el avatar y el apodo de WeChat.

Pero de hecho, antes era posible, pero ahora no es posible ¿Por qué?

• Miniprograma Usuario Avatar Apodo Adquisición Reglas Ajuste Anuncio
  
  Este artículo Código fuente Ejemplo Descargar

¿Entiendes ahora? El código de muestra oficial en realidad está desactualizado.

• En los primeros días, el avatar y el apodo del usuario se podían obtener cuando se iniciaba el subprograma, pero se deshabilitó más tarde. Más tarde, se requirió que el usuario y el apodo solo se puedan obtener después de hacer clic en el botón para autorizar, y ahora está deshabilitado.
• Ahora, si desea obtener el apodo y el avatar del subprograma WeChat, debe seleccionarlo manualmente, lo que se vuelve más problemático. . .
• No es necesario entrar en detalles aquí por el momento, solo tenga una impresión general primero. En la próxima publicación de blog, compartiremos todo el proceso de cómo usar el inicio de sesión autorizado de WeChat para establecer nuestro sistema de cuenta.

1.5 ¿Qué recursos de aprendizaje vale la pena recomendar para aprender los miniprogramas de WeChat?

• Ver la documentación oficial del WeChat Mini Program
  
• Lea libros físicos o libros electrónicos
  , como "WeChat Mini Program Development Practice" producido por Dark Horse Programmer
• Siga la columna del blogger para aprender juntos

Este artículo ha terminado ~

El siguiente artículo compartirá el combate real del inicio de sesión autorizado de WeChat en la "Guía de desarrollo del programa WeChat Mini".