Cómo construir un pequeño programa con mpvue
mpvue es un framework front-end que utiliza Vue.js (proyecto de código abierto de Meituan) para desarrollar pequeños programas. El marco se basa en el núcleo de Vue.js. mpvue modifica el tiempo de ejecución y la implementación del compilador de Vue.js para que pueda ejecutarse en un entorno de miniprograma, introduciendo así un conjunto completo de experiencia de desarrollo de Vue.js para el desarrollo de miniprograma.
mpvue puede usar la sintaxis familiar del marco Vue. El enlace bidireccional significa que no es necesario usar this.setData de wx. Puede usar npm para presentar fácilmente a terceros. . Personalmente, creo que mpvue es más simple y fácil de usar que wepy. El tutorial de cinco minutos de mpuve se configura rápidamente.
Dirección git del proyecto: mpvue-demo (el código está completamente comentado y es fácil crear un pequeño programa con mpvue)
paso 1: vea la documentación y cree rápidamente un programa simple proyecto mpvue
# Instalar vue-cli globalmente
$ npm install --global vue-cli
# Crear un nuevo proyecto basado en la plantilla mpvue-quickstart
$ vue init mpvue/mpvue-quickstart mi-proyecto
#Instalar dependencias
$ cd mi-proyecto
$ npm install
# Iniciar la compilación
$ npm run dev Aquí he eliminado vuex (administración de estado) y ESlint (inspección de código), porque personalmente no me gusta detectar espacios y especificaciones; , puede hacerlo según su propia configuración.
Paso 2: Modifique el código y utilice las herramientas de desarrollo de Microsoft para abrir el directorio dist y ver si hay algún cambio.
Paso 3: Empaquetar api y "
const api = {
// Dirección de prueba
authorList: () =gt; request.get(`${host}/index/list_author_recommend.html `)
}
// exportar API predeterminada
exportar predeterminada { // como biblioteca de componentes (instalación)
instalación: función(Vue, nombre="$http") {// nombre personalizado (vue-resource también usa $http)
Object.defineProperty ( Vue.prototype, name, {value: api}); //Carga la biblioteca de componentes en el objeto prototipo
}
}
}paso 5: vue Cree un componente de tarjeta en el componente (proyecto oficial de mpvue. Tenga en cuenta aquí que la clase debe escribirse dentro del componente; de lo contrario, no se mostrará)
paso 6: vaya a la página y pase los parámetros. (mpvue no es compatible con vue-router)
Utilice el método de salto de página de WeChat y luego utilice el siguiente método para saltar a la página.
Paso 7: introduzca weui y pruebe. efecto (introduzca la biblioteca UI según sea necesario, no la use si no es compatible con elementUI).
Descarga weui.css y colócalo en el proyecto, importa css, por ejemplo: import '.../static/weui/weui.css'
Agrega lo que necesites preste atención al usar mpvue (para obtener más detalles, consulte la documentación oficial)
1. La nueva página debe agregarse a npm run dev restart.
2. No se pueden utilizar todos los BOM/DOM del miniprograma, es decir, no se puede utilizar la directiva v-html.
3. Los componentes no admiten la vinculación de clases y estilos, deben escribirse dentro del componente.
4.mpvue puede admitir componentes locales de miniprogramas, como selectores, mapas, etc. Cabe señalar que el enlace de eventos en componentes nativos debe vincularse a la sintaxis de enlace de eventos de Vue, como los eventos bindchange="eventName", que deben escribirse con @change="eventName".
5.mpvue recomienda usar el enlace v-model.lazy para optimizar el rendimiento. Además, v-model puede tener un problema de reinicio del cursor al ingresar en el cuadro de entrada en la biblioteca básica anterior.
6. Al escribir un salto de página, pase parámetros dinámicos, que deben escribirse como: url, por ejemplo: lt; navigator url="'.../test/main?id=' id hover-class="ninguno"'".
7. Obtener las opciones pasadas cuando la página se carga a través de this.$root.$mp.query. Obtenga las opciones pasadas cuando la aplicación se inicia/muestra a través de esto.$root.$mp.appOptions.
8. Utilice this.$root.$mp.query para obtener los parámetros que deben obtenerse en monted. Al crear, se informará que el atributo indefinido 'consulta' no se puede leer.
9. Utilice this.$root.$mp.query para obtener los parámetros que deben obtenerse en monted. Al crear, se informará que el atributo indefinido 'consulta' no se puede leer.
Creo que después de leer el caso de este artículo, domina este método. Para obtener más información interesante, preste atención a otros artículos relacionados de Gxl net.
Lectura recomendada:
Explicación detallada de los pasos para agregar, eliminar, modificar y consultar tablas usando Vue.js
Cómo resolver rápidamente el problema de jQuery enviando solicitudes para enviar parámetros chinos confusos