위 챗 애플 릿 학습 wxs 사용 강좌

wxs 가 뭐 예요?
wxs(WeiXin Script)는 작은 프로그램의 스 크 립 트 언어 로 WXML 과 결합 하여 페이지 구 조 를 구축 할 수 있 습 니 다.
wxs 태그

<wxs module="utils" src="../../wxs/test.wxs"></wxs>

module 속성:
현재 탭 의 모듈 이름 은 이 값 이 유일 하 다 는 것 을 권장 합 니 다.같은 이름 의 모듈 이름 이 존재 하면 선착순 으로 덮어 씁 니 다(후 자 는 전 자 를 덮어 씁 니 다).
src 속성:
a.wxs 파일 만 참조 할 수 있 고 상대 경로 여야 합 니 다.
b.wxs 모듈 은 모두 하나의 예 입 니 다.wxs 모듈 은 처음 인 용 될 때 하나의 예 대상 으로 자동 으로 초기 화 됩 니 다.여러 페이지,여러 곳,여러 번 사용 되 고 같은 wxs 모듈 대상 을 사용 합 니 다.
c.wxs 모듈 이 정 의 된 후에 계속 인용 되 지 않 으 면 이 모듈 은 해석 되 고 실행 되 지 않 습 니 다.
wxs 모듈
wxs 코드 는 wxml 파일 의 탭 이나.wxs 를 접미사 로 하 는 파일 에 작성 할 수 있 습 니 다.(위 챗 개발 자 도구 에서 오른쪽 단 추 를 누 르 면.wxs 파일 을 직접 만 들 고 wxs 스 크 립 트 를 직접 작성 합 니 다)
쓰기 1 은 다음 과 같다.

// test.wxml
<wxs module="utils">
  module.exports = {
    msg: 'hello world'
  }
</wxs>
<view> {{utils.msg}}</view>
//     : hello world

쓰기 2 는 다음 과 같다.

// text.wxml
<wxs module="utils" src="../../common/wxs/test.wxs"></wxs>
//               
// <wxs module="utils" src="../../common/wxs/test.wxs" />
<view> {{utils.msg}}</view>
// test.wxs
module.exports = {
  msg: 'hello world'
}

wxs 코드 는 일반적으로.wxs 파일 에 쓰 는 것 을 권장 합 니 다.
모듈 설명

모든.wxs 파일 과 wxs 라벨 은 하나의 단독 모듈 입 니 다

4.567917.모든 모듈 은 독립 된 역할 영역 이 있 습 니 다.즉,한 모듈 에서 정 의 된 변수 와 함수 입 니 다.기본 값 은 모두 개인 적 이 고 다른 모듈 에 보이 지 않 습 니 다.4.567918.
4.567917.만약 에 한 모듈 이 내부 의 개인 변수 와 함 수 를 대외 적 으로 노출 하려 면 module.exports 를 통 해 만 이 루어 질 수 있 습 니 다.4.567918.
Q1:같은 wxml 에 여러 개의 wxs 를 도입 하면 같은 이름 의 변수 or 함수 가 존재 한다 면 어떤 표현 일 까요?

// test.wxml
<wxs module="utils" src="../../wxs/test.wxs"></wxs>
<wxs module="utils1" src="../../wxs/test1.wxs"></wxs>
<view> {{utils.msg}} + {{utils.say()}}</view>
<view> {{utils1.msg}} +{{utils1.say()}}</view>

// test.wxs
module.exports = {
  msg: 'hello test.wxs',
  say: function (){
    return 'test.wxs say()'
  }
}
// test1.wxs
module.exports = {
  msg: 'hello test1.wxs',
  say: function (){
    return 'test1.wxs say()'
  }
}
//     
// hello test.wxs + test.wxs say()
// hello test1.wxs + test1.wxs say()

검증 을 통 해 모든 모듈 은 독립 적 인 역할 영역 이 있 음 을 발견 하 였 다.
Q2:.wxs 모듈 에 다른 wxs 파일 모듈 을 도입 하려 면 어떻게 해 야 합 니까?
require 함수 통과 하기

// test.wxs
var test1 = require('./test1.wxs')
module.exports = {
  msg: 'hello test.wxs',
  say: function (){
    console.log(test1.msg)
    return 'test.wxs say()'
  }
}
//      
// [WXS Runtime info] hello test1.wxs 

wxs 주석

// wxml  
<wxs module="utils">
// .wxs-    

