微信小程序富文本解析组件wxParse的使用
微信(小程序)  /  管理员 发布于 5年前   1007
这两天我就打算用微信小程序重构一下我的blog
在做到文章页显示的时候编辑器生成的html标签小程序是不识别的,然后就找到了wxParse;
wxParse:支持Html及markdown转wxml可视化 感觉非常牛皮,
好了不说开始引入项目;
1.先把组件下载下来:https://github.com/icindy/wxParse
2.直接把wxParse文件夹复制到你的小程序项目根目录,wxss/wxml/js 三个文件引入的相应的位置;
wxParse.wxss/wxParse.wxml/wxParse.js 三个文件分别用require/import 引入,路径最好写绝对路径
3.好了不说了 直接上代码
js部分 我是带参过来提取文章信息
//获取应用实例 var app = getApp(); var WxParse = require('../../wxParse/wxParse.js'); Page({ data:{ }, onLoad:function(options){ console.log('onload'); var id=options.artid; var that = this; wx.request({ url: 'url?artid='+id, data: {}, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data.content) that.setData({ art:res.data, //article: res.data.content, content: WxParse.wxParse('content', 'html', res.data.content, that, 5) }) }, fail: function(res) { }, complete: function(res) { } }) }, onReady:function(){ console.log('onReady') }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } })
wxss部分
@import "../../wxParse/wxParse.wxss";
wxml部分
<import src="../../wxParse/wxParse.wxml"/> <view class="wxParse" style="padding: 5px;"> <template is="wxParse" data="{{wxParseData:content.nodes}}"/> </view>
效果图:
路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..mashrdn 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..张伟 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q!有用,不过免费节点隔天就要去git上复制新的导进去..博主 在
科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了,告知大家,免的老有老铁问我!..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号