El arquitecto Ali P7, tutorial introductorio de Uni-app escrito a mano puro, se puede llamar el pináculo del trabajo

 

Introducción

¿Qué es uni-app?

Es un marco de desarrollo completo basado en Vue.js. Los desarrolladores escriben un conjunto de código que se puede publicar en múltiples plataformas como iOS, Android, Web (receptivo) y varios programas pequeños y aplicaciones rápidas. Desarrollar una vez, ejecutar en todas partes.

 

 

Interfaz de usuario de nominación

uView

Desde que se lanzó uni-app a principios de 2018, se ha desarrollado vigorosamente. Está prosperando y la comunidad está llena de voces.

Por lo tanto, uView nació y el objetivo de uView es convertirse en el mejor marco de interfaz de usuario en la ecología uni-app.

En cuanto al motivo del nombre de uView, la primera letra u proviene de la primera letra de uni-app, uni-app se basa en Vue.js, Vue y View (extendido a UI, view) tienen la misma pronunciación, y el Ver componente uni-app es el más La base, el componente más importante, se llama uView, que expresa el significado de uni-app y Vue.

El rendimiento de los componentes básicos es superior al de los componentes ampliados.

Dos conceptos básicos de una aplicación

01 Gramática básica

Presentación de datos

Definición: Definido en datos

Uso: interpolar { {}} en templado , no es necesario usar esto

Nota: No hay necesidad de paréntesis en el atributo, y se requiere ':' antes del nombre del atributo, que es diferente del subprograma WeChat.

Bucle de datos

Uso en el programa WeChat Mini

wx: para = "{ {fuente de datos}}" wx: para-índice = "alias de índice" wx: para-elemento = "alias de elemento"

Uso en vue

vue-for="item in 数据源" 或者 vue-for="（item，index） in 数据源"

<view v-for="(item) in list" :key="item.id">
  {
   
   {item.name}} --- {
   
   {item.id}}
</view>

// 数组
list: [
  {id:0,name:'张三'},
  {id:1,name:'李四'},
  {id:2,name:'王五'},
]

• Compilación condicional

v-if: para manipular el DOM, es necesario volver a compilarlo, por lo que no es adecuado para el cambio frecuente de
v-show: solo manipule el estilo, no importa si se muestra o no, habrá este elemento

Atributos calculados

De manera similar a la interfaz de procesamiento de datos calculados, reduce las operaciones lógicas complejas en los datos de la plantilla, como el filtrado de datos, y elimina algunos o algunos datos que no se van a representar.

// 使用计算属性
<view>
  <view v-for="item in filterList" :key="item.id">
    {
   
   {item.name}}
  </view>
</view>
// 计算属性节点
computed:{
money(){

return "$" + this.num

},

filterList(){
    // 使用过滤
    return this.list.filter(item=>item.id<=0)
            }
        }

El método filter () crea una nueva matriz y los elementos de la nueva matriz se pasan comprobando todos los elementos de la matriz especificada que cumplen las condiciones.

Nota:  filter () no detectará matrices vacías, filter () no cambiará las matrices originales. Es un método de matriz JS, no un filtro en vue. Los más comunes son forEach, map y filter.

02 eventos

Caso 1:
Igual que el uso de vue y el mismo uso @ click = "handleClick"

<template></template>
    <view>
        <view @click="handleClick">点击</view>
    </view>
</template>

<script>
    export default {
        methods:{
            handleClick () {
                console.log('view被点击了，事件被触发，函数被执行');
            }
        }
    }
</script>

<style lang="scss">

</style>

 

Caso 2: pasar atributos personalizados

Los atributos personalizados provienen del subprograma nativo de WeChat

<template>
    <view>
        <view data-index="11" @click="handleClick1($event)">点击1</view>
    </view>
</template>

<script>
    export default {
        methods:{
            handleClick1 (event) {
        // event.currentTarget.dataset.index
                console.log(event)
            }
        }
    }
</script>

<style lang="scss">
</style>

 

