• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序开发——模板中加载html代码 - 逍遥云天

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序开发——模板中加载html代码

最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text

<rich-text class=\'f13 c_9\' nodes="{{html}}"></rich-text>

其中 html 为后端返回的html代码格式数据,这里直接就可以解析,再也不需要像wxParse那样还需要引入插件。

虽然官方文档说nodes不推荐使用String类型,性能会有所下降(当然了,肯定要解析代码呀),建议使用nodes类型(节点列表),就是这样的:

<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
Page({
  data: {
    nodes: [{
      name: \'div\',
      attrs: {
        class: \'div_class\',
        style: \'line-height: 60px; color: red;\'
      },
      children: [{
        type: \'text\',
        text: \'Hello&nbsp;World!\'
      }]
    }]
  },
  tap() {
    console.log(\'tap\')
  }
})

最初使用wxParse就是没注意到这个组件还支持String格式数据,通篇在介绍nodes这种用法。想想这种用法实在是有点反人类(吐槽下),如果我要嵌入解析html文档,为什么还要用节点列表的形式去写呢?如果我都能写出节点列表了,为什么不直接用wxml标签写呢?解析html主要就是解析服务器获取的html数据的呀,后端服务器获取的html数据我还要转换成Nodes?凌乱中......

总之,目前我还没想到什么情况下需要使用这种方式,即使使用String类型性能会有所下降,但总比我去解析html成nodes或者使用wxParse好吧,这就足够了。


 小程序默认是不支持html格式的内容显示的,那可以通过wxParse来实现。

1) 下载wxParse:https://github.com/icindy/wxParse

2) 下载完成后将插件目录下的wxParse文件夹拷贝到项目目录下

3) 在app.wxss中导入wxParse的样式表:

@import "wxParse/wxParse.wxss";

4)在需要加载html代码的页面js文件中引用wxParse.js文件:

var WxParse = require(\'../../../wxParse/wxParse.js\');

5)通过WxParse.wxParse的方法来设置html内容:

var htmlContent= "<h2>这里是Html内容</h2>"
WxParse.wxParse(\'detailHtml\', \'html\', htmlContent, this, 0);

6) 页面中引用模板

<import src="../../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:htmlContent.nodes}}"/>

关于wxParse的应用与二次开发详见:https://github.com/icindy/wxParse

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序-常用组件发布时间:2022-07-18
下一篇:
微信小程序 - (下拉)加载更多数据发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap