wemark
1.0.0
Мини-программа имеет встроенную поддержку рендеринга HTML и может по сути заменить wemark. Рекомендуется использовать ее. Эта библиотека находится в аварийном состоянии и в настоящее время не обслуживается. Используйте ее с осторожностью.
Используется для рендеринга текста Markdown в мини-программах.
До появления мини-программ рендеринг Markdown обычно требовал анализа HTML, а затем рендеринга проанализированного HTML. Однако мини-программы не предоставляют функций рендеринга HTML. Поэтому до появления wemark почти все библиотеки рендеринга Markdown не могли корректно работать в мини-программах.
wemark может отображать контент Markdown в небольшой программе и поддерживает большинство функций Markdown, включая изображения и таблицы.
rich-textwemark в корневой каталог мини-программы.wemark в файле конфигурации страницы. {
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}<wemark md="{{md}}" link highlight type="wemark"></wemark>Подробный код можно найти в
demoкаталоге, который представляет собой полный небольшой проект «фрагмента кода». Вы можете запуститьnpm run copyв корневом каталоге wemark, а затем добавить ее в «фрагмент кода» инструментов разработчика WeChat для ознакомления. .
Описание параметра:
md , обязательный, строка Markdown, которую необходимо отобразить;link , анализировать ли ссылку. Если она будет проанализирована, она будет отображаться с помощью компонента navigator мини-программы, который может переходить внутри мини-программы. Значение по умолчанию — false ;highlight , следует ли подсвечивать код, по умолчанию — false ;type , метод рендеринга, wemark будет использовать структуру данных и шаблон wemark для рендеринга, rich-text будет использовать для рендеринга компонент rich-text , встроенный в мини-программу (переходы по ссылкам и видео не поддерживаются).Примечание. Подсветка кода увеличит количество тегов и объем анализируемых данных, что может вызвать проблемы с производительностью рендеринга. Используйте ее по мере необходимости, исходя из реальных потребностей.
mpvue поддерживает внедрение пользовательских компонентов WeChat. Вы можете добавить конфигурацию в файл .js страницы, ссылаться на wemark , а затем использовать wemark непосредственно в части template файла .vue :
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
} < wemark :md =" md " link highlight type =" wemark " > </ wemark >Примечание. Чтобы позволить mpvue упаковать пакет
wemarkв каталогdistпри упаковке, рекомендуется поместитьwemarkвstaticкаталог исходного кода.
Каталог mpvue этого проекта содержит полный демонстрационный проект апплета mpvue. Вы можете запустить npm run copy в корневом каталоге wemark , а затем открыть и использовать ее в инструментах разработчика WeChat.
Внесите следующие изменения в существующий проект taro:
wemark в каталог src , то есть в каталог src/wemark .wemark для копирования во время компиляции, измените config/index.js и добавьте wemark в элемент настройки copy . Ссылка выглядит следующим образом: copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,remarkable.js при компиляции и продолжайте изменять config/index.js . Ссылка выглядит следующим образом: weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}wemark на странице, например src/pages/index/index.js : 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 (только для машинописных проектов) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
} Каталог taro этого проекта содержит полный демонстрационный проект апплета taro. Вы можете запустить npm run copy в корневом каталоге wemark , а затем открыть и использовать ее в инструментах разработчика WeChat.
Особая благодарность @Songkeys за то, что он следил за использованием таро на протяжении всего процесса. Подробности см. в № 36.
npm install
npm test Массачусетский технологический институт
Если вы также используете wemark, отправьте PR, чтобы добавить в список свою собственную мини-программу.
rich-text с использованием компонентов форматированного текста мини-программы.video[poster] для добавления обложки видео №15 от @kilik52.widthFix и больше не вычисляет высоту динамически #11 #12.~~deleted~~ )
