微信小程序富文本解析组件wxParse的使用
管理员 发布于 6年前 451
这两天我就打算用微信小程序重构一下我的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>效果图：
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
该博客于2020-12-7日，后端基于go语言的beego框架开发
前端页面使用Bootstrap可视化布局系统自动生成
是我仿的原来我的TP5框架写的博客，比较粗糙，底下是入口
侯体宗的博客
文章标签
- test 三种扣减库存方案 Hyperf2.1启动报错端口占用 上外网神器Ghelper 上外网神器集装箱 laravel中HMVC模式 Hyperf框架验证器 Hyperf自定义函数编写 Hyperf对象转成数组 PHP2021面试题集 centos7系统上挂载 Hyperf框架 秒杀系统的设计 Laravel Octane PHP数组底层实现原理 php7垃圾回收机制 Laravel中类型转换 mysql事务特征及隔离级别 Linux-awk命令 mysql编码 JWT源码实现 Laravel内核分析 Laravel中的用法 centos7+go环境+beego框架 go+beego框架开发博客 go+beego开发博客首页 go+beego自定义公共函数 beego注册_登录_查询 beego控制器创建 Beego框架安装 go语言环境安装 laravel+Elasticsearc laravel运行原理 windows7搭建Vuejs环境 Laravel分块 laravel去重(distinct() laravel集合 laravel+mysql读写分离 laravel5+复杂原生sql laravel+MissMyCat/al lnmp sessio laravel自定义数组分页 laravel中.env配置 laravel8队列发邮件 码云仓库常用操作 laravel8配置163SMTP laravel8配置全局函数 laravel/jetstream之认证 laravel/jetstream
友情链接
