Cas WXML de conversion de HTML en applet WeChat

Cet article explique comment convertir du HTML en WXML, qui a une certaine valeur de référence. J'espère qu'il sera utile aux amis qui apprennent le développement d'applets WeChat !

Cas WXML de conversion de HTML en mini-programme WeChat

Bien que le développement du mini-programme WeChat soit davantage orienté vers le front-end développement, mais leurs structures grammaticales sont différentes. Par exemple, wxml est fondamentalement différent du HTML. Prenez la balise a comme exemple. Wxml ne prend pas en charge la balise a. De plus, wxml n'est pas compatible avec le HTML. L'éditeur suivant analysera ce problème et analysera comment convertir le HTML en wxml. . Les étapes spécifiques sont les suivantes :

1. Téléchargez depuis https://github.com/icindy/wxParse

2.1 Introduisez le module WxParse dans le fichier xxx.js que vous devez utiliser

var WxParse = require('../../wxParse/wxParse.js');

2.2 Introduisez WxParse.css dans le Wxss que vous utilisez, qui peut être dans app.wxss Notez qu'il s'agit du app.wxss global

@import "/wxParse/wxParse.wxss";

3.

4. Référence du modèle

var article = &#39;<div>我是HTML代码</div>&#39;;/** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName绑定的数据名(必填) * 2.type可以为html或者md(必填) * 3.data为传入的具体数据(必填) * 4.target为Page对象,一般为this(必填) * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) */var that = this; WxParse.wxParse(&#39;article&#39;, &#39;html&#39;, article, that,5);

Ensuite, je suivrai les étapes ci-dessus pour analyser le cas de l'applet WeChat pour mon blog personnel. Voici la section de téléchargement à titre d'exemple

.

Ma section de téléchargement Il s'agit d'un index et la section de détails sur laquelle vous cliquez pour accéder est une entrée. C'est précisément parce que lorsque je clique pour saisir les détails, les données que je dépose sont dans mon format HTML. Les détails auront des balises telles que p, div et a. Ce n'est pas l'effet dont nous avons besoin pour convertir. dans le mini programme correspondant.

1. J'ai mis le dossier wxParse téléchargé dans mon projet. Il me suffit de mettre le répertoire wxParse ici. Si vous regardez l'image, vous constaterez qu'il s'agit d'un répertoire au même niveau que les pages.

2. Je l'ai introduit dans la page que je dois afficher : var WxParse = require('../../wxParse/wxParse.js'); Parce que je n'ai pas besoin de tout styliser, je avoir le wxParse.wxss global Je viens de commenter.

3. Cette étape est l'étape la plus critique et la plus importante, la liaison des données. Étant donné que toutes mes données sont des données réelles extraites de la base de données, cela implique de charger les données des clics de liste pour détailler les événements. Si vous êtes intéressé, vous pouvez lire « Comment charger des données réelles de la base de données dans l'applet WeChat ». Toutes mes liaisons de données sont en fait le contenu.

//这里data中article为bindName<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

4. Référencez les données qui viennent d'être liées dans le modèle dont j'ai besoin, c'est-à-dire

 var article = res.data.content;//article是取到的数据
 var that = this;
 WxParse.wxParse('article', 'html', article, that, 5);

dans Entry.wxml. L'effet final est le suivant

.

Pour plus de tutoriels de développement d'applets WeChat, veuillez faire attention au

Site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!