WeChat 애플릿이 H5 파일을 구문 분석하도록 만드는 방법-미니 프로그램 개발-php.cn

WeChat 애플릿이 H5 파일을 구문 분석하도록 만드는 방법

巴扎黑

풀어 주다： 2017-04-30 10:16:02

원래의

2165명이 탐색했습니다.

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

와 같이 동일한 경로에 동일한 이름을 가진 4개의 서로 다른 접미사 파일로 구성됩니다. 네티즌들은 WeChat 애플릿이 H5 파일을 구문 분석하거나 H5 웹 페이지를 앱에 유사하게 캡슐화하는 방법을 자주 묻습니다. 처음에는 불가능하다고 생각했습니다. 공식 답변은 다음과 같았습니다.
각 미니 프로그램 페이지는 동일한 구성으로 생성됩니다. 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] 일반 텍스트 보기 코드 복사rrreee

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