uniapp에서 미니 프로그램의 wxml-to-canvas 플러그인을 사용하는 방법

이번 글에서는 uniapp 미니 프로그램의 wxml-to-canvas 플러그인을 주로 사용하는 방법을 설명하고, wxml-to-canvas가 데이터를 동적으로 전송하는 방법과 주의할 점에 대해서는 다음 글에서 자세히 설명하도록 하겠습니다.

1-wxml-to-canvas 정보

공식 홈페이지 주소 : wxml-to-canvas | 위챗 오픈 문서

wxml-to-canvas를 사용하는 주요 기능은 실제로 포스터를 생성하는 것입니다. 공식 웹사이트에는 정적 포스터를 생성하는 데모 데모가 있으며 직접 다운로드할 수 있습니다.

2-uniapp에서의 사용방법에 대해

미니 프로그램에서 정상적으로 사용하려면 미니 프로그램에 npm을 설치하기만 하면 됩니다. 미니 프로그램은 miniprogram_npm을 빌드합니다.

하지만 uniapp에서는 npm을 사용하여 다운로드한 콘텐츠가 큰 디렉터리의 node_modules 아래에 있으므로 패키징 후에는 빌드할 수 없으므로 방법은 다음과 같습니다.

1.  uniapp 프로젝트에 wxcomComponents 폴더 빌드
2. WeChat 애플릿의 공식 wxml-to-canvas 코드 조각을 다운로드하고 두 구성 요소를 우리가 직접 만든 wxcomComponents의 자체 구성 요소 에 복사합니다.
3. wxml-to-canvas index.js 수정

   module.exports = require("widget-ui");
   改为
   module.exports = require("../widget-ui/index.js");

4. globalStyle에서 전역 구성 요소 구성

   	"usingComponents":{
   			"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
   		}

   이렇게 나머지 사용법은 미니프로그램에서 wxml-to-canvas를 사용하는 것과 일치하도록 구성되어 있으니 공식 홈페이지를 참고하시면 됩니다.

다음 기사에서는 wxml-to-canvas에서 wxml 및 스타일을 동적으로 생성하는 방법을 소개합니다.

모두 행복한 삶을 누리시길 바랍니다! ~