Le mini programme prend en charge natif le rendu HTML et peut essentiellement remplacer wemark. Il est recommandé de l'utiliser. Cette bibliothèque est en mauvais état et n'est actuellement pas en maintenance. Veuillez l'utiliser avec prudence.
Utilisé pour restituer le texte Markdown dans les mini-programmes.
Avant la naissance des mini-programmes, le rendu Markdown nécessitait généralement une analyse en HTML, puis le rendu du HTML analysé. Cependant, les mini-programmes ne fournissent pas de fonctions de rendu HTML. Par conséquent, avant la naissance de wemark, presque toutes les bibliothèques de rendu Markdown ne pouvaient pas fonctionner correctement avec les mini-programmes.
wemark peut restituer le contenu Markdown dans le cadre d'un petit programme et prend en charge la plupart des fonctionnalités Markdown, notamment les images et les tableaux.
rich-text
natifwemark
dans le répertoire racine du mini programmewemark
dans le fichier de configuration de la page {
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}
<wemark md="{{md}}" link highlight type="wemark"></wemark>
Le code détaillé peut être trouvé dans le répertoire
demo
, qui est un projet complet de petit programme "extrait de code". Vous pouvez exécuternpm run copy
dans le répertoire racine de wemark, puis l'ajouter à "l'extrait de code" des outils de développement WeChat pour plus d'expérience. .
Description du paramètre :
md
, obligatoire, chaîne Markdown qui doit être rendue ;link
, s'il faut analyser le lien. S'il est analysé, il sera affiché à l'aide du composant navigator
du mini programme, qui peut false
dans le mini programme.highlight
, s'il faut mettre en surbrillance le code, la valeur par défaut est false
;type
, méthode de rendu, wemark
utilisera la structure de données et le modèle de wemark
pour le rendu, rich-text
utilisera le composant rich-text
intégré au mini-programme pour le rendu (les sauts de liens et les vidéos ne sont pas pris en charge).Remarque : La mise en évidence du code augmentera le nombre de balises et la quantité de données analysées, ce qui peut entraîner des problèmes de performances de rendu. Veuillez l'utiliser de manière appropriée en fonction des besoins réels.
mpvue prend en charge l'introduction de composants personnalisés WeChat. Vous pouvez ajouter une configuration dans le fichier .js
de la page, référencer wemark
, puis utiliser wemark
directement dans template
du fichier .vue
:
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
}
< wemark :md =" md " link highlight type =" wemark " > </ wemark >
Remarque : Afin de permettre à mpvue de conditionner
wemark
dans le répertoiredist
lors du packaging, il est recommandé de placerwemark
dans le répertoirestatic
du code source.
Le répertoire mpvue
de ce projet contient un projet de démonstration d'applet mpvue complet. Vous pouvez exécuter npm run copy
dans le répertoire racine wemark
, puis l'ouvrir et l'utiliser dans les outils de développement WeChat.
Apportez les modifications suivantes au projet taro existant :
wemark
dans le répertoire src
, c'est-à-dire src/wemark
wemark
à copier lors de la compilation, modifiez config/index.js
et ajoutez wemark
à l'élément de paramètre copy
. La référence est la suivante : copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,
remarkable.js
lors de la compilation et continuez à modifier config/index.js
. weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}
wemark
dans la page, tel que 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
(projets dactylographiés uniquement) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
}
Le répertoire taro
de ce projet contient un projet de démonstration complet de l'applet taro. Vous pouvez exécuter npm run copy
dans le répertoire racine wemark
, puis l'ouvrir et l'utiliser dans les outils de développement WeChat.
Un merci spécial à @Songkeys pour le suivi de l'utilisation du taro tout au long du processus. Voir #36 pour plus de détails.
npm install
npm test
MIT
Si vous utilisez également wemark, veuillez soumettre un PR pour ajouter votre propre mini-programme à la liste.
rich-text
à l'aide des composants de texte enrichi du mini-programmevideo[poster]
pour ajouter l'image de couverture vidéo n°15 par @kilik52widthFix
et ne calcule plus dynamiquement la hauteur #11 #12~~deleted~~
)