Hay los ingresos del grupo estadounidense cabo mpvue su gramática vue y buena eficiencia de desarrollo y luego con un componente de interfaz de usuario de la experiencia de usuario es buena, sin duda, el desarrollo a medida de una carta applet de micro, sino porque el desarrollo nativo mpvue de micro-canales re-embalaje, este también componente de interfaz de usuario introducido añade un montón de problemas, hombre de pocas palabras, dijo, y luego se muestra un método para introducir Vant-weapp.
1, en primer lugar, tenemos que tener un mpvue esqueleto básico de los documentos del proyecto, es decir, para iniciar un proyecto con mpvue
Global instalado vue-cli
$ npm install --global vue-cli
Crear un nuevo proyecto basado en una plantilla mpvue-inicio rápido
$ vue init mpvue/mpvue-quickstart my-project
Para su instalación depende
$ cd my-project
$ npm install
edificio de inicio
$ npm run dev
2, en segundo lugar, la nueva micro-canales en las herramientas de desarrollo en el proyecto, de llenado en el registro Id de aplicación y directorio de archivos (toco una pizarra señalar aquí que el directorio de archivos es el directorio dist mpvue el marco del proyecto), el directorio raíz de directorios es en realidad dist después de cada uno es mpvue (NPM plazo de construcción) guía paquete se completa, la estructura de archivos está dentro de la estructura de micro-canales pequeño pueblo de archivo nativo programa de desarrollo MINA;
3. A continuación, tenemos que utilizar Vant-weapp proyectos de código abierto Vant componentes de interfaz de usuario, por lo que desea descargar Vant-weapp abajo después de bajar el archivo dist bajo su programa para copiar todo lo que necesitamos para utilizar el proyecto original (es decir, empezamos la inicialización del proyecto), con el fin de facilitar la gestión, se puede crear una nueva interfaz de usuario Vant componentes utilizados para almacenar archivos estáticos en el directorio raíz;
git clone https://github.com/youzan/vant-weapp.git
posición pegar como se muestra en la Figura
4, el siguiente es relativamente simple, el uso específico de los componentes se puede ver en un documento oficial, sólo tenemos que introducir archivo JSON en la configuración que tenemos que utilizar los componentes de la página en la que los componentes que necesitamos
aquí es mi Inicio configuración JSON
{
// 页面配置，即 page.json 的内容
navigationBarTitleText: '首页',
'usingComponents': {
'van-search': '/static/vant/search/index',
'van-row': '/static/vant/row/index',
'van-col': '/static/vant/col/index',
'van-tab': '/static/vant/tab/index',
'van-tabs': '/static/vant/tabs/index',
'van-cell': '/static/vant/cell/index',
'van-cell-group': '/static/vant/cell-group/index',
'van-radio': '/static/vant/radio/index',
'van-radio-group': '/static/vant/radio-group/index',
'van-field': '/static/vant/field/index',
'van-button': '/static/vant/button/index',
'van-card': '/static/vant/card/index',
'van-popup': '/static/vant/popup/index',
'van-icon': '/static/vant/icon/index',
'van-panel': '/static/vant/panel/index',
'van-action-sheet': '/static/vant/cell-group/index',
'van-switch-cell': '/static/vant/switch-cell/index',
'van-area': '/static/vant/area/index',
'van-dialog': '/static/vant/dialog/index'
}
}
4, después de que los componentes de interfaz de usuario se pueden importar en la prueba de libro del proyecto antes de la entrada en vigor con el fin de permitir que los componentes de interfaz de usuario, tenemos que mirar en el paquete de proyectos, es decir, tenemos que abrir un terminal y ejecutar en el directorio raíz del proyecto de nuevo (NPM plazo de construcción), tales componentes de interfaz de usuario Vant normalmente tendrán un papel en las páginas
precauciones
uso específico en los documentos oficiales Vant-weapp en el uso de la sintaxis wxml, por lo que no podemos utilizar directamente la copia
1, cómo el enlace de datos
value="{{value}}"
applets nativos, el enlace de datos en la forma en la etiqueta
value="{{value}}"
Como mpvue sucedido usamos, por lo que tenemos que cambiar
v-bind:value="value"
//或者
:value="value"
2, la unión de los eventos de manera
el uso del applet nativa
bind:click="onClick"
uso mpvue
@click="onClick"
3 referencias, componentes interactivos
Vant en esta operación como retroalimentación montaje notificar clase tiene dos introducción, la introducción de un componente, el main.json Incorporated; el otro es un método de introducción, vue incorporado requiere archivo de importación Notablemente , que se incorpora en el presente documento ruta absoluta no se puede utilizar, esto puede ser similar a la ruta relativa.
import Notify from '@/../static/vant/notify/notify' //@是mpvue的一个别名，指向src目录
4, para obtener el valor del evento objeto de evento
Es de destacar que, caso de adquirir mpvue y el valor de pequeño programa nativo es diferente. Por ejemplo:
onChange(event){ // 获取表单组件filed的值
console.log(event.mp.detail) // 注意加入mp
}
Cambio 5, el esquema de Snoop
mpvue que no puede utilizar el @ clic en iconos Este nombre del monitor, así que si hay tal aparece nombre oyente documentación de la API, es necesario modificar manualmente el código fuente.
Camello puede cambiar el nombre del oyente.
por ejemplo: me encontré con este problema en el campo de montaje, mi enfoque es:
// static/vant/field/index.js
this.$emit('click-icon');
// 修改为:
this.$emit('clickIcon');
El manejo de errores
error error general puede ser tratada mediante qué proceso.
1, si desea activar la función de transferencia de micro-canales ES6 herramientas ES5 desarrollador.
2, compruebe el código de documento y ver si hay uso indebido de lugar.
3, recompilación o eliminado NPM plazo dev directorio dist re NPM plazo dev
4, reiniciar o actualizar las herramientas de desarrollo de micro-canales.
Después de agregar componentes de interfaz de usuario, informó la página que falta, TypeError: la propiedad de Can no Leer 'índice' de indefinido
1, la nueva página, NO empaqueta
2, agregue la ruta del componente de que se trate, la ruta es complemento equivocado o duplicado
