Red de conocimiento de abogados - Derecho de sociedades - Todo el proceso de desarrollo de la aplicación uniapp desde el desarrollo hasta el lanzamiento.

Todo el proceso de desarrollo de la aplicación uniapp desde el desarrollo hasta el lanzamiento.

En el momento del front-end, un amigo me encomendó que le ayudara a desarrollar una aplicación. Después de una consideración exhaustiva, no recurrí a uniapp nativo, un conjunto de pilas de tecnología para el desarrollo. un front-end cruzado lanzado por dcloud La solución se puede utilizar para generar pequeños programas, Android, IOS, H5 y otros códigos a través de un conjunto de códigos. Es una herramienta de eficiencia absoluta para proyectos pequeños y medianos. La arquitectura técnica utiliza uniapp como interfaz y Thinkphp como interfaz y administración de back-end. Se eligió Easyadmin, un sistema de administración de back-end de código abierto, porque puede generar automáticamente páginas de administración de cuajada a través de un solo comando y puede implementarse rápidamente. campos, tablas, búsquedas y otras funciones a través de la configuración. Se puede decir que es un artefacto de eficiencia. La base de datos utiliza la base de datos mysql más común. Este almacenamiento en la nube que no tiene nada que decir utiliza Qiniu Cloud Storage. Debido a que el proyecto contiene una gran cantidad de recursos de video, es una buena opción colocar recursos estáticos en el almacenamiento en la nube. Es relativamente simple. Los amigos que han desarrollado miniprogramas Vue o WeChat pueden comenzar casi sin problemas. Solo necesitan explorar los documentos oficiales. La API es similar a la API del miniprograma. son básicamente iguales. La etiqueta

se usa en HTML normal, pero la etiqueta se usa en uni. Cabe señalar que solo se puede incluir una etiqueta de vista en la plantilla, y se incluyen otras etiquetas en esta. etiqueta. La segunda parte es el código JS incluido en el script. El objeto exportdefault se utiliza para exportar el código en JS. La estructura interna es la estructura de datos de Vue, incluidos datos (), métodos () y otros métodos y algunas funciones de ciclo de vida uni. . La tercera parte es el código CSS envuelto en la etiqueta de estilo, que es exactamente el mismo que el código CSS de HTML. Escrito en la configuración de página uni Todo las páginas deben registrarse en page.json. Las páginas no registradas no se pueden saltar ni mostrar. Simplemente configure los parámetros de la página en la matriz de páginas. También puede configurar el objeto de estilo debajo del objeto de cada página para definir el título de la página. y se puede configurar otra información configurando el objeto globalStyle para configurar los parámetros globales de la APLICACIÓN. Para elementos de configuración específicos, consulte la documentación oficial de uniapp (sitio web oficial de uni-app). Además, también puede generar automáticamente la APLICACIÓN. etiqueta configurando el objeto tabBar. TABAPP.VUEapp.vue es La entrada principal de todo el proyecto, aquí se llamará a onLaunch cuando se inicie inicialmente la APLICACIÓN. Puede realizar algunas operaciones relacionadas con la inicialización de la APLICACIÓN aquí De manera similar, el CSS escrito en esta página también funcionará en todas las páginas, y aquí se pueden colocar algunos CSS globales, como los colores del tema.

APP settings manifest.json es el archivo de configuración para todo el proyecto, que cubre el AppId del proyecto, el nombre de la aplicación, la versión y las configuraciones relacionadas para aplicaciones y miniprogramas. El proyecto se puede configurar de forma visual a través del editor Hbuilder o. A través de la vista del código fuente, configuremos el proyecto y solicitemos la encapsulación. Como una aplicación que se puede iniciar en línea, debe poder mostrar varios tipos de datos. Para mostrar los datos, debe estar conectado a la API de back-end. Para facilitar el desarrollo y el mantenimiento posterior, la solicitud se puede encapsular por separado para un procesamiento unificado como un solo archivo. Cree una carpeta común en el directorio raíz del proyecto y cree una nueva)) Encapsulamos la solicitud en función de esta API para facilitar su uso al llamar a la interfaz. constbaseUrl='/api/';/*Encapsular función ajax*@param{string}opt.typeplete=opt.complete||function(){};uni.request({método:opt.method,dataType:'json' ,url:opt.url,data:opt.data,header:getHeader(),success:(res)=>{uni.hideLoading()//console.log(res)if(res.data.code==200 ){opt.success(res.data);}else{uni.showToast({title:res.data.message,icon:"none"})opt.fail(res);}},fail:(res)= >{uni.hideLoading()console.log(res)uni.showToast({title:res.data?res.data.message:'Error en la conexión de red',icon:"none"})console.log(opt)opt .fail(res);},complete:(res)=>{uni.hideLoading()opt.complete(res);},})} Para una administración unificada, puse todas las rutas API de back-end aquí en constbindAjax=. función(datos,éxito,fallo){ajax({url:'xxx/xxx',método:'POST',datos:datos,éxito:función(res){if(res.code==200){ éxito(res .data)}},fail:(e)=>{fail(e)}})} Luego exponga el nombre del método que definimos a través de erxport, exportdefault{ajax,bindAjax} Finalmente, queremos agregar Al llamar, también necesita para crear la variable global importmon/http.js';Vue.prototype.http=http en main.js para que podamos usar esto en la página para llamar a this.http.bindAjax({a: 1,b:2} (e)=>{//Datos devueltos después del éxito console.log(e)}, (e)=>{//Solicitud fallida}) Vea el archivo completo aquí (1 mensaje) uniapp unified Encapsulación de solicitudes - Recursos de documentos Javascript - Referencia de complementos de la biblioteca CSDN Otra ventaja de uniapp es que hay suficientes complementos, lo que puede evitar que los desarrolladores reinventen la rueda. Los desarrolladores de complementos de uso común pueden citarlos directamente, lo que ahorra mucho tiempo y costos de desarrollo.

Visite el mercado de complementos de Dcloud para buscar los complementos que necesita. Si necesitamos un complemento de búsqueda similar a Taobao, podemos buscar directamente "complementos de búsqueda" para buscar. Si es necesario, podemos buscar directamente los detalles del complemento en los detalles del complemento. Seleccione el complemento de importación HbuilderX en el lado derecho de la página para importar automáticamente el complemento a nuestro proyecto. Se debe prestar atención a la compatibilidad de plataforma del complemento. Muchos complementos están especialmente diseñados para una determinada plataforma, como el subprograma WeChat o la aplicación de Android. Sí, si usamos este complemento en otras plataformas, puede causar problemas de compatibilidad. A continuación, podemos comenzar a codificar felizmente ~ El próximo artículo utilizará Hbuilder para pruebas de máquinas reales, ¡así que estad atentos!