HTML을 WeChat 애플릿으로 변환하는 WXML 사례

이 글은 HTML을 WXML로 변환하는 방법을 소개하는데, 이는 WeChat 애플릿 개발을 배우는 친구들에게 도움이 되기를 바랍니다!

HTML을 WeChat 애플릿으로 변환하는 WXML 사례

WeChat 애플릿 개발은 프런트 엔드 개발에 더 가깝지만 문법 구조는 다릅니다. 예를 들어 wxml은 html과 근본적으로 다릅니다. Wxml은 a 태그를 지원하지 않습니다. 또한 다음 편집기에서는 이 문제를 분석하고 html을 wxml로 변환하는 방법을 분석합니다. . 구체적인 단계는 다음과 같습니다.

1. https://github.com/icindy/wxParse

2.1 사용해야 하는 xxx.js 파일에 WxParse 모듈을 도입합니다.

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

2.2 WxParse.css를 도입합니다. 사용하는 Wxss는 app.wxss에 있을 수 있습니다. 이는 전역 app.wxss

@import "/wxParse/wxParse.wxss";

3입니다. 데이터 바인딩

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);

4. 템플릿 참조

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

위의 단계에 따라 WeChat 애플릿 사례를 분석하겠습니다. 내 개인 블로그를 위해 만든, 여기서는 다운로드 섹션을 예로 들어 보겠습니다.

내 다운로드 섹션은 색인이고 클릭하여 입력하는 세부 정보 섹션은 항목입니다. 세부 사항을 입력하기 위해 클릭하면 세부 사항에 p, div 및 a와 같은 일부 태그가 포함되므로 이는 변환에 필요한 전부가 아닙니다. 해당 미니 프로그램에 wxml 형식을 추가합니다.

1. 다운로드한 wxParse 폴더를 내 프로젝트에 넣었습니다. 여기에 wxParse 디렉터리만 넣으면 됩니다. 그림을 보면 페이지와 같은 수준의 디렉터리라는 것을 알 수 있습니다.

두 번째로 다음을 소개했습니다. var WxParse = require('../../wxParse/wxParse.js'); 모든 스타일이 필요하지 않기 때문에 필요한 페이지에서 전역 wxParse.wxss를 주석 처리했습니다. 표시하다.

3. 이 단계는 가장 중요하고 중요한 단계인 데이터 바인딩입니다. 내 모든 데이터는 데이터베이스에서 가져온 실제 데이터이기 때문에 목록 클릭에서 세부 이벤트까지 데이터를 로드하는 작업이 포함됩니다. 관심이 있는 경우 "WeChat 애플릿의 데이터베이스에서 실제 데이터를 로드하는 방법"을 읽어보세요. 내 모든 데이터 바인딩은 실제로 콘텐츠입니다.

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

4. 필요한 템플릿에 바인딩된 데이터를 참조하세요(entry.wxml

 <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

최종 효과는 다음과 같습니다).

더 많은 WeChat 애플릿 개발 튜토리얼을 보려면 주의하세요PHP 중국어 웹사이트 .

위 내용은 HTML을 WeChat 애플릿으로 변환하는 WXML 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!