Caso 3: Pasando atributos personalizados + parámetros comunes
, el orden de colocación se puede ajustar de manera flexible

<template>
    <view>
        <view data-index="11" @click="handleClick1($event,1)">点击1</view>
    </view>
</template>

<script>
    export default {
        methods:{
            handleClick1 (event,index) {
                console.log(event);
                console.log(index);
            }
        }
    }
</script>

<style lang="scss">
</style>

 

03 componentes

Se
define, introduce, registra y utiliza el proceso de uso de los componentes .

Pasar parámetros de componentes
: padre a hijo: padre a hijo, padre, atributo

Hijo a padre: Hijo a padre, primer hijo, evento

Transferencia de datos global uni-app

La primera realización : en la definición de main.js , usando this.baseUrl,  llame directamente a
Vue.prototype.baseUrl = 'www.baidu.com' + 'Vue.prototype.baseUrl '

La segunda forma : Defina en App.vue, use getApp (). GlobalData.baseUrl para  llamar a
globalData: {baseUrl: 'www.baidu.com' + 'getApp (). GlobalData.baseUrl'}

La tercera forma : el uso de vuex en vue, consulte la documentación oficial de vue para esto.

El cuarto método : almacenamiento local, consulte la API de documentación oficial.

Ranura de componente

El padre  pasa la etiqueta específica al niño a través del marcador de posición de la etiqueta de la  ranura .
Nota: El cuadro de entrada no tiene color y es invisible en la superficie. La etiqueta de la ranura debe estar envuelta por la etiqueta de la vista; de lo contrario, no se mostrará.

04 comparación de ciclo de vida

El ciclo de vida de uni-app

Link de referencia

El inicio de la aplicación se activa cuando se completa la inicialización de la uni-aplicación  App.vue

Page onLoad monitorea la página de carga  page.vue

Componente creado Cuando se crea el componente, montado Cuando se crea el componente , el componente está completo.  Vue

El ciclo de vida de los miniprogramas de WeChat

Link de referencia

El ciclo de vida de vue

Link de referencia

Tres, proyecto de muestra

01 Crea un proyecto desde la línea de comando

 

// 安装vue脚手架
npm install -g @vue/cli

// 创建uni-app项目
vue create -p dcloudio/uni-preset-vue my-project

// 模板选择
选择默认模板

// 运行生成mp-weixin文件夹
npm run dev:mp-weixin
npm run dev:h5   // 直接在浏览器输入本地URL访问


// 如果是微信小程序，则需要导入生成的文件夹mp-weixin编译运行，位置：my-project\dist\dev\mp-weixin
打开微信开发者工具

Efecto de ejecución H5

 

Efecto de ejecución del subprograma WeChat

 

Efecto de ejecución del subprograma WeChat

 

02 Panel HBuilder X para crear un proyecto

 

03 Estructura de archivos

 

 

04 Configuración básica y limpieza

Configuración de uso del estilo Sass

 

npm install sass-loader node-sass

instalación del complemento de compilación compile-node-sass

Compile scss / sass en css. Compilación Uni-app o haga clic con el botón derecho en el uso del archivo al compilar comandos externos

Limpiar el contenido del componente de muestra

<template>
</template>

<script>
    export default {

    }
</script>

<style>

</style>

Uso de estilo Sass incorporado

<template>
    <view class="content">
        <view class="rpx">rpx</view>
        <view class="vhvw">vw</view>
        <view class="sass">sass</view>
    </view>
</template>

<script>
    export default {

    }
</script>

<style lang="scss">
.rpx{
    background-color: blanchedalmond;
    width: 750rpx;
    height: 150rpx;
}
.vhvw{
    background-color: #2B8ACE;
    width: 100vw;
    height: 10vh;
}
.sass{
    background-color: #FFC600;
  // sass内置样式的使用
    color: $uni-color-success;
}

</style>

Finalmente, si necesita estos materiales, puede hacer clic aquí para obtenerlos.