wemark
1.0.0
미니 프로그램은 HTML 렌더링을 기본적으로 지원하므로 기본적으로 wemark를 대체할 수 있으므로 사용을 권장합니다. 이 라이브러리는 파손되어 현재 유지 관리 중이 아닙니다. 주의해서 사용하세요.
미니 프로그램에서 Markdown 텍스트를 렌더링하는 데 사용됩니다.
미니 프로그램이 탄생하기 전에는 마크다운 렌더링을 위해서는 일반적으로 HTML로 구문 분석한 다음 구문 분석된 HTML을 렌더링해야 했습니다. 하지만 미니 프로그램은 HTML 렌더링 기능을 제공하지 않습니다. 따라서 wemark가 탄생하기 전에는 거의 모든 Markdown 렌더링 라이브러리가 미니 프로그램에서 제대로 작동하지 않았습니다.
wemark는 작은 프로그램으로 Markdown 콘텐츠를 렌더링할 수 있으며 그림, 표를 포함한 대부분의 Markdown 기능을 지원합니다.
rich-text 사용한 렌더링 지원wemark 디렉터리를 다운로드하여 미니 프로그램의 루트 디렉터리에 복사하세요.wemark 구성 요소를 참조하세요. {
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}<wemark md="{{md}}" link highlight type="wemark"></wemark>자세한 코드는 완전한 작은 프로그램 "코드 조각" 프로젝트인
demo디렉토리에서 찾을 수 있습니다. wemark 루트 디렉토리에서npm run copy실행한 다음 WeChat 개발자 도구의 "코드 조각"에 추가하여 경험해 볼 수 있습니다. .
매개변수 설명:
md , 필수, 렌더링해야 하는 마크다운 문자열;link , 링크를 구문 분석할지 여부입니다. 구문 분석되면 미니 프로그램 내에서 이동할 수 있는 미니 프로그램 navigator 구성 요소를 사용하여 표시됩니다. 기본값은 false 입니다.highlight , 코드를 강조할지 여부, 기본값은 false 입니다.type , 렌더링 방법, wemark 렌더링을 위해 wemark 의 데이터 구조와 템플릿을 사용하고, rich-text 렌더링을 위해 미니 프로그램에 내장된 rich-text 구성 요소를 사용합니다(링크 점프 및 비디오는 지원되지 않음).참고: 코드 강조 표시를 하면 태그 수와 구문 분석되는 데이터의 양이 늘어나 렌더링 성능 문제가 발생할 수 있으므로 실제 필요에 따라 적절히 사용하십시오.
mpvue는 WeChat 사용자 정의 구성 요소의 도입을 지원합니다. 페이지의 .js 파일에 구성을 추가하고 wemark 참조한 다음 .vue 파일의 template 부분에서 직접 wemark 사용할 수 있습니다.
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
} < wemark :md =" md " link highlight type =" wemark " > </ wemark >참고: 패키징 시 mpvue가
wemark패키지를dist디렉터리에 패키징할 수 있도록 하려면 소스 코드의static디렉터리에wemark배치하는 것이 좋습니다.
이 프로젝트의 mpvue 디렉토리에는 완전한 mpvue 애플릿 데모 프로젝트가 포함되어 있습니다. wemark 루트 디렉토리에서 npm run copy 실행한 다음 WeChat 개발자 도구에서 열어 사용할 수 있습니다.
기존 taro 프로젝트에서 다음과 같이 수정합니다:
wemark src 디렉터리, 즉 src/wemark 디렉터리에 넣습니다.wemark 디렉터리를 설정하고 config/index.js 수정한 후 copy 설정 항목에 wemark 추가합니다. 참고 사항은 다음과 같습니다. copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,remarkable.js 무시하도록 taro를 설정하고, config/index.js 계속 수정합니다. 참고 사항은 다음과 같습니다. weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}src/pages/index/index.js 와 같은 페이지에 wemark 도입하고 사용하세요. config = {
navigationBarTitleText : '首页' ,
usingComponents : {
wemark : '../../wemark/wemark'
}
}
state = {
md : '# headingnnText'
}
//...
render ( ) {
return (
< View className = 'index' >
< wemark md = { this . state . md } link highlight type = 'wemark' />
</ View >
)
}global.d.ts 에 다음을 추가합니다(typescript 프로젝트에만 해당). declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
} 이 프로젝트의 taro 디렉토리에는 완전한 taro 애플릿 데모 프로젝트가 포함되어 있습니다. wemark 루트 디렉토리에서 npm run copy 실행한 다음 WeChat 개발자 도구에서 열어 사용할 수 있습니다.
프로세스 전반에 걸쳐 타로 사용에 대해 후속 조치를 취해주신 @Songkeys에게 특별히 감사드립니다.
npm install
npm test MIT
위마크도 사용하신다면 PR을 제출해 자신만의 미니 프로그램을 목록에 추가해 주세요.
rich-text 렌더링 지원video[poster] 속성을 사용하여 @kilik52의 비디오 표지 이미지 #15 추가 지원widthFix 모드를 사용하며 더 이상 높이를 동적으로 계산하지 않습니다 #11 #12~~deleted~~ )
