用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-3-23 11:52:32 天下雪原创达人 造轮子 人生巅峰 楼主 17854
富文本解析是一个困扰无数人的问题,目前网上的解决方案已经比较多了;所以我就简单说明一下,以便大家能够集中参考:


相关文章:
WxParse解决html标签解析烦恼
开发"小程序"中做的一些"转换"的工作:html 转换成 wxml,html 转换成 json
微信小程序试水教程:富文本转文本
微信小程序小技巧《十七》富文本组件wxParse
复杂富文本解析变通实现
显示cms里的html文章
实现html格式内容
wx-mina-html-view: 微信小程序渲染html
实例教程:使用wxParse解析html
后台传回的json数据含有html标签,无法在wxml正确显示
微信小程序小总结:解析xml问题,解析html问题

相关组件:
convert html to wxml.微信小程序html转wxml.
wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown...
微信小程序渲染html
将html文件转为微信小程序用的wxml文件
将html内容转化成wxml可以显示的内容,方便用于小程序中显示
微信小程序html转换成wxml适配微信小程序
微信小程序 HTML Parse:将 HTML 字符串解析成专用标签



相关demo:
微信小程序demo:体育新闻;ifeng网API,htmltowxml,bluebird
微信小程序demo:A岛匿名版:wxParse富文本解析,侧边栏菜
微信小程序学习用Demo:新闻列表(富文本解析)
微信小程序学习用demo:cnode:wxParse富文本解析使用
微信小程序demo推荐:云沃客:富文本解析,模板使用
微信小程序demo:知乎日报:富文本解析,点击加载更多
微信小程序完整demo:游轮中心,富文本解析,包括前后台
微信小程序Demo:广州校园助手(富文本解析)
小程序学习用demo推荐:富文本解析,滑动新闻(适用1221)
微信小程序学习用demo推荐:图片自适应,富文本解析(12.9)
微信小程序demo:新闻阅读器:富文本解析,新闻API
微信小程序demo:jinri,富文本解析




以下讨论均针对wxParse组件:
相关讨论:
绑定的动态输出内容中包含组件标签,结果被原样输出了,怎么解决
{{item.en}}
结果显示成这个样子了
1.png
看过wxParse.js,但无法实现我的一些自定义功能,所以还要自己打造完成了,有知道的帮忙指点一下哦
小程序不支持js直接渲染wxml

建议仔细阅读wxparse的代码 然后根据wxparse的代码实现自己的功能

相关讨论:
wxParse如何使用列表渲染?wx:for?
现在已经有一个wx:for了,我现在稍微改了一下wxParse,将生成的数据返回,放在之前的数组里,但是并不显示。。
11.jpg
12.jpg
13.jpg
14.jpg
找到原因了,应该是wxParseData:item.html.nodes

相关讨论:
Wx.request调用富文本解析出错
[AppleScript] 纯文本查看 复制代码
var WxParse = require('../../wxParse/wxParse.js');
var app = getApp();
Page({
  data: {
    news: {},
  },
  onLoad: function (options) {
    var newsID = options.id;
    var url = "http://******.cn/content.php?id=" + newsID;
    var that = this;
    //util.http(url, this.proccessNewsData);
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
        WxParse.wxParse('newstext','html',res.data.newstext,that,5);
      },
      fail: function (error) {
        console.log(error)
      }
    })
  },
出现这个错误
97187c210bf08f599c5a2d918d81b4e1.png
一般是你解析的文本中存在比如 <)这种符号,最近发现有/也不行

相关讨论:
小程序中提示函数没有定义的问题?
在自定义页面中调用,var WxParse = require('../../wxParse/wxParse.js');console.log(WxParse.hxParse());出错:

[AppleScript] 纯文本查看 复制代码
thirdScriptError
WX.hxParse is not a function;at api request success callback function
TypeError: WX.hxParse is not a function

其中,hxParse()是wxParse.js中自定义的函数,如下:

[AppleScript] 纯文本查看 复制代码
function hxParse(){
    return 'ok';
}


为什么找不到hxParse函数?好像自定义函数加进去,没什么用,是不是在哪需要编译一下,求教。

在wxParse.js最下面添加:

[AppleScript] 纯文本查看 复制代码
module.exports = {
wxParse: wxParse,
**HxParse:HxParse,**
wxParseTemArray:wxParseTemArray,
emojisInit:emojisInit
}

附录:wepy组件化开发之html转换组件(作者:星河阅卷)
- 前言
相信大家在小程序开发时都会遇到需要将html代码转换为在小程序中可以展示的代码的情况,例如:我们在管理后台中通过富文本编辑器中录入公告,需要在小程序中动态展示这些公告,大家都知道,大部分的富文本编辑器编辑的结果要么是html格式的,要么就是md格式的,在我们的小程序中是没办法解析的。故此,我们需要用到一个控件【wxParse】,然而在使用这个控件的时候任然存在着一些不方便的地方,如需要使用wxParse的时候,需要在wxml,js,wxss中都分别引入对应文件,需要跟新内容时每次都需调用一次对应方法转化:
[AppleScript] 纯文本查看 复制代码
WxParse.wxParse("goodsDesc" , "html", "<p style='color:red;'>示例代码</p>", this,0);
并且需要在wxml中使用模板:
[AppleScript] 纯文本查看 复制代码
<template is="wxParse" data="{{wxParseData:goodsDesc.nodes}}"></template>

