小程序 앱만들기 - 8-1 : wxParse를 이용한 html 출력하기

유튜브 강좌 : youtu.be/MJYEUrchRsQ

 

 

서버에서 오는 항목에는 아래 이미지 처럼 html 데이터들도 존재한다. 

wxParse

미니프로그램에서 html를 출력하기 위해서 지원하는 parse가 있다.

다운로드 및 사용법 : https://github.com/icindy/wxParse

 

적용하기

우선 다운받은 소스를 아래 이미지 처럼 루트에 복사를 하자.

소스처리

detail 페이지 생성 : "pages/search/detail/detail"

 

상단에 WxParse를 선언해주고 

본문에 WxParse.wxParse(변수명, 타입, html 데이타, this 또는 that, 이미지padding) 호출해서 html 데이타를 변환해서 변수에 저장한다.

  - imagePadding은 화면width값과 조절에서 이미지 크기를 조절합니다.(기본값 0, 옵션).

 

함수정의 : wxParse.js

function wxParse(bindName = 'wxParseData', type='html', data='<div class="color:red;">数据不能为空</div>', target,imagePadding) { ... }

const WxParse = require("../../../wxParse/wxParse.js");


  onLoad: function (options) {
    var html_data = `
    <div style="margin-top:10px;">
      <h3 style="color: #000;">h3 style</h3>
      <blockquote>blockquote</blockquote>
      <div style="margin-top:10px;">
        <ul>
          <li style="color: red;">color: red</li>
          <li style="color: blue;">color: blue</li>
          <li style="color: yelloe;">color: yelloe</li>
        </ul>
      </div>
    </div>
    <div style="margin-top:10px;">
	  <h3 style="color: #000;">image</h3>
	  <blockquote>wxParse img</blockquote>
	  <div style="margin-top:10px;">
	    <img src="http://tong.visitkorea.or.kr/cms/resource/74/1998774_image2_1.jpg" alt="">
	  </div>
	</div>
    `;
    WxParse.wxParse('article', 'html', html_data, this, 20); //article변수로 setData()처리  
  },

실행시키면 아래처럼 "article" 변수가 생성되었음을 알수 있다.

레이아웃

<!--pages/search/detail/detail.wxml-->
<import src="../../../wxParse/wxParse.wxml" />

<cu-custom bgColor="bg-green" isBack="{{true}}">
  <view slot="backText">뒤로</view>
  <view slot="content">세부정보</view>
</cu-custom>

<view style="top:{{CustomBar}}px;">
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

스타일시트

/* pages/search/detail/detail.wxss */

@import "/wxParse/wxParse.wxss";

실행화면

사용방법을 알았으니 다음시간에 적용해보자.