mp html 다운로드 mp html 소스 코드 다운로드

mp html

기타 리소스

v2.5.0

다운로드

MP-HTML

강력한 애플릿 풍부한 텍스트 구성 요소

기능적 소개

여러 주류 애플릿 플랫폼 및 uni-app 에서 사용합니다
풍부한 태그를 지원합니다 ( table , video , svg 등 포함)
풍부한 이벤트 효과를 지원합니다 (사진의 자동 미리보기, 링크 처리 등).
자리 표시 자지도의 지원 (로드, 오류, 미리보기)
앵커 포인트 점프, 긴 프레스 및 사본과 같은 풍부한 기능을 지원합니다.
대부분의 HTML 엔티티를 지원합니다
풍부한 플러그인 (키워드 검색, 컨텐츠 편집, latex 공식 등)
고효율, 강한 결함 공차 및 경량 ( ≈25KB , 9KB gzipped )

자세한 내용을 알아 보려면 기능 소개를보십시오

사용 방법

기본 플랫폼

npm 방법
1. 프로젝트 디렉토리에 구성 요소 패키지를 설치하십시오
```
npm install mp-html
```
2. 개발자 도구에서使用npm 模块확인하십시오 (옵션이없는 경우 필요하지 않은 경우) 및工具- 构建npm
3. 페이지를 사용해야하는 json 파일을 추가하십시오.
```
{
  "usingComponents" : {
    "mp-html" : " mp-html "
  }
}
```
4. 페이지를 사용해야하는 wxml 파일을 추가하십시오.
```
 < mp-html content =" {{html}} " />
```
5. 페이지를 사용해야하는 js 파일을 추가하십시오.
```
 Page ( {
  onLoad ( ) {
    this . setData ( {
      html : '<div>Hello World!</div>'
    } )
  }
} )
```
소스 코드 방법
1. 해당 플랫폼의 코드 패키지 ( dist/platform )를 소스 코드의 components 디렉토리에 복사하여 mp-html 로 이름을 바꿉니다.
2. 페이지를 사용해야하는 json 파일을 추가하십시오.
```
{
  "usingComponents" : {
    "mp-html" : " /components/mp-html/index "
  }
}
```
다음 단계는 위와 동일합니다

자세한 내용은 빠른 시작을 확인하십시오

Uni-App

소스 코드 방법

소스 코드의 dist/uni-app 의 컨텐츠를 Project Root 디렉토리에 복사하고 플러그인 시장을 통해 직접 소개 할 수 있습니다.

페이지를 사용해야하는 vue 파일 추가

< template >
  < view >
    < mp-html :content = " html " />
  </ view >
</ template >
< script >
  import mpHtml from ' @/components/mp-html/mp-html '
  export default {
    // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
    components : {
      mpHtml
    },
    data () {
      return {
        html : ' <div>Hello World!</div> '
      }
    }
  }
</ script >

npm 방법
1. 프로젝트 디렉토리에 구성 요소 패키지를 설치하십시오
```
npm install mp-html
```
2. 페이지를 사용해야하는 vue 파일 추가
```
< template >
  < view >
    < mp-html :content = " html " />
  </ view >
</ template >
< script >
  import mpHtml from ' mp-html/dist/uni-app/components/mp-html/mp-html '
  export default {
    // 不可省略
    components : {
      mpHtml
    },
    data () {
      return {
        html : ' <div>Hello World!</div> '
      }
    }
  }
</ script >
```
npm 통해 cli 메소드를 사용하여 실행되는 프로젝트를 도입 할 때는 vue.config.js 에서 transpileDependencies 구성해야합니다. 자세한 내용은 #330을 참조하십시오
nvue 에서 사용되는 경우 dist/uni-app/static 디렉토리의 내용을 프로젝트의 static 디렉토리에 복사하면 실행되지 않습니다.

자세한 내용은 빠른 시작을 확인하십시오

구성 요소 속성

재산	유형	기본값	설명
컨테이너 스타일	끈		컨테이너 스타일 (2.1.0+)
콘텐츠	끈		렌더링을위한 HTML 문자열
카피 링크	부울	진실	클릭하면 외부 링크를 자동 복사 할 수 있는지 여부
도메인	끈		기본 도메인 이름 (링크 스티칭 용)
오류 -Img	끈		자리 표시 자 링크 이미지 오류가 발생하면 링크됩니다
게으른로드	부울	거짓	게으른 사진을 활성화할지 여부
로딩 -IMG	끈		이미지 로딩 중에 자리 표시 자 링크
일시 정지-비디오	부울	진실	비디오를 재생할 때 다른 비디오를 자동으로 일시 중지할지 여부
미리보기 IMG	부울	진실	클릭하면 이미지를 자동으로 미리 볼 수 있는지 여부
스크롤 테이블	부울	거짓	수평으로 스크롤 할 수 있도록 각 테이블에 스크롤 레이어를 추가할지 여부
선택 가능	부울	거짓	텍스트를 활성화할지 복사 할 수 있습니다
세트 타이틀	부울	진실	제목 태그의 내용을 페이지 제목으로 설정할지 여부
쇼 -Img-menu	부울	진실	메뉴를 표시하기 위해 이미지를 오랫동안 누를 수 있는지 여부
태그 스타일	물체		태그의 기본 스타일을 설정하십시오
사용중인 상태	부울	거짓	앵커 링크 사용 여부

