wxparse使用(富文本插件)

摘要:
优点:唯一已知的可以将HTML转换为小程序识别的插件缺点:转换HTML标签可能需要大量的微信小程序标签和样式配置:步骤1,下载https://github.com/icindy/wxParse第二步:把它放到项目中。我选择页面目录。步骤3:配置wxml以添加:需要时使用:

优点:目前已知唯一可以转化HTML到小程序识别的插件

缺点:转换一个HTML标签可能需要大量的微信小程序标签还有样式

配置:第一步,下载

https://github.com/icindy/wxParse
第二步,放入项目中,我选择pages目录下
第三步,配置
wxml加入:
<import src="http://t.zoukankan.com/wxParse/wxParse.wxml"/>
在需要的地方使用:
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
其中article是后台html值的变量名
 
js加入:
var WxParse = require('../wxParse/wxParse.js');
这里貌似使用es6的import会有错误
我在onload事件写下了:
WxParse.wxParse('article', 'html', this.data.article, this, 5);
注意的是第三个和第四个参数,前几个可以固定不变但是第一个要和数据变量名一致,第三个是后台数据,第四个是指的小程序标签,可以注册多个wxparse
wxss加入:
@import '../wxParse/wxParse.wxss';
到此完成,但是要注意的是a标签的转化,需要加入一个方法,示例如下:
wxParseTagATap: function (e) {
var href = e.currentTarget.dataset.src;
console.log(href);
wx.redirectTo({
url: href
});
}
这个在点击a标签的时候控制台其实是输出了警告信息的
此外url也只能是小程序内部地址,这是个限制,他不能跳到外部,这里我想后台编辑的时候可以用二维码替代,小程序跳转外部地址可以使用web-view标签,详情参考官方文档
 

免责声明:文章转载自《wxparse使用(富文本插件)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇js获取移动端设备信息(IMEM,IMIS,手机型号,系统版本,浏览器信息等)FTPClient下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序通过background-image设置背景图片

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片;base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本:background-image: url("data:image/png;bas...

小程序图片上传

问题:   描述:小程序中的wx.chooseImage(OBJECT)选择相册或者相机的照片,虽然有图片的url返回,但是那个是临时路径,不知道怎么上传到公司的服务器中. 结果方案:   后面我查看到了,找到了对应的方法,wx.uploadFile(OBJECT).   小程序代码 wx.chooseImage({ //手机上传照片 success...

微信小程序中遮罩层滚动穿透问题(view增加一个属性解决)

直奔正题: 遮罩层(蒙层)弹出的时候,不应该让遮罩层底下的内容能滚动,小程序中的最佳解决方案亲测如下: <view class="container"catchtouchmove="ture"></view> .container { background-color: #000000; position: fix...

在有已认证的公众号情况下,复用资质快速注册小程序,免除再次认证费用

已经拥有认证过的公众号 快速注册认证小程序,无需重新提交主体材料、无需对公打款、无需支付300元认证费用。 第一步: 进入公众号管理后台首页 第二步: 选择左边菜单栏中的“小程序管理”,进入页面后点击“快速注册并认证小程序”。 第三步: 在快速创建小程序流程说明下,勾选,选择“快速创建” 第四步: 快速创建 第五步:公众号管理员扫描二维码验证 第...

微信小程序底部导航Tabbar

1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图。 2,对于底部导航栏,小程序上给出的文档要求里面的item最少2个,最多五个。 3,在项目中找到app.json这个文件 { "pages":[ "pages/index/i...

小程序富文本特殊字符转移

小程序富文本特殊字符转义 function escapeHtml(str) { var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"', 'middot': '·', 'amp...