Desarrollo de proyecto de música para cine y televisión de Weapp (04): el uso de componentes tripartitos

puntos de conocimiento

三方组件库的安装与使用 computed 的安装与使用

nueva rama de código

Tomamos mastercomo punto de referencia, giteecreamos una nueva rama componentde código y desarrollamos código en esta rama. El comando es el siguiente:

git pull // 拉取 component 分支
git checkout component // 切换到 component 分支进行开发

1. Biblioteca de componentes Mind UI Weapp

1. Introducción a la biblioteca de componentes

La biblioteca de componentes utilizada en Mind UI Weappeste proyecto es la biblioteca de UIcomponentes , que admite el npmmétodo de instalación.

Código fuente de la biblioteca de componentes:https://github.com/NameLi/mind-ui-weapp
Documentación de la biblioteca de componentes:https://mind-ui-weapp.ixook.com

2. Instalación de la biblioteca de componentes

Instalación de la biblioteca de componentes npm i mind-ui-weapp -S * Después de compilar e instalar la biblioteca de componentes, se generará una node_modulescarpeta Haga clic en Configuración local de WeChat Developer Tools , marque la opción para usar módulos npm y luego haga clic en el menú superior Herramientas -> Crear npm . la construcción está completa, miniprogram_npmse generará un directorio En este directorio, puede ver el paquete de archivos de la biblioteca de componentes construidos, y luego puede importar y usar el componente.
Los registros globales se pueden usar globalmente importando registros bajo el objeto en el app.jsonarchivo . usingComponentsGeneralmente, los componentes con alta frecuencia de uso se registran globalmente. {"usingComponents": {"m-button": "mind-ui-weapp/button/index",}} * Registro de página/componente Registre el componente en el xxx.jsonarchivo (tome el buttoncomponente como ejemplo) "usingComponents": {"m-button": "/mind-ui-weapp/button/index"} y utilícelo en la plantilla <m-button type="primary">按钮</m-button> * El borde debajo de la pantallaborder.wxss se crea en la biblioteca de componentes y el estilo se basa en el implementación de pseudoclase y . Si el estilo en la plantilla ya usa una pseudoclase, agregue una capa de elementos para envolverlo afuera para evitar que se sobrescriban los conflictos de estilo. Todos los componentes en *anulación de estilo* están habilitados , los estilos de página externos pueden anular directamente los estilos internos de los componentes y el espacio de nombres de estilo del componente es . Evite conflictos con los nombres de estilo en el proyecto. * Al usar componentes de componentes , si necesita anular el estilo, debe habilitarloRetina1pxcss::before::aftertransform/* app.wxss 或 app.scss */@import "miniprogram_npm/mind-ui-weapp/assets/style/border.wxss"; Mind UI WeappaddGlobalClass: truem-Mind UI WeappstyleIsolation: 'shared'
El uso de componentes del método JS actualmente JSadmite toast message modaltres tipos de componentes llamados. Aunque .jsel importcódigo del componente se puede introducir en la página o el archivo del componente, aún recomiendo encarecidamente app.jsimportarlo y montarlo en la propiedad global ywx registrar el componente como un componente global en , lo que puede evitar la necesidad de introducirlo al usar e introducir Las rutas requieren problemas para usar ubicaciones relativas. Cuando se usa en cualquier página o componente, debe escribir el componente correspondiente en la plantilla de página. Nota: si lo usa en un componente, debe escribir el componente correspondiente en la plantilla de página que presenta el componente. Escribir en el componente es inválido. ### 2. Complementosapp.json// app.jsimport Toast from 'mind-ui-weapp/toast/toast'import Message from 'mind-ui-weapp/message/message'import Modal from 'mind-ui-weapp/modal/modal'wx.$toast = Toast; wx.$message = Message;wx.$modal = Modal; jswx.$toast('simple toast'); <m-toast id="toast" /> miniprogram-computed

1. `miniprogram-computed`Introducción

El subprograma WeChat proporciona oficialmente el complemento, y la explicación oficial es: la implementación de la extensión del componente personalizado del subprograma behavior, el atributo de cálculo computedy watchel oyente. Cuando los datos o las propiedades cambien, el computedcampo y watchse activará el oyente. En términos sencillos , es similar computeda watchla implementación de y de vue. vueLa diferencia es computedque no se puede usar y thisel datavalor de se puede pasar a través del computedparámetro ; no haywatch soporte para .Vuehandle

Código fuente oficial:https://github.com/wechat-miniprogram/computed

2. `miniprogram-computed`Instalación

npm i miniprogram-computed -S

Una vez completada la instalación, también debe usar las herramientas de desarrollador npm 构建para usarla.

3. `miniprogram-computed`Uso de

const = require('miniprogram-computed').behavior; // 引入计算属性组件

Component({behaviors: [computedBehavior],// 注入 mixins...
})

Para evitar introducirlo computedBehaviorcada vez que se usa, podemos app.jsmontarlo en el wxobjeto en formato .

// app.js
const computedBehavior = require('miniprogram-computed').behavior;
wx.computedBehavior = computedBehavior;

utilizar:

// 组件中
Component({behaviors: [wx.computedBehavior],// ...
})

// 页面中
Page({behaviors: [wx.computedBehavior],data: {a: 1,b: 1,},computed: {sum(data) {// 注意： computed 函数中不能访问 this ，只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a + data.b;}},// ...
})

3. Configuración de Git

No es gitnecesario , por lo que .gitignorelos archivos relevantes deben ignorarse en:

# .gitignore 文件中新增以下文件名称
package-lock.json// 本地包管理文件
/node_modules// 三方包
/miniprogram_npm // npm 构建后的三方包

Envíe el código nativo en línea:

git add . // 将本地代码添加到缓存区
git commit -m "UI 组件库与 computed 组件的安装与使用"// 将缓存区代码添加到本地仓库
git pull // 拉取远程代码
git push // 将代码提交到远程仓库

Combinar código de rama de componente en maestro

git checkout master // 切换到主分支
git merge component // 将 copmponent 分支代码合并到当前分支
git push// 将合并后的代码提交到远程分支

Por fin

Lo anterior es la introducción de la biblioteca de componentes de tres partes utilizada en este proyecto. Más detalles de uso se reflejarán en el código de desarrollo posterior.

Por fin

Se prepara un paquete de información inicial para todos. Contiene 54, 2.57G e-books relacionados con front-end, "Colección de entrevistas de front-end (con respuestas y análisis)", tutoriales en video de conocimientos clave y difíciles (juego completo).

Amigos necesitados, puede hacer clic en la tarjeta a continuación para recibir y compartir gratis