热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序和H5的秘密

如何使微信小程序解析H5文件前段时间,终于千呼万唤出来的微信小程序,可谓是坑苦了广大程序猿了.下面将就我所遇到的问题做一个总结由于微信的编写文件不再是html格式,所以也无法解析h

如何使微信小程序解析 H5文件

前段时间,终于千呼万唤出来的微信小程序,可谓是坑苦了广大程序猿了.下面将就我所遇到的问题做一个总结

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

API返回的数据:
API数据

注意:
message 对应的 value 值 为

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

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

  1. 下载官方demo
  2. 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 = '
我是HTML代码
'
;
/**
* 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('article', 'html', article, that,5);

4.你已成功,不信你看模拟器
成功解析


推荐阅读
author-avatar
洗吉精洗白菜_773
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有