小程序-基础知识1

news2025/10/31 11:59:10

Mustache语法

小程序和vue一样提供了插值语法

在这里插入图片描述

但是小程序不能调用方法{{xxxx()}}

hidden属性

hidden是所有组件都默认拥有的属性，
hidden与wx:if的区别：
wx:if是控制组件是否渲染,hidden控制显示或隐藏是通过添加hidden属性。
在这里插入图片描述

wx:for

除了可以遍历数组还可以遍历字符串和数字

可以遍历字符串
在这里插入图片描述
也可以遍历数字

在这里插入图片描述

block是一个包装元素，类似与vue的template,不会渲染到页面上,可以定义item和index的名字
在这里插入图片描述

wxs

与js基本一致，它不依赖与运行的基础版本库，可以运行在所有版本的小程序。在wxs中不能调用其他js中的函数，也不能调用小程序提供的api

wxs可以写在<wxs>标签中，也可以写在.wxs结尾的文件中。
wxs标签的属性 :
– module 当前标签的模块名
– src 应用.wxs文件的路径
每一个.wxs或<wxs>文件都是一个单独的模块,模块中的变量和函数都是私有的，要想到处只能通过module.exports
<wxs>标签形式
.wxs形式

.wxs文件
在这里插入图片描述
引入.wxs文件

事件监听

以bind或catch开头如bindtap=“cli”,1.5.0后可以在bind或catch后加:

<view bindtap="cli">+</view>

cli(e){
 console.log(e.target) //事件触发对象
 console.log(e.currentTarget) //事件处理对象
}

在这里插入图片描述

事件冒泡和捕获

捕获:capture-bind:tap=“cli”
组织事件进一步传播 capture-catch:
在这里插入图片描述

传参的两种方式：
1.data-xx 自定义属性
2. mark

<view mark:age="111"   data-index="1">  </view>

组件化

通过新建Component建立组件
在这里插入图片描述

js文件
在这里插入图片描述
json文件

自定义组件也可以引用其他的组件，目录不能以wx-开头，在app.json中声明的可以直接在其他页面中使用

在这里插入图片描述

组件的样式

组件内的样式不会影响组件外的样式
组件内不能使用Id选择器、属性选择器、标签选择器。
Component对象中可以传入options,options有一个属性stylesolation可以让样式相互影响:

isolated
apply-shared
shared

  Component({
   options:{
     styleIsolation:"shared"     
   }
  })

组件间的通信

在这里插入图片描述

向组件传递properties

父组件向子组件传递值，子组件通过properties来定义传递的值的类型和默认值
支持String,Number,Boolean,Object,Array等
可以通过value设置默认值

<Test name="aaa" age="10"> </Test>

Component({
  properties:{
     name:{
       type:String
       value:"nnn"
     },
     age:{
       type:Number,
       value:10
     } 
  }

})

向组件传递外部样式 externalClasses

如果希望组件的样式有外部决定可以使用 externalClasses

 //外部的css
 .test{
  color:red
 }
 //  作为属性传递给子组件
<Test  color="test"></Test>
//子组件
Component({
  options:{},
   externalClasses:['test']
})
<view class="test"></view>

自定义事件

子组件通过triggerEvent来定义

 onCli(){
  this.triggerEvent("triggerCli",{name:"aa"})
}

父组件 bind: xxxx

//子组件为test
 <Test bind:triggerCli="cli"> </Test>
cli(e){
 console.log(e)
}

插槽

单个插槽

<Test>
 <view>name</view>
</Test>
//在子组件中使用
<view>
  <slot></slot>
</view>

小程序的默认情况下不支持默认值，需要自己设置

<view class="content">
  <slot></slot>
</view>
<view class="default">

</view>
//在content为空时，设置default为block
.default{
 display:none
}
.content:empty + .default{
   display:block
}

多个插槽

  <Test>
    <view slot="left">left</view>
    <view slot="center">center<view>
  <Test>

使用多个插槽时要在options中把multipleSlots设为true

在这里插入图片描述

<view> 
  <slot name="left"></slot>
</view>
<view>
  <slot name="center"></slot>
</view>

behavier

// customBehavior.js  
module.exports = Behavior({  
  properties: {  
    property1: {  
      type: String,  
      value: 'default value'  
    }  
  },  
  data: {  
    data1: 'data value'  
  },  
  methods: {  
    method1() {  
      console.log('This is method1');  
    }  
  }  
});

在组件中使用 Behavior

// myComponent.js  ,import
const customBehavior = require('./customBehavior.js');  

Component({  
  behaviors: [customBehavior],  
  
  properties: {  
    componentProperty: {  
      type: String,  
      value: 'component default value'  
    }  
  },  
  
  methods: {  
    callMethod() {  
      this.method1(); // 调用来自 Behavior 的方法  
      console.log(this.property1); // 使用 Behavior 中的属性  
    }  
  }  
});