자세한 내용은 속성을보십시오

구성 요소 이벤트

이름	트리거 타이밍
짐	DOM 트리가로드 될 때
준비가 된	사진이로드되면
오류	렌더링 오류가 발생하면
imgtap	사진이 클릭되면
LinkTap	링크가 클릭되면

자세한 내용은 이벤트를 참조하십시오

API

호출의 구성 요소 인스턴스에 일부 api 방법이 제공됩니다.

이름	효과
~에	앵커 점프 범위를 스크롤 뷰로 제한하십시오
Navigateto	앵커 점프
getText	텍스트 내용을 얻으십시오
getRect	풍부한 텍스트 콘텐츠의 위치와 크기를 얻으십시오
SetContent	풍부한 텍스트 내용을 설정하십시오
imglist	모든 이미지 배열을 얻으십시오
일시 정시도	오디오 및 비디오 재생 일시 중지 (2.2.2+)
SetPlaybackrate	오디오 및 비디오 재생 속도 설정 (2.4.0+)

자세한 내용은 API를 확인하십시오

플러그인 확장

기본 함수 외에도이 구성 요소는 풍부한 확장을 제공하며 필요에 따라 선택할 수 있습니다.

이름	효과
오디오	음악 플레이어
편집 가능한	풍부한 텍스트 편집
이모티콘	이모티콘을 분석하십시오
가장 밝은 부분	코드 블록 강조 표시
가격 인하	마크 다운 렌더링
찾다	키워드 검색
스타일	스타일 태그의 스타일을 일치시킵니다
TXV-Video	Tencent 비디오 사용
IMG 캐시	@pentatea의 이미지 캐시
유액	@zeng-j에 의해 라텍스 공식을 렌더링합니다
카드	@whoooami의 카드 표시

자세한 내용은 플러그인을 확인하십시오

사용 사례

공식적인 예	행복한 쇼핑몰	얼마나 인생	음식 방법 점검	바이무	고전 문학을 읽으십시오

과학 검토	프로그래머의 기술 여행	Diandian 블로그	훌륭한 메모	365 질문	같은 도시의 공유 서적

기술 소스 공유	당신의 코드는 대단합니다	진실	모토니	템플릿 데모	ai wali

위의 순위는 특별한 순서가 아니며 더 눈에 띄는 사용 사례가 수집됩니다 (추가하십시오).

라이센스 및 지원

무료 (상업용 사용 포함),이 구성 요소 MIT 라이센스 복사 또는 수정
생산 환경에서 사용되기 전에 충분한 테스트를 거쳐야합니다. 플러그인 bug 로 인한 손실에 대해서는 책임이 없습니다 (소스 코드를 직접 수정할 수 있음).
저희에게 연락하여 QQ 커뮤니케이션 그룹에 가입하는 것을 환영합니다.
그룹 1 (전체) : 699734691
그룹 2 (전체) : 778239129
그룹 3 : 960265313
지원하다

로그 업데이트

v2.5.0 (20240422)
1. U play 이벤트는 src 및 기타 정보 세부 사항을 추가합니다
2. U preview-img 속성은 base64 이미지 미리보기 세부 사항을 활성화하기 위해 all 에 대한 설정을 지원합니다.
3. U editable 플러그인 단순 모드가 추가됩니다 (텍스트를 클릭하여 직접 편집)
4. U latex 플러그인은 블록 수준 포뮬러 세부 사항을 지원합니다
5. F 일부 경우에 배경 손실 문제를 수정했습니다.
6. F svg 자세히 표시 할 수없는 일부 문제를 수정했습니다.
7. F uni-app 패키지 h5 및 app 종료에서 스타일을 인식 할 수없는 문제를 해결했습니다.
8. F latex 플러그인에서 잘못된 디스플레이 문제를 해결했습니다.
9. F editable 플러그인 테이블을 삭제할 수없는 문제를 수정했습니다.
10. F editable 플러그인 uni-app 패키지 vue3 h5 클릭 이미지 오류 문제를 해결했습니다.
11. F editable 플러그인 uni-app 패키지가 메뉴 표시 줄없이 테이블에서 클릭하는 문제를 수정했습니다.
v2.4.3 (20240121)
1. @whoooami의 A 카드 플러그인 세부 정보
2. F foreignobject svg 세부 사항에 표시되지 않을 수있는 문제를 수정했습니다.
3. F 세부의 테이블 부분에 병합 된 셀의 경우 잘못된 디스플레이 문제를 수정했습니다.
4. F 유효하지 않은 img 태그에서 object-fit 설정하는 문제를 수정했습니다.
5. F latex 플러그인 공식이 라인 세부 사항을 래핑하는 문제를 해결했습니다.
6. F uni-app 패키지 editable 및 audio 플러그인이 공유 될 때 audio 클릭을 편집 할 수 없다는 문제를 해결했습니다. @whoooami의 세부 사항
7. F Alipay 애플릿이 비정상적으로 표시 될 수있는 너비와 높이 그림을 설정 한 문제를 해결했습니다.
8. F uni-app 패키지 WeChat Applet이 일부 경우에 replace of undefined 에 오류가 발생한다는 문제를 해결했습니다.
9. F uni-app 패키지 Kuaishou Mini 프로그램에 자세한 내용이 표시되지 않는 문제를 해결했습니다.
업데이트 안내서는 1.x 의 업그레이드 방법에서 볼 수 있습니다.