위챗 미니 프로그램 WXS 사용법

이 기사의 내용은 WeChat 애플릿 WXS를 사용하는 방법에 대한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되길 바랍니다.

며칠 전 한 반 친구가 저에게 WeChat 애플릿이 파이프라인 필터를 지원하나요?라고 물었습니다.
Angular나 Vue를 사용해 본 학생들은 프로젝트에서 필터를 사용할 수 있어야 하지만 미니 프로그램에서는 지원되지 않습니다. 하지만 몇 가지 해결책이 있습니다.
하지만 WXS가 필터를 구현할 수 있는지 여부와 그 밖의 어떤 기능을 수행할 수 있는지에만 관심이 있습니다. 그런 의문을 품고 위챗 미니 프로그램의 공식 WXS를 다시 읽어보았습니다.

다음은 간단한 예입니다.

<wxs>var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>

위의 예는 공식 문서를 다 읽고 나면 미니 프로그램의 스크립트 언어 기능이 매우 까다롭다는 것을 알 수 있습니다. 예를 들어, es5 구문만 지원합니다. js 등의 외부 도입은 지원되지 않습니다. 하지만 앞으로도 더 많은 기능을 지원할 수 있기를 기대합니다.

본문으로 가서 기사 제목에 대한 질문을 살펴보겠습니다

1. WXS를 사용하여 필터 구현

프론트 엔드에는 일반적으로 백그라운드에서 전송된 타임스탬프를 변환하는 요구 사항이 있습니다. 사양이 다른 날짜로 변환하여 표시합니다. 과거의 관행은 데이터를 함수로 래핑한 다음 페이지에 출력하는 것이었습니다. 앞서 언급한 기사에서 언급한 첫 번째 방법과 마찬가지로 일부 사람들은 성능 문제를 고려하여 js의 루프 처리가 더 성능 집약적이라고 생각합니다(이에 대해서는 언급하지 않겠습니다. 실제로 테스트하지는 않았습니다)
예제 날짜 형식은 이전에 언급한 기사에서 이미 사용 가능합니다. 여기서는 더 간단한 예를 들어보겠습니다. 제가 개발한 프로젝트에서 백그라운드에서 반환되는 인터넷 이미지 주소는 일반적으로 상대 주소입니다. 즉, 이미지를 표시하려면 구성된 도메인 이름 접두어를 추가해야 합니다. 나는 보통 데이터를 얻은 후 데이터를 탐색하고 프런트 엔드에 표시해야 하는 그림에 접두사를 추가합니다. 하지만 WXS를 사용하면 다음과 같은 작업이 가능합니다.

<wxs>
    function getFullPath(url) {
        return "https://shiyuanjieyi.cn" + url
    }
    module.exports.getFullPath = getFullPath
</wxs>
<image></image>

위의 예에서 전체 프로세스는 기본적으로 vue와 같은 프레임워크의 사용자 정의 필터링 방식과 유사하다는 것을 알 수 있습니다.

2. WXS가 할 수 있는 다른 기능

사실 우리는 WXS가 더 많은 조건부 렌더링을 수행할 수 있다는 사실을 모르는 경우가 많습니다. 다음 예를 살펴보세요.

<wxs>
  function getData(entry, type) {
    var imgUrl = '';
    var content = '';
    switch (entry) {
      case 'needs':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有需求';
        break;
      case 'goods':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有商品';
        break;
      case 'activity':
        imgUrl = '/images/activity_empty.png';
        content = '该专栏暂时没有活动';
        break;
      case 'channel':
        imgUrl = '/images/article_empty.png';
        content = '该专栏暂时没有资讯';
        break;
      case 'micro-circle':
        imgUrl = '/images/article_empty.png';
        content = '没有相关的话题哦';
        break;
      case 'needs-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何需求哦';
        break;
      case 'goods-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何商品哦';
        break;
      case 'goods-collection':
        imgUrl = '/images/goods_collect_empty.png';
        content = '你还没有收藏任何商品哦';
        break;
      case 'apply':
        imgUrl = '/images/activity_apply_empty.png';
        content = '你还没有报名任何活动哦';
        break;
      case 'activity-collection':
        imgUrl = '/images/activity_collect_empty.png';
        content = '你还没有收藏任何活动哦';
        break;
      default:
        break;
    }
    if (type === 'image') {
      return imgUrl;
    } else {
      return content;
    }
  }
  module.exports.getData = getData;
</wxs>
<template>
  <view>
    <image></image>
    <view>{{filter.getData(entry, 'content')}}</view>
  </view>
</template>

위 예에서는 조건부 판단을 내리고 해당 템플릿 출력을 얻는 데 도움이 되는 WXS의 함수 기능을 사용했습니다. 그 기능은 빈 데이터 표시 페이지입니다. 어쩌면 이렇게 글을 쓰면 어떤 이점이 있는지 물어볼 것입니까?
그러면 확장하기 쉽다고 말씀드릴 수 있습니다. 예를 들어 새 페이지에 해당하는 빈 데이터 템플릿이 필요한 경우 스위치 문에 다른 사례를 추가하면 됩니다. 더욱이 로직을 WXML로 작성하면 코드가 매우 복잡해지고 이해하기 어려울 것입니다.
이를 이해하면 WXML에 대한 논리적 판단이 필요한 작업은 모두 WXS로 대체될 수 있다는 것을 알게 될 것입니다.
즉, 개발 중에 우리 모두는 WXS의 기능을 사용하여 WXML에서 렌더링된 일부 뷰를 명확하고 효과적으로 처리할 수 있습니다.

3. 생각(확장자)

1. 필터 형식으로 작성해야 하는 WXS는 .wxs 파일로 작성하는 것이 가장 좋습니다. 사용해야 할 경우 해당 WXML에 직접 인용하면 됩니다. .

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<wxs></wxs>
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

2. .wxs 모듈에서 다른 wxs 파일 모듈을 참조하려면 require 함수를 사용할 수 있지만 다른 js 파일 모듈은 참조할 수 없습니다.

이 기사의 참고 자료: WeChat Mini 프로그램 개발에 대한 기본 튜토리얼 https://www.html.cn/study/20.html

위 내용은 위챗 미니 프로그램 WXS 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!