¿Cómo desarrollar miniprogramas WeChat? ¿Sabes algo al respecto?
Registre una cuenta del miniprograma y vincule a un desarrollador
Inicie sesión en el miniprograma de la plataforma pública WeChat, ingrese la identidad del usuario: desarrollador y agregue un nuevo desarrollador vinculante. .
Un mini programa certificado no puede estar vinculado a más de 20 desarrolladores. Los miniprogramas no certificados no pueden vincularse a más de 10 desarrolladores.
Obtenga el AppID, descargue e instale las herramientas de desarrollador
Una vez completada la descarga, utilice el administrador o la cuenta de WeChat vinculada al desarrollador para escanear el código QR e iniciar sesión.
Mini programa WeChat
Crear proyecto
Necesitamos utilizar herramientas de desarrollador para completar la creación y edición del código del mini programa.
Después de instalar las herramientas de desarrollador, ábrelas e inicia sesión en WeChat. Seleccione "Proyecto", complete el AppID obtenido anteriormente, establezca el nombre del proyecto local (no el nombre del subprograma), como "Mi primer proyecto", y seleccione la carpeta local como directorio de almacenamiento de código, haga clic en "Nuevo proyecto" y están hechos.
Para que sea más fácil para los principiantes comprender la estructura básica del código del subprograma WeChat, durante el proceso de creación, si la carpeta local que selecciona es una carpeta vacía, la herramienta de desarrollo le preguntará si Necesito crear un proyecto de inicio rápido. Seleccione "Sí" y las herramientas de desarrollo nos ayudarán a generar una demostración simple en el directorio de desarrollo.
Una vez creado correctamente el proyecto, podemos hacer clic en el proyecto para ingresar y ver la interfaz completa de la herramienta de desarrollador. Haga clic en la navegación izquierda y vea y edite nuestro código en "Editar". , puede probar el código, simular el efecto del mini programa en el cliente WeChat y, en "Proyecto", puede enviarlo a su teléfono móvil para obtener una vista previa del efecto real.
Escriba el código para crear una instancia del mini programa
Haga clic en "Editar" en la navegación izquierda de las herramientas de desarrollador y podremos ver el proyecto, que se ha inicializado y contiene algunos archivos de código simples. Los archivos más críticos e importantes son. app.js, app.json y app.wxss Entre ellos, el sufijo .js es el archivo de secuencia de comandos, el sufijo .json es el archivo de configuración y el sufijo .wxss es el archivo de hoja de estilo. El subprograma WeChat los leerá. archivos y generar instancias de subprograma.
//La función App() se utiliza para registrar un subprograma. Acepta un parámetro de objeto que especifica la función del ciclo de vida del subprograma. ({
onLaunch: function() {
// Realizar operaciones iniciales al inicio
},
onShow: function() {
//Realizar algo cuando se oculta.
},
onHide: function() {
//Hacer algo cuando se oculta .
},
globalData: 'Soy datos globales'
})
app.js es el código de script del subprograma.Podemos hacer esto. Monitorear y procesar las funciones del ciclo de vida del subprograma y declarar variables globales en el archivo, llamando a la API enriquecida proporcionada por el marco.
//app.js
App({
onLaunch: function() {
Llame a la API para obtener datos del caché local
var logs = wx.getStorageSync('logs ') || []
logs.unshift(Date.now())
wx.setStorageSync( 'registros', registros)
},
getUserInfo: function(cb) {
var that = this;
if ( this.globalData.userInfo) {
typeof cb == "función" amp; cb(this.globalData.userInfo)
} else {
// Llame a la interfaz de inicio de sesión
wx.login({
success: function() {
wx.getUserInfo({
success: función (res) {
this.globalData.userInfo = res.userInfo;
tipo de cb == "función" amp; cb(that.globalData.userInfo)
p>}
}
}})
}
}})
}
});
}
}
globalData: {
userInfo: null
}
})
app.json es la configuración global de todo el subprograma. En este archivo podemos configurar qué páginas contiene el mini programa, el color de fondo de la ventana del mini programa, el estilo de la barra de navegación y el título predeterminado. Tenga en cuenta que no se pueden agregar comentarios a este archivo.
{
"páginas": [
"páginas/índice/índice",
"páginas/registros/registros"
],
"window":{
"backgroundTextStyle"."light",
"navigationBarBackgroundColor":"#fff" ,
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "negro"
}
}
app.wxss es la hoja de estilo pública para todo el subprograma. Podemos usar directamente las reglas de estilo declaradas en app.wxss en el atributo de clase del componente de página.
/**app.wxss**/
.container {
altura: 100;
pantalla: flex;
p>
dirección-flexible: columna;
align-items.center;
justificar-contenido: espacio-entre;
padding: 200rpx 0 ;
box-sizing: border-box;
}
Creando una pequeña página de Calculadoras de Personalidad
En este tutorial, tenemos una página, la página de bienvenida, y todas están ubicadas en el directorio de páginas. La ruta y el nombre de cada página del miniprograma deben escribirse en páginas en app.json, y la primera página de las páginas es la página de inicio del miniprograma.
Cada mini página del programa consta de cuatro archivos con la misma ruta y el mismo nombre con diferentes sufijos, por ejemplo: index.js, index.wxml, index.wxss, index.json. Los archivos con el sufijo .js son archivos de script, los archivos con el sufijo .json son archivos de configuración, los archivos con el sufijo .wxss son archivos de hojas de estilo y los archivos con el sufijo .wxml son archivos de estructura de página. La extensión es un archivo de estructura de página.
index.wxml es el archivo de estructura de la página:
lt;! --index.wxml--gt;!wxml--gt;
lt; text class='title'gt;Visor personalizadolt;/textgt;
lt;text class= 'hint'gt;Calcule la personalidad actual de ustedlt;/textgt;
lt;button bindtap="setScore" class='check'gt;Haga clic para comprobarlt;/buttongt;
lt; ver class="container"gt;
lt; ver bindtap=" bindViewTap" class="userinfo"gt;
lt; src="{{userInfo.avatarUrl}}" background-size="cover"gt；lt; /imagegt;
lt; text class="userinfo-nickname"gt;{{userInfo.avatarUrl}} }lt;/textgt;
lt;text class='puntuación'gt;{{score}}lt;/textgt;
lt;text class='puntuación' gt; {{score}}lt;/textgt;
lt;text class='info'gt;{{info}}lt;/textgt;
lt;/viewgt ;
lt;/viewgt;
lt;/viewgt;
Este ejemplo utiliza lt;view/gt., lt;image/gt;, lt; text/gt;Para construir la estructura de la página, vincular datos y controladores de interacción.
index.js es el archivo de script de la página, donde podemos monitorear y procesar las funciones del ciclo de vida de la página, obtener instancias de subprogramas, declarar y procesar datos, responder a eventos de interacción de la página, etc.
//index.js
// Obtener instancia de aplicación
var app = getApp()
Page({
datos: {
puntuación: 0,
userInfo: {}
},
//eventHandlerFunction< / p>
setScore: function() {
var puntuación = 60 parseInt(Math.random()*40);
var infos = [
'Wow, ahora estás poseído por un hada, ve y liga con chicas',
'El sol brilla en el cielo, las flores me sonríen',
'Oye, ¿eres Cerdo? Aléjate de mí'
];
var info;
if(scoregt;90){
info= infos[0];
}else if(scoregt;75){
info=infos[1];
} else{
info=infos[2];
}
this.setData({
puntuación: puntuación,
info: información
})
},
onLoad: función () {
console.setData({
información de usuario: información de usuario
})
})
}
})
index.wxss es la hoja de estilo de la página:
/**index.wxss**/
.title{
font-size: 30px;
pantalla: bloque;
relleno: 10px;
peso de fuente: negrita
alineación de texto
}
.hint{
pantalla: bloque
relleno: 10px 20px
color: #999; /p>
alineación de texto: centro;
}
.check{
ancho: 100px; /p>
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
ancho: 128rpx;
alto: 128rpx
margen: 20rpx; /p>
radio-borde: 50;
}
.userinfo-nickname {
color: #aaa; >text-align: center;
display: block
}
La hoja de estilo de página es opcional.
Si existe una hoja de estilos de página, las reglas de estilo de la hoja de estilos de página se aplicarán en cascada sobre las reglas de estilo en app.wxss. Si no especifica una hoja de estilo de página, también puede usar las reglas de estilo especificadas en app.wxss directamente en el archivo de estructura de página.
index.json es el archivo de configuración de la página:
El archivo de configuración de la página no es necesario. Si existe un archivo de configuración de página, los elementos de configuración anulan los mismos elementos de configuración en la ventana app.json de la página. Si no se especifica ningún archivo de configuración de página, se utiliza la configuración predeterminada en app.json en la página.
El efecto es el siguiente:
Vista previa móvil
Seleccione "Proyecto" en la barra de menú izquierda de la herramienta de desarrollo, haga clic en "Vista previa" y escanee. Experimente el código en el cliente WeChat.
Efecto teléfono móvil