미니 프로그램 개발 문법의 기초

하나, 데이터 바인딩

vue 사용법과 유사합니다
. 1. jsdata에서 데이터 정의

Page({
    
    
     data:{
    
    
    info:你好'
}
})

2. wxml에서 데이터
콧수염 문법 을 사용합니다. 보간 표현식이라고도합니다.

<view>{
    
    {
    
    info}}</view>

두, 동적 바인딩 속성

vue vue 와 다릅니다.

<img :src="src">

애플릿은

<image src={
    
    {
    
    src}}"></image>

v-bind가 없으며 변수는 보간 표현식을 사용해야합니다.

셋, 디버깅

APPData는 js의 데이터를 볼 수 있습니다.

넷째, 이벤트

이벤트는 논리 계층에 대한 통신 방법으로 렌더링되며 이벤트를 통해 렌더링 계층에서 생성 된 동작은 비즈니스 처리를 위해 논리 계층에 피드백 될 수 있습니다.

1. 일반적으로 사용되는 이벤트

이벤트 유형	바인딩 방법	이벤트 설명
꼭지	bindtap 或 bind : tap	html의 클릭 이벤트와 유사하게 손가락이 닿은 직후에 두십시오.
입력	bindinput 或 bind : input	텍스트 상자의 입력 이벤트
변화	bindchange, bind : change	상태가 변경 될 때 트리거됩니다.

2. 이벤트 개체

이벤트 개체의 속성 :

속성	유형	기술
유형	끈	이벤트 유형
timeStamp	정수	트리거 이벤트에 대해 페이지가 열린 이후 경과 한 시간 (밀리 초)
표적	목적	이벤트를 트리거 한 구성 요소의 일부 속성 모음
currentTarget	목적	현재 구성 요소의 일부 속성 값 모음
세부 묘사	목적	추가 정보
접촉	정렬	터치 이벤트, 현재 화면에 남아있는 일련의 터치 포인트 정보, 여러 손가락
변경됨	정렬	터치 이벤트, 현재 변경되는 터치 포인트 정보의 배열, 손가락의 변경

3.bindtap 이벤트 바인딩 구문

<button type='primary' bindtap='demo'>按钮</button>
//demo就是bindTap事件，即触摸事件绑定的函数

Page({
    
    
   demo(e){
    
    
   console.log(e)
}

})

4. 데이터에서 데이터를 가져 오는 이벤트

Page({
    
    
data:{
    
    
       count :0
},
   demo(e){
    
    
   //获取数据，也能通过这种方式修改值
   //但这不会重新刷新页面的值，所以需要setData方法修改，这样才能同时刷新页面的值
   console.log(this.data.count)
   this.data.count = this.data.count + 1 
}

})

5. 이벤트는 데이터의 데이터를 동적으로 수정합니다.

this.setData () 메소드를 사용해야합니다.이 수정은 로직 레이어와 렌더링 레이어를
수정할 수있는 반면 this.data는 로직 레이어 만 수정합니다. 데이터가 변경되었지만 페이지 값은 수정되지 않습니다. .
this.setData ()는 논리 레이어에서 비동기 렌더링 레이어로 데이터를 보냅니다.

Page({
    
    
      data:{
    
    
       count :0
},
demo(){
    
    
  this.setData({
    
    
  //给哪个值修改就写那个值
      count:this.data.count + 1
})
}


})

6. 이벤트 매개 변수 전송

vue와 같은 이벤트를 바인딩하는 동안 매개 변수를 전달할 수 없습니다.

<button type='primary' bindtap='demo(10)'>按钮</button>

이것은 할 수 없습니다. 이것은 demo (10)이라는 함수를 호출하는 것과 같습니다. 매개 변수를 전달하는 데모 기능입니다.
다음과 같이 작성

<button type='primary' bindtap='demo' data-params="{
    
    {2}}">按钮</button>
//直接写2表示是字符串，写{
    
    {2}}表示是数字

data- * 형식에서 *는 매개 변수의 이름을 나타냅니다.
그런 다음 이벤트는이 매개 변수의 값을받습니다.

