小程序使用wxParse解析html
2021/9/29 20:12:24
本文主要是介绍小程序使用wxParse解析html,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小程序使用wxParse解析html
githab:wxParse githab
使用步骤
1、从githab拉下wxParse源码,将wxParse拿出来放在自己项目里
自己项目里
2、wxml
// 这里大家按照自己的路径导入 <import src="../../../../utils/wxParse/wxParse.wxml"/> <view> <template is="wxParse" data="{{wxParseData:article.nodes}}"/> </view>
3、wxss
@import "/utils/wxParse/wxParse.wxss" // 自己项目路径导入
4、js
var WxParse = require('../../../../utils/wxParse/wxParse'); Page({ data: { article: '<p style="text-align: center;"><strong>我大晚上不睡觉居然。。。</strong></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="http://tmp/0Y5MCk0UeYTS70f20900495d0916f323970d2c90c1bf.gif" width="136" data-custom="id=abcd&role=god" style=""></p><p style="text-align: center;"><br></p><p style="text-align: left;">在写代码在写代码在写代码字写代码写代码写代码</p><p style="text-align: left;"><strong>的比基尼多年的加拿大籍</strong><em>发酵粉哪家哪家呢</em></p>', // 要解析的html格式数据 }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { var that = this; var temp = WxParse.wxParse('article', 'html', that.data.article, that, 5); that.setData({ article: temp }) }, })
具体使用也可以看githab源码,那里说明很清楚。
效果
简述
我的功能是小程序利用富文本实现文章发布,也可以预览和展示。现在的问题是,富文本组件写入的都是html格式的数据,所以我们可以先把html格式的数据保存到云数据库,然后获取回来使用wxParse解析出来。关于小程序富文本的使用,这个我会在过几天贴出来。
这篇关于小程序使用wxParse解析html的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践