直接用rich-text就可以，然后稍作css修饰
一开始，看文档以为所有的原生html都要转换成nodes的数组，然后循环展示。我还特地研究了怎么从服务器进行转成nodes这样的结构，所以就用到了Html2Wxml2J，研究了好大半天呢，整体不错，效果也很理想，配合小程序前端模板，能在他生成的标签或者class上面修改样式，来符合手机端的实用。
既然rich-text能直接渲染原生html,我看应该是其内部进行了nodes处理，既然能支持原生，我觉得没有必要用html2wxml2j，除非有特别的需求，我们再可以定制。
然而rich-text有个问题，它不能够给内联img设置宽度100%，这样图片就容易溢出屏幕。我们只能在后台返回富文本的时候对图片的img标签进行格式化。或者前端进行格式化也行，我赞成使用后端，因为很多种情况我们不一定都能想得到。
代码参考如下,但也要根据具体情况进行分析。
前端代码：
<rich-text nodes="{{detail_tb}}">
</rich-text>
这个是wxml里<rich-text>富文本
这个写在js里：
var _that =this;
_that.setData({
detail_tb: res.data.replace(/\<img/gi, '<img style="max-width:100%;height:auto" '),
})
重点是横线的部分res.data是我从后台获取放在rich-text里的数据后端正则如下
Java正则表达式 (<img.*?)style=\".*?\" 替换成 $1
其中.*表示0个或0以上多个任意字符
.*?表示0个或0以上多个任意字符的非贪婪匹配,就是假如一个句子中有多个style,它匹配距离最近的那个style,同理后面的.*?匹配距离最近的双引号
$1表示反向引用,它代表的是正则表达式中的第一个小括号所括起来的分组的内容,如果有两个小括号括起来的内容,则分别用$1,$2表示它们(在替换后的字符串中)
完整的Java程序如下
public class CC {
public static void main(String[] args) {
String s="<img src=\"file/img/2016/12-28/1234-25521482893088459.jpg\" title=\"1234.jpg\" alt=\"\" width=\"396\" height=\"271\" style=\"width: 396px; height: 271px;\"/>";
System.out.println(s.replaceAll("(<img.*?)style=\".*?\"", "$1"));
}
}1 2 3 4 5 6 | public class CC { public static void main(String[] args) { String s="<img src=\"file/img/2016/12-28/1234-25521482893088459.jpg\" title=\"1234.jpg\" alt=\"\" width=\"396\" height=\"271\" style=\"width: 396px; height: 271px;\"/>"; System.out.println(s.replaceAll("(<img.*?)style=\".*?\"", "$1")); }} |
运行结果
<img src="file/img/2016/12-28/1234-25521482893088459.jpg" title="1234.jpg" alt="" width="396" height="271" />