/**
 * .wxs-    
 */
 
/*
var a = 1

</wxs>

상기 예 에서 모든 wxs 코드 가 주석 되 었 고 세 번 째 쓰 기 는 비교적 드 물 며 공부 할 때 손 쉽게 기록 하 는 것 을 보 았 다.
.wxs 파일 이 라면 한 줄&여러 줄 두 가지 주석 만 있 습 니 다.
기초 지식
덧셈 연산(+)은 문자열 의 조합 으로 사용 합 니 다.

<wxs module="utils">
module.exports = {
  getnum: function () {
    var a = 10
    var b = 20
    var str = a + '+' + b + '=' + (a+b) 
    return str
  }
}
</wxs>
<view>{{utils.getnum()}}</view>

'맞 춤 연산 자'를 사용 할 수 없습니다.그렇지 않 으 면 잘못 보고 할 수 있 습 니 다.

wxs 는 현재 다음 과 같은 몇 가지 데이터 형식 을 지원 합 니 다.
number(수치),string(문자열),boolean(불 값),array(배열),object(대상),function(함수),date(날짜),regexp(정규)
wxs 데이터 형식 에 null/undefined 가 없습니다.
date 대상 을 만 들 려 면 getDate()를 사용 하여 현재 시간의 대상 을 되 돌려 야 합 니 다.

<wxs module="utils">
module.exports = {
  getNowTime: function () {
    return getDate()
  }
}
</wxs>
<view>{{utils.getNowTime()}}</view>
//     
// Sat May 01 2021 14:42:57 GMT+0800 (      )

new Date()를 사용 할 수 없습니다.오류 가 발생 할 수 있 습 니 다.

es6 문법 은 지원 되 지 않 습 니 다.재 구성 같은 화살표 함 수 는 지원 되 지 않 습 니 다.
let/const 를 사용 하여 변 수 를 설명 할 수 없고 var 를 사용 해 야 하 며 변수 가 증가 합 니 다.

<wxs module="utils">
module.exports = {
  getnum: function () {
    let a = 10
    return a
  }
}
</wxs>
<view>{{utils.getnum()}}</view>

응용 장면
일반적으로 백 엔 드 가 전단 에 되 돌아 오 는 것 은 시간 스탬프 형식 이지 만,우 리 는 원 하 는 시간 형식 으로 처리 해 야 합 니 다.예 를 들 어 yyy-mm-dd,이때 우 리 는 wxs 로 시간 변환 함 수 를 호출 할 수 있 습 니 다.
아마도 누군가가 물 어 볼 것 이다.js 에서 하나의 함수 로 데 이 터 를 포장 한 다음 에 페이지 에 출력 해도 되 지 않 겠 는가?답 은 실행 가능 하 다.단지 네가 상대 적 으로 더 우수 하 다 고 생각 하 는 것 을 추구 하고 있 을 뿐이다.

<wxs module="utils">
module.exports = {
  formatTime: function (timeStamp) {
    var now = getDate(parseInt(timeStamp))
    var year = now.getFullYear()
    var month = now.getMonth()+1 
    month = month < 10 ? '0' + month: month
    var day = now.getDate()
    day = day < 10 ? '0' + day :day
    return year + '-' + month + '-' + day 
  }
}
</wxs>
<view>{{utils.formatTime(1619852841428)}}</view>
//     
// 2021-05-01

때로는 배경 에서 돌아 오 는 네트워크 그림 주 소 는 상대 적 인 경로 이 고,때로는 완전한 그림 경로 이다.그림 을 표시 하려 면 설 정 된 도 메 인 이름 접 두 사 를 붙 여야 한다.

<wxs module="utils">
module.exports = {
  getImg: function (url = '') {
    var origin = 'https://xxx.com'
    if (url.indexOf('https') !== -1 || url.indexOf('http') !== -1) {
      return url
    } else {
      return origin + url
    }
  }
}
</wxs>
<image src="{{utils.getImg('/a.png')}}"></image>
// src  
// https://xxx.com/a.png

구덩이 밟 기 기록
wxml 에서 호출 할 때 컴 파일 을 사용 하여 expected LineFeed 가 나 타 났 습 니 다.

솔 루 션:ES6 의 물건 을 모두 ES5 로 바 꾸 고 var 로 설명 합 니 다.
총결산
위 챗 애플 릿 학습 의 wxs 사용 튜 토리 얼 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 wxs 사용 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!