微信小程序加载h5富文本
问题背景
客户端开发过程中,经常碰到服务器返回商品的详情是h5的富文本之类的场景,客户端等可以直接通过webview等进行加载,微信小程序是如何可以直接加载h5富文本呢?
问题分析
可以使用wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析。
GitHub地址: https://github.com/icindy/wxParse
问题解决
(1)下载项目,复制项目中wxParse文件夹到自己项目下
(2)在要引入的页面的js文件中,引入文件(相对路径结合自己项目路径确定)
var WxParse = require('../../wxParse/wxParse/wxParse.js');
// 进行数据绑定,detail_content和wxml中节点名称匹配,content为需要加载显示的h5富文本。
WxParse.wxParse('detail_content', 'html', content, that, 5);
(3)css文件中
@import "../../wxParse/wxParse/wxParse.wxss";
.content{
width: 100%;
height: 500rpx;
margin-top: 50rpx;
}
(4)页面wxml文件中,引入模板并绑定
<import src="../../wxParse/wxParse/wxParse" />
<view class="content">
<template is="wxParse" data="{
{wxParseData:detail_content.nodes}}" />
</view>
问题总结
本文介绍了微信小程序是可以直接加载h5富文本的,有兴趣的同学可以进一步深入研究。