比较麻烦,不太直观。
综上所述,本人结合wxParse进行二次开发,封装了一个转化html的公共控件,以方便开发者快速转化html代码。
- 实现细节1. 页面部分
[AppleScript] 纯文本查看 复制代码
<template>
    <import src="../plugins/wxParse/wxParse.wxml"/>
    <block wx:for="{{htmlParserTpl.nodes}}" wx:key="{{index}}">
        <template is="wxParse0" data="{{item}}"/>
    </block>
</template>

以上为页面部分代码。首先,需要引入wxParse.wxml文件,然后便是将给定数据转换为小程序元素。
2. 脚本
[AppleScript] 纯文本查看 复制代码
<script>
    import wepy from 'wepy';
    //import abc from 'abc';
    import config from '../common/config';
    import utils from '../common/util';
    import WxParse from '../plugins/wxParse/wxParse';
    export default class HTMLParser extends wepy.component {
        props = {
            parserName: {
                type:String,
                default: "htmlParserName"
            },
            parserContent:{
                type: String,
                default: "<p style='font-size: 32rpx; padding: 30rpx 0; text-align: center;'>没有任何内容</p>"
            },
            parserType:{
                type:String,
                default: "html"
            },
            parserPadding:{
                type: Number,
                default: 0
            }
        };
        data = {
            htmlParserTpl: {}
        };
        events = {
            'htmlParser-broadcast': ($event, ...args) => {
            },
        };
        methods = {
            htmlParserNotice(){
                this.htmlParse();
            }
        };
        async onLoad(){
            this.htmlParse();
        };
        wxParseImgLoad(image){
            let imgInfo = image.detail;
        };
        htmlParse(){
            /**
             * WxParse.wxParse(bindName , type, data, target,imagePadding)
             * 1.bindName绑定的数据名(必填)
             * 2.type可以为html或者md(必填)
             * 3.data为传入的具体数据(必填)
             * 4.target为Page对象,一般为this(必填)
             * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
             */
            try{
                WxParse.wxParse(this.parserName , this.parserType, this.parserContent || this.props.parserContent.default, this,this.parserPadding);
                this.htmlParserTpl = this[this.parserName];
            }catch (e){
                console.warn("kinerHtmlParser:","没有任何内容需要转换
",e);
            }
        }
    }
</script>

以上为组件的脚本部分。主要是通过动态属性的方式,将我们必要的参数从引入页面传递到组件中,并对外提供转换数据改变通知方法,当引用页面传递的被转换数据改变时,仅需调用此方法便可更新组件中的内容。
3. 样式
[AppleScript] 纯文本查看 复制代码
<style lang="less">
    @import "../plugins/wxParse/wxParse.wxss";
    .wxParse-img {
        margin: 0 auto;
        width: 100%;
        min-height: 200rpx;
        display: block;
        background-color: transparent;
    }
</style>

以上为公共组件中对样式的公共修饰,首先,在组件中引入wxParse.wss文件,其次是对页面图片的修饰,可根据具体需求调整
- 引用示例
[AppleScript] 纯文本查看 复制代码
<style lang="less">
    .tip{
        background-color: #FFFFFF;
        padding: 30rpx;
        margin: 20rpx;
    }
</style>
<template>
    <view class="container">
        <view class="tip">
            <htmlParser :parserName="name1" :parserContent.sync="content1"/>
        </view>
        <veiw class="tip">
            <htmlParser2 :parserName="name2" :parserContent.sync="content2"/>
        </veiw>
        <veiw class="tip">
            <htmlParser3 :parserName="name3" :parserContent.sync="content3"/>
        </veiw>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import htmlParser from '../components/htmlParser';
    export default class Index extends wepy.page {
        config = {
            "navigationBarTitleText": "网页转换",
        };
        components = {
            htmlParser: htmlParser,
            htmlParser2: htmlParser,
            htmlParser3: htmlParser
        };
        mixins = [];
        data = {
            name1: "myHtmlParserKiner1",
            name2: "myHtmlParserKiner2",
            name3: "myHtmlParserKiner3",
            content1: "<text style='color: red;'>新1</text>",
            content2: "<text style='color: red;'>新2</text>",
            content3: ""
        };
        methods = {
        };
        events = {
        };
        async onLoad() {
            var self = this;
            wx.request({
                url: "",
                method: "POST",
                data:{
                }
            }).then((data)=>{
                self.content1 = data.data.goodsDes;
                //注意,在此处修改了content2之后,需要手动调用$apply()方法更新数据
                self.$apply();
                //调用通知接口通知组件更新数据
                this.$invoke('htmlParser', 'htmlParserNotice');
            });
            wx.request({
                url: "访问接口地址",
                method: "POST",
                data:{
                }
            }).then((data)=>{
                self.content2 = "<text style='color: red;'>新</text>"+data.data.goodsDes;
                //注意,在此处修改了content2之后,需要手动调用$apply()方法更新数据
                self.$apply();
                //调用通知接口通知组件更新数据
                this.$invoke('htmlParser2', 'htmlParserNotice');
            });
            wx.request({
                url: "访问接口地址",
                method: "POST",
                data:{
                }
            }).then((data)=>{
                self.content3 = data.data.goodsDes;
                //注意,在此处修改了content2之后,需要手动调用$apply()方法更新数据
                self.$apply();
                //调用通知接口通知组件更新数据
                this.$invoke('htmlParser3', 'htmlParserNotice');
            });
        };
    }
</script>

注意,在动态绑定属性是需要使用
[AppleScript] 纯文本查看 复制代码
:parserContent.sync="content2"
这种方式绑定,否则因为数据时通过接口异步返回会导致获取不到最新数据。
- 效果展示
111.png
112.png
113.png







有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
@112233 @搞个方法消息 22
发新帖
您需要登录后才可以回帖 登录 | 立即注册