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

angryTom
풀어 주다: 2020-03-06 10:57:15
원래의
6536명이 탐색했습니다.

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

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

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 애플릿 사례를 분석하겠습니다. 내 개인 블로그를 위해 만든, 여기서는 다운로드 섹션을 예로 들어 보겠습니다.

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

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

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

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

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

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

 var article = res.data.content;//article是取到的数据
 var that = this;
 WxParse.wxParse(&#39;article&#39;, &#39;html&#39;, article, that, 5);
로그인 후 복사

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

 <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
로그인 후 복사

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

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

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

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

관련 라벨:
원천:www.100txy.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