提供微商城·微分销·小程序开店需求
5分钟开通你的微信商城店铺!2017-06-05 作者:杨先生
经常有网友问怎么让微信小程序解析H5文件或者类似封装H5网页到APP里面我一开始觉得这是不可能的因为官方的解答是这样的 每一个小程序页面是由同路径下同名的四个不同后缀文件的组成如index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件.json后缀的文件是配置文件.wxss后缀的是样式表文件.wxml后缀的文件是页面结构文件。 上面的意思就已经很清楚了。翻译过来就是
然而wxml与wxss的语法是微信自己定义不同于html与css语法。既然语法都不一样微信小程序自然无法加载H5页面。微信只能加载在工程内已经注册的page页面无法打开外部链接只能从服务器抓取数据
前段时间,由于微信的编写文件不再是html格式,所以也无法解析 html代码,这个着实令人难过. 我在用网上的API接口获取数据时, 遇到了一个大坑, 那就是 API返回的数据竟然是 含有标签的字符串, 让我无从下手, 在尝试过正则失败后, 不断在网上看有没有可以解析的插件, 终于让我找到了, 那就是wxParse-微信小程序富文本解析组件, 它支持Html及markdown转wxml可视化, 下面不多说, 代码贡献上:
API返回的数据:
![]()
注意:
message 对应的 value 值 为
[AppleScript] 纯文本查看 复制代码
"材料 \n 雪梨一个、冰糖适量、牙签几根 做法 \n1、雪梨洗好用刀切去尾部用勺子挖出梨核最好挖干净不然影响口感。 \n2、放几颗冰糖进去插几根牙签隔水蒸30分钟左右就OK了。 ","name": "冰糖雪梨"
这个小程序是无法解析的, 所以, 重点来了.
wxParse-微信小程序富文本解析组件, 通过这个组件, 小程序就可以解析部分的 html文件 还包括 表情包哦, 下面是大礼包, 我将演示如何使用:
//wxParse目录 - wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存在) -emojis(可选)
3.引入必要文件
3.1 在目标 wxml文件中添加以下代码
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.你已成功,不信你看模拟器
![]() |
推荐文章
微信小程序滚动字幕已经是当下微信小程序开发最热门的话题,下面将从多方面来谈谈微信小程序滚动字幕及弹幕的实现技巧...
2017年6月14日,微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。...
最近在微信社群都可以看到拼多多的拆红包的界面,这又是一款拼多多的裂变营销方式,很多朋友对此表示很怀疑,到底是不...
Hishop最新消息,有这样一个小程序可以无需询问,就知道朋友的位置了,那么是如何定位分享位置的呢。...
目前最好最受欢迎的收银系统品牌有HiShop友数、商米等,每个品牌都有各自的特点和主要发展的行业,下面小编就为大家来介...
餐饮行业是国内规模万亿级别的市场,如今市面上的餐饮品牌门店数不胜数,在如今这个互联网时代,许许多多餐饮门店都开...
连锁超市在选择收银系统的时候,首先会考虑到收银系统的操作便捷,能够给收银员的工作提升效率的同时,避免出现错误,...
超市收银系统百科 超市收银系统是零售业中用于处理销售交易的关键技术,它不仅提高了结账效率,还增强了顾客的购物体...
酒吧收银系统百科 1. 酒吧收银系统概述 酒吧收银系统是专为酒吧、夜店等娱乐场所设计的一套集成化管理软件,它能够实现...
生鲜超市收银系统十大品牌有哪些呢?下面小编就为大家来讲解一下各收银系统的特...