wxmlify

Wxmlify

WeChat 미니 프로그램의 서식 있는 텍스트 편집기로 생성된 HTML을 표시하는 데 도움이 되는 가볍고 빠른 플러그인입니다.

참고: WeChat 미니 프로그램의 새 버전은 이미 <rich-text> 서식 있는 텍스트 구성 요소를 제공하지만 당분간은 호환성이 보장되지 않습니다. 여전히 타사 구문 분석 도구가 필요할 수 있습니다.

이점

• 작고 가볍습니다 - 단 2개의 파일, 총 14kb
• 중복되는 스타일이 추가되지 않아 문서 스타일을 사용자 정의하는 데 편리합니다.
• 원본 문서의 font-size , font-weight 등을 유지하도록 지정하는 등 원본 문서 스타일을 선택적으로 유지할 수 있습니다.
• 구문 분석이 더 빠릅니다.
• 사용하기 쉬움
• 사진, 비디오, 테이블 지원

결점

• 서식 있는 텍스트 편집기 로 생성된 HTML 구문 분석을 선호하며 모든 시나리오에 적합하지는 않습니다. 서식 있는 텍스트 편집기에서 생성된 HTML이 특정 사양을 따르기 때문입니다.

사용법(데모)

1. wxmlify 폴더를 weapp 프로젝트에 복사하세요.
2. 서식 있는 텍스트를 표시해야 하는 페이지의 js에 이를 도입하고 새 인스턴스를 만듭니다. 예를 들면 다음과 같습니다.

 // pages/index/index.js

var Wxmlify = require ( '../../wxmlify/wxmlify.js' )

Page ( {
  onLoad ( ) {
    // 以任何方式获得要解析的Html代码
    var html = getHTMLStringSomehow ( ) 

    // new 一个 wxmlify 实例就好了
    var wxmlify = new Wxmlify ( html , this , { } )
  }
} )

3. 해당 페이지 wxml에 템플릿을 추가합니다. 예를 들면 다음과 같습니다.

 <!-- pages/index/index.wxml  -->
< import src =" ../../wxmlify/wxmlify.wxml " />

< template is =" wxmlify " data =" {{nodes: wxmlified}} " > </ template > 

---

문서 보기

건설자

 new Wxmlify ( html , page [ , options ] )

• 매개변수:
  • html: string - 구문 분석할 HTML 코드의 문자열
  • page: 미니 프로그램 페이지 인스턴스 - 즉, 모든 페이지 메소드에서 this 의 포인터입니다.
  • 옵션: 옵션
• 반환 값: 메소드를 호출하는 데 사용되는 wxmlify 인스턴스

옵션

데이터키

• 페이지 데이터에서 구문 분석된 데이터의 키
• 유형: string
• 기본값: 'wxmlified'
• 예를 들어:

 new Wxmlify ( html , this , {
  dataKey : 'myRichText'
} )

이에 따라 wxml에서는 다음과 같습니다.

 < template is =" wxmlify " data =" {{nodes: myRichText}} " > </ template > 

보존 스타일

• 보존할 CSS 스타일 이름(카멜 케이스 형식)
• 유형:
  • 문자열 'all' 은 모든 스타일을 유지한다는 의미입니다.
  • false , 0 , null 과 같은 음수 값은 모든 내장 스타일을 제거함을 의미합니다.
  • ['fontSize', 'fontWeight', 'background'] 와 같은 특정 스타일을 유지하도록 지정하는 배열
• 기본값: 'all' (기본적으로 모든 스타일 유지)

비활성화이미지미리보기

• 이미지 클릭 미리보기 비활성화
• 유형: boolean
• 기본값: false

ImageTap의

• 이미지 클릭 처리 기능
• 유형: function
• 기본값: function() {}

방법

wxmlify.getFullNodes()

• HTML이 구문 분석된 후 json 데이터 구조인 Javascript 배열을 반환합니다.

wxmlify.getHTML()

• 전달된 HTML을 반환합니다.

wxmlify.getImages()

• 모든 이미지의 URL을 포함하는 배열을 반환합니다.

맞춤 스타일

. wxmlified-element {
  /* 修改段落块的样式 */
}

. wxmlified-element . h1 {
  /* 修改原<h1>标签块的样式，其它块级标签同理 */
}

. wxmlified-image {
  /* 修改图片的样式 */
}

. wxmlified-text {
  /* 修改文字节点的样式 */
}

. wxmlified-table . table {
  /* table 的样式 */
  border : 1 rpx solid # acacac ;
}

. wxmlified-table . tr {
  /* tr 的样式 */
  border-bottom : 1 rpx solid # acacac ;
}

. wxmlified-table . tr : last-child {
  border-bottom : 0 ;
}

. wxmlified-table . th , . wxmlified-table . td {
  /* th,td 的样式 */
  border-right : 1 rpx solid # acacac ;
  line-height : 2 ;
}

. wxmlified-table . th : last-child , . wxmlified-table . td : last-child {
  border-right : none;
}

. wxmlified-table . th {
  font-weight : bold;
}

---

? 이 작은 도구는 Chris Andrejewski가 만든 오픈 소스 HTML-to-JSON 파서 히말라야 덕분에 가능해졌습니다.