MiniApp a Web

Framework realizado para realizar la migración desde las miniapps, con el menor esfuerzo posible

• MiniApp a Web
  • Estructura
  • Consideraciones
    • Estilos
    • Javascript
  • Pasos manuales

Estructura

La estructura de carpetas sugerida es la siguiente:

-miniapp
  /assets
    -logo.png
    -...
  /components
    /header
      -index.acss
      -index.axml
      -index.js
      -index.json
  /pages
    /inicio
      -index.acss
      -index.axml
      -index.js
      -index.json
    /otra
      -...
  /scripts
    -my_utils.js
  /styles
    -*.acss
  /templates
    /footer
      -index.axml
  -app.acss
  -app.js
  -app.json

Consideraciones

Estilos

Para todos los estilos creados EVITAR usar el nombre del tag como selector. ej:

/*NO:*/
view.miclase{
 color:red
}
/*SI:*/
.miclase{
 color:red
}

/*NO:*/
.miclase>image{
 width:100%
}
/*SI:*/
.miclase>.imagen{
 width:100%
}

Preferir el uso de "px" sobre "rpx"

Dentro del app.acss ubicado en la raiz del proyecto se deben importar los siguientes archivos:

• El archivo de estilos general de claro
• Cualquier archivo de estilos ubicado en la carpeta "/styles"
• Si en la carpeta "/templates" hay un archivo de estilo por cada template (no recomendado), se debe importar por cada template

Los archivos de estilo de los componentes NO son necesarios de importar en este punto.

Javascript

Si se va a usar la variable "my", dentro de la carpeta "/scripts" debe existir un archivo "my_utils.js" donde sea el único lugar del proyecto donde se utilice está variable

Para los siguientes archivos se deben tener las siguientes consideraciones

• Archivos:
  • Archivo index.js de cada página dentro de la carpeta "/pages"
  • Archivo index.js de cada componente dentro de la carpeta "/components"
• Consideraciones:
  • importar las librerías de claro según el uso
  • Evitar el uso de la variable "my"directamente
  • Si se van a hacer peticiones al servidor (my.request) ejecutar las funciones con "async/await"
  • Optimizar el uso de "this.setData()" para ejecutarlo la cantidad mínima de veces posible

Pasos manuales

1. Cambiar la extensiones:

   • Archivo app.acss en la raiz por .css
   • Archivos .axml en las carpetas "/pages","/templates" y "/components" por .vue

2. modificar Page por 'export default' en el index.js

3. importar el my (si se usa) en el index.js

4. Para las alertas enviar la variable "this" al my a traves del index.js en el onload

    import { my } from "../../../my";
    export default { ...}

5. Importar los estilos

6. importar el index.js con la variable "minijs"

7. Incluir los componentes a usar desde la librería @claro

8. Incluir los templates (si usa) usando el prefijo "mini_"

9. Si usa templates se debe modificar el '< import ..>' por import en el js y modificar el tag 'template' por el 'mini_{{nombreTemplate}}'

10. Si usa template y en los templates usa componentes modificados, debe agregarlos similar a las pages

11. LLamar el onLoad del indexjs en la funcion onMounted enviando la variable query

12. Registrar los componentes (y templates)

13. llamar la data de la pagina del indexjs

14. Agregar las funciones a methods (si usa)

15. Poner todo dentro de un "template"

<style scoped>
 /*estilo propio de la página */
 @import "./index.css";
</style>
<script>
 //js propio de la página
 import minijs from "./index.js";
 //componentes
 import {
  mini_view,
  mini_button,
  mini_radio,
 } from "@claro/components";
 //templates
 import temp_header from "../../templates/header/view.vue";

 export default {
  //ciclo de vida del app
  mounted() {
   minijs.onLoad(this.$route.query);
  },
  //registro componentes a usar
  components: { mini_view, mini_button, mini_radio, temp_header },
  //data de la pagina
  data() {
   return minijs.data;
  },
  //metodos de la pagina
  methods: {
   formSubmit: minijs.formSubmit,
  },
 };
</script>
<template>...</template>

16. cambiar rpx por px en los css
17. Si usa form cambiar el onSubmit por :onsubmit y agregar @submit.prevent="submit"
18. Si usa a:for cambiarlo por v-for y el a:if por v-if con los cambios respectivos del framework
19. Si usa clases dinamicas debe cambiarlas por :class="'texto-'+variable", esto aplica también para las url en el navigator
20. Cambiar el evento onTap por @click
21. El this.setData({x:y}) cambia por that.x = y;