Page({
    
    
      data:{
    
    
       count :0
},
demo(e){
    
    
e.target.dataset
//dataset是一个对象，包含了所有通过data-*形式传递过来的参数
e.target.dataset.params
//这种形式可以得到具体传过来的值，根据上面的按钮，可以知道params的值是2
})
}


})

7. bindinput의 구문 형식

작은 프로그램에서 bindinput 이벤트는 텍스트 상자의 입력 이벤트에 응답하는 것입니다.

<input bindinput="inpuHandler"></input>

Page({
    
    
   inpuHandler(e){
    
    
   console.log( e.detail.value) 
     //  e.detail.value文本框最新输入的值
}

})

8. 텍스트 상자와 데이터 간의 직접 데이터 동기화

<input bindinput="inpuHandler" value="{
    
    {msg}}"></input>

Page({
    
    
data:{
    
    
      msg:"请输入"
},
   inpuHandler(e){
    
    
   console.log( e.detail.value) 
     //  e.detail.value文本框最新输入的值
}

})

9. target과 currentTarget의 차이점

대상은 이벤트를 트리거 한 소스이고 currentTarget은 현재 이벤트에 바인딩 된 구성 요소입니다.

<view bindtap="fn">
<button type='primary'>  按钮</button>
</view>

버튼을 클릭하면 클릭 이벤트가 버블 링의 형태로 바깥쪽으로 확산되고 외부 뷰의 탭 이벤트 핸들러도 트리거됩니다.
vie의 경우 e.target은 버튼 인 트리거 이벤트의 소스를 가리키고
currentTarget은 뷰에 바인딩 된 이벤트이기 때문에 뷰 자체입니다.

다섯, 작은 프로그램 성명

1. if 문

<view wx:if="{
    
    {cond == 1}}"></view>
<view wx:elif="{
    
    {cond2}}"></view>
<view wx:else></view>

rue의 바운드 값에 따라이 컴포넌트를 렌더링할지 여부를 결정합니다.

2. 블록 태그와 함께 if 사용

한 번에 여러 구성 요소의 표시 및 숨기기를 제어합니다. 태그를 사용하여 여러 구성 요소를 래핑하고 블록 태그에서 wx : if를 사용하여 제어 할 수 있습니다.

<block wx:if="{
    
    {bool}}">
   <view></view>
  <view></view>
</block>

블록은 어떤 구성 요소로도 렌더링되지 않고 래퍼 역할 만합니다.
가장 바깥 쪽 뷰도 렌더링되고 요소에서 찾을 수 있으므로 뷰를 래핑 할 필요가 없습니다.

3. 숨겨진 속성

요소를 숨기고 표시 할 수도 있습니다.

<view hidden="{
    
    {boolea}}"> </view>

값이 true이면 숨겨지고 if와 반대로 false가 표시됩니다.

4. if와 hidden의 차이점

요소를 동적으로 만들고 제거
하려면 숨김은 표시 스타일을 전환하는 것입니다. 없음 / 차단은 요소를 표시하고 숨 깁니다. 빈번한 전환
에는 숨김을 사용
하고 더 적은 전환에는 wx : if를 사용합니다.

5.wx : for 루프 문

<view wx:for="{
    
    {array}}" wx:key="id" wx:for-index="id"
     wx-for-itmen = "age"
>
    索引是：{
    
    {
    
    id}},当前项是{
    
    {
    
    age}}
</view>

Page({
    
    
data:{
    
    
      array:[{
    
    
            id:1,
            age:12
},
         {
    
    
           id:2,
           age:13
}
]
},
   

})

바인딩 키는 디지털 요소의 고유 한 속성을 직접 작성할 수 있으며 { {}}를 추가하지 마십시오 . 바인딩 후 렌더링 효율성이 향상 될 수 있습니다.
wx : for-index는 색인에 대해 지정된 변수를 리 바인드 할 수 있습니다. 기본 색인 변수를 작성하지 않으면 모두를 의미하며
wx : for-item 색인 만 사용할 수 있습니다. 기본값에 대해 지정된 변수를 바인딩 할 수 있습니다. 다시 지정하지 않고 항목을 지정하는 경우 기본 Yes 항목은 배열 요소입니다. 항목 만 사용