WeChat 애플릿 구문 분석 H5 파일 방법-미니 프로그램 개발-php.cn

WeChat 애플릿 구문 분석 H5 파일 방법

PHPz

풀어 주다： 2017-05-01 11:02:44

원래의

4975명이 탐색했습니다.

요약: 네티즌들은 WeChat 애플릿이 H5 파일을 구문 분석하거나 H5 웹 페이지를 앱에 캡슐화하는 방법을 자주 묻습니다. 공식적인 답변은 다음과 같았기 때문에 처음에는 불가능하다고 생각했습니다. 각 미니 프로그램 페이지는 index.js, index.wxm...

와 같이 동일한 경로에 동일한 이름을 가진 4개의 서로 다른 접미사 파일로 구성됩니다.

네티즌들은 종종 어떻게 해야 하는지 묻습니다. WeChat 애플릿이 H5 파일을 구문 분석하거나 H5 웹 페이지를 APP에 캡슐화하도록 하시겠습니까? 처음에는 불가능하다고 생각했습니다. 공식 답변은 다음과 같았습니다.
각 미니 프로그램 페이지는 동일한 구성으로 생성됩니다. index.js, index.wxml, index.wxss, index.json과 같이 경로 아래에 동일한 이름을 가진 4개의 서로 다른 접미사 파일이 있습니다. .js 접미사가 있는 파일은 스크립트 파일이고, .json 접미사가 있는 파일은 구성 파일이며, .wxss 접미사가 있는 파일은 스타일 시트 파일이고, .wxml 접미사가 있는 파일은 페이지 구조 파일입니다.

위의 의미는 이미 매우 명확합니다. 번역은 다음과 같습니다.

.js는 javascript입니다

经常有网友问怎么让微信小程序解析H5文件或者类似封装H5网页到APP里面？我一开始觉得这是不可能的，因为官方的解答是这样的：

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

上面的意思就已经很清楚了。翻译过来就是：

.js就是javascript
.wxss相当于css
.wxml相当于html

然而，wxml与wxss的语法是微信自己定义，不同于html与css语法。既然语法都不一样，微信小程序自然无法加载H5页面。微信只能加载在工程内已经注册的page页面，无法打开外部链接，只能从服务器抓取数据

前段时间,由于微信的编写文件不再是html格式,所以也无法解析 html代码,这个着实令人难过. 我在用网上的API接口获取数据时, 遇到了一个大坑, 那就是 API返回的数据竟然是含有标签的字符串, 让我无从下手, 在尝试过正则失败后, 不断在网上看有没有可以解析的插件, 终于让我找到了, 那就是wxParse-微信小程序富文本解析组件, 它支持Html及markdown转wxml可视化, 下面不多说, 代码贡献上:

API返回的数据:
WeChat 애플릿 구문 분석 H5 파일 방법

注意:
message 对应的 value 值为

[AppleScript]

"<h2>材料 </h2><hr>  \n<p>雪梨一个、冰糖适量、牙签几根</p>   <h2>做法 </h2><hr>  \n<p>1、雪梨洗好，用刀切去尾部，用勺子挖出梨核，最好挖干净，不然影响口感。 </p> \n<p>2、放几颗冰糖进去，插几根牙签，隔水蒸30分钟左右就OK了。</p>",
      "name": "冰糖雪梨"

로그인 후 복사

这个小程序是无法解析的, 所以, 重点来了.
wxParse-微信小程序富文本解析组件, 通过这个组件, 小程序就可以解析部分的 html文件还包括表情包哦, 下面是大礼包, 我将演示如何使用:

下载官方demo
Copy文件夹wxParse,与 pages文件目录同级

//wxParse目录
- wxParse/
  -wxParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -wxDiscode.js(必须存在)
  -wxParse.wxml(必须存在)
  -wxParse.wxss(必须存在)
  -emojis(可选)

로그인 후 복사

3.引入必要文件

3.1 在目标 wxml文件中添加以下代码

<import src="../../wxParse/wxParse.wxml"/> 
<view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

로그인 후 복사

3.2 在 wxss文件中添加以下代码(可以是全局wxss,也可以是目标的 wxss文件)

@import "/wxParse/wxParse.wxss";

로그인 후 복사

3.3 数据绑定(在目标的 js文件中添加)

//在 onLoad 函数里添加哦,
var article = &#39;<p>我是HTML代码</p>&#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.你已成功,不信你看模拟器
WeChat 애플릿 구문 분석 H5 파일 방법

.wxss는 CSS와 동일합니다.
.wxml은 동일합니다. HTML로

그러나 wxml과 wxss의 구문은 WeChat 자체에서 정의되어 있어 html 및 css의 구문과 다릅니다. 구문이 다르기 때문에 WeChat 애플릿은 H5 페이지를 로드할 수 없습니다. WeChat은 프로젝트에 등록된 페이지만 로드할 수 있고, 외부 링크는 열 수 없으며, 서버에서만 데이터를 크롤링할 수 있습니다.

얼마 전WeChat에서 작성한 파일이 더 이상 html 형식이 아니기 때문에 html 코드를 파싱할 수 없습니다. 정말 안타깝습니다. 온라인 API 인터페이스를 사용하여 데이터를 얻었을 때 API에서 반환된 데이터가 레이블이 포함된 문자열로 판명되어 파싱할 수 없게 되었습니다. 정규식을 시도했지만 실패한 후 계속 온라인에서 구문 분석할 수 있는 플러그인이 있는지 알아보고 마침내 찾았습니다. 바로 wxParse-WeChat 애플릿 서식 있는 텍스트 구문 분석 구성 요소, wxml 시각화로의 Html 및 마크다운 변환을 지원합니다. 아래에 말할 내용은 많지 않습니다. 코드 기여:

API에서 반환된 데이터:
WeChat 애플릿 구문 분석 H5 파일 방법

참고:
메시지에 해당하는 값은

[AppleScript] 안돼요

이 작은 프로그램은 구문 분석할 수 없으므로 여기에 핵심 사항이 있습니다.
wxParse-WeChat 애플릿 서식 있는 텍스트 구문 분석 구성 요소를 통해 애플릿은 일부 HTML 파일을 구문 분석할 수 있습니다. 다음은 이모티콘을 포함한 선물 패키지입니다. 사용 방법을 보여드리겠습니다.