위 챗 애플 릿 개발 - 사용자 정의 구성 요소, 슬롯, 웹 소켓 (3)

1. 작은 프로그램 구성 요소 화 프로 그래 밍 은 작은 프로그램 기초 라 이브 러 리 버 전 1.6.3 부터 시작 하여 작은 프로그램 은 간결 한 구성 요소 화 프로 그래 밍 을 지원 합 니 다.

개발 자 는 페이지 안의 기능 모듈 을 사용자 정의 구성 요소 로 추상 화하 여 서로 다른 페이지 에서 중복 사용 할 수 있 습 니 다.

복잡 한 페이지 를 여러 개의 저 결합 모듈 로 나 눌 수 있어 코드 유지 에 도움 이 된다.사용자 정의 구성 요 소 는 기본 구성 요소 와 매우 비슷 합 니 다.

2. 사용자 정의 구성 요 소 를 만 듭 니 다. 사용자 정의 구성 요 소 는 .json, .wxml, .wxss, .js 네 개의 파일 로 구성 되 어 있 습 니 다.
구성 요 소 를 작성 하려 면 어떤 일 을 해 야 합 니까?사용자 정의 구성 요 소 를 만 들 기 전에 json 파일 에서 설명 component:true 을 해 야 이 파일 을 사용자 정의 구성 요소 로 설정 할 수 있 습 니 다.. wxml 파일 에 작성 하고. wxss 파일 에 추가 해 야 합 니 다.
2 - 2 - 1 구성 요소 템 플 릿 구성 요소 템 플 릿 의 작성 방법 은 페이지 템 플 릿 과 같 습 니 다.구성 요소 템 플 릿 과 구성 요소 데 이 터 를 결합 하여 생 성 된 노드 트 리 는 구성 요소 의 참조 위치 에 삽 입 됩 니 다.
구성 요소 템 플 릿 에서 구성 요소 인용 을 불 러 올 때 제공 하 는 하위 노드 를 제공 할 수 있 습 니 다.

<!--         -->
<view class="test">
  <view>      </view>
  <slot></slot>
</view>

<!--           -->
<view>
  <component-mytemplate>
    <view>       slot    </view>
  </component-mytemplate>
</view>

/*               */
.test{
  background-color: antiquewhite;
}

주의:

템 플 릿 에서 인용 한 사용자 정의 구성 요소 와 해당 하 는 노드 이름 은 json 파일 에서 명시 적 으로 정의 해 야 합 니 다. 그렇지 않 으 면 무의미 한 노드 로 여 겨 집 니 다.그 밖 에 노드 이름 도 추상 적 인 노드 로 설명 할 수 있다.

구성 요소 wxss 에 서 는 ID 선택 기, 속성 선택 기, 태그 이름 선택 기 를 사용 해 서 는 안 됩 니 다.

WXML 노드 태그 이름 은 소문 자, 밑줄, 밑줄 만 조합 할 수 있 기 때문에 사용자 정의 구성 요소 의 태그 이름 도 이 문자 만 포함 할 수 있 습 니 다.

사용자 정의 구성 요소 도 사용자 정의 구성 요 소 를 참조 할 수 있 습 니 다. 참조 방법 은 페이지 에서 사용자 정의 구성 요 소 를 참조 하 는 방식 (usingComponents 필드 사용) 과 유사 합 니 다.

사용자 정의 구성 요소 와 페이지 에 있 는 항목 루트 디 렉 터 리 이름 은 'wx -' 를 접두사 로 할 수 없습니다. 그렇지 않 으 면 오류 가 발생 할 수 있 습 니 다.

플러그 인 은 구성 요소 템 플 릿 에 노드 를 제공 하여 구성 요소 참조 시 제공 하 는 하위 노드 를 불 러 올 수 있 습 니 다.
슬롯 기능:

우리 가 봉 인 된 구성 요 소 를 더욱 확장 시 키 기 위해

사용자 로 하여 금 그룹 가격 내부 의 일부 내용 이 도대체 무엇 을 보 여 주 는 지 결정 할 수 있 게 한다

메모: 서명 슬롯 을 정의 할 때 인용 할 때 도 이름 이 있어 야 합 니 다.
components/my-componets/index.js

  //       
  Component({
  properties: {
     myDad:{
       type:"string",
       value:"   ",
       // observer      
       observer:(newValue,oldValue)=>{
          // newValue  ，oldValue    
           console.log(newValue,oldValue);
       }
     }
  },
  //      
  methods: {
    clickFn(){//   
      console.log("aaaaaaa");
      this.setData({
        myDad:"    "
      })
    },
    changValue(){//    
       this.triggerEvent("myevent","111")
    }
  }
})

components/my-componets/index.wxml

<view>
        
  {{myDad}}
  <button bindtap="clickFn" type="primary">     </button>
  
  <!--              ，            -->
  <!--           -->
  <slot></slot>
  
  <!--        -->
  <slot name="myslot"></slot>

  <button bindtap="changValue" type="primary">        </button>

  <!--            -->
  <slot></slot>

</view>

웹 socket 은 위 챗 애플 릿 과 함께 웹 소켓 만 연결 할 수 있 습 니 다. 현재 웹 소켓 연결 이 존재 하면 자동 으로 연결 을 닫 고 웹 소켓 연결 을 다시 만 듭 니 다.

wx.onSocketOpen
   WebSocket       

wx.onSocketClose
   WebSocket       

wx.closeSocket
   WebSocket   

SocketTask
WebSocket   ，    wx.connectSocket()       

SocketTask.onError
   WebSocket     

SocketTask.send
   WebSocket       

wx.onSocketMessage
   WebSocket            

wx.connectSocket
     WebSocket   。            。

wx.sendSocketMessage
   WebSocket       。

백 엔 드 서버

//   npm  ws   npm i ws 
const WS = require("ws").Server;
//console.log(WS);

let wss = new WS({//          
    port: 8600
});

//       
wss.on("connection", function (ws) {
    //websocket       ，      ws    
    console.log("   ");
    ws.on("message", res => {
        console.log(res);
        //     
        ws.send(JSON.stringify({ name: "tom" }));
    })
});

애플 릿 전단 index. wxml

//      
<button bindtap="sendMessage">      </button>

app.json

{
   "pages/test/index"
}

index.js

Page({
  /*       */
  data: {

  },
  //    
  sendMessage() {
    // console.log(1111);
    wx.sendSocketMessage({
      data: "    ",
    })
  },
  /*      --      */
  onLoad: function (options) {//          websocket
    //     websocket  
    wx.connectSocket({
      //  localhost    ，       ，  websocket       
      // ip             
       url: "ws://192.168.43.5:8600",
     });
     
    //        
    wx.onSocketOpen((result) => {
      console.log("    ");
    })
    
    //        
    wx.onSocketMessage((result) => {
     console.log(result);
   })
